CSS基础入门笔记1CSS又叫层叠样式表(英文全称：Cascading Style Sheets)，可以用来修饰网页的一

一、CSS历史

CSS又叫层叠样式表(英文全称：Cascading Style Sheets)，可以用来修饰网页的一门语言。1996哈坤-利（Håkon Wium Lie）首先提出CSS的概念。

为什么叫层叠样式表

演示代码：

p{
  font-size : 50px;
}
p{
  color : red;
}
.g{
   color:green;
 }

效果：

如图中所示，对第一个P标签进行了两次样式声明，第二个P标签则用不同选择器进行了样式声明。

CSS版本

版本	时间	重点
CSS1	1996年	不用管
CSS2	1998年	不用管
CSS2.1	2004~2011年	使用最广泛的版(IE支持)
CSS3	199年开始起草	现代版本，分模块（IE8部分支持）
CSS4*	分模块升级	无

怎么知道哪些浏览器支持哪些特性：使用caniuse.com

二、体系化学习

1 学习内容

语法
调试（找bug）
查资料
标准制定者

1.1 语法

语法一
语法二

1.2 如何调试

W3C在线验证器（不用）
VScode颜色会写大概出错位置
使用WedStorm(需要下载，打开一次就方便了)
使用开发者工具看警告
border调试法(重要)

.g{
  color:red;
  background: black;
      border: 5px solid green;
  font-size: 50px;
}

border调试有无bug对比图

1.3 查资料

2. 如何学

copy-抄文档，抄老师
run-在自己的机器上跑代码
modify-加入自己的想法，再运行

三、文档流

文档流英文Normal Flow：文档中元素的流动方向，简称为从左到右，从上到下。

display:inline/block/inline-block对元素进行规定是内联元素还是块级元素

不要在inline（内联元素）里面加block（块级）

块级元素的宽度是默认能有多宽是多宽，但不是100%，可以用style="width:100%"来设置成100%,但永远不要这样设置，有bug

流动方向
- inline 元素从左到右，到达最右边换行
- block 元素从上到下，每个都占一行
- inline-block 也是从左到右，一定是成块的，不会头脚分开
宽度
- inline 不能用width指定宽度，宽度是内部inline元素宽度的和
- block 可以用width指定，默认自动计算宽度
- inline-block 可以用width指定
高度
- inline 由line-height间接确定，不能用height指定
- block 由内部文档流元素决定，可以用height指定
- inline-block 可以用height指定
overflow

div{
  border:2px solid red;
  height: 200px ;
  /*overflow: hidden/auto/scroll/visible/*/
  overflow: auto ;
}

脱离文档流

四、盒模型

两种盒模型

content-box 内容盒，内容就是盒子的边界

width=内容宽度
border-box 边框盒，边框才是盒子的边界

width=内容宽度+padding+border

没有指定width和height，两个模型就没有区别

border-box好用

margin合并只有上下合并，没有左右合并

父子margin合并，第一个孩子和最后一个孩子的margin和父母的margin合并

.partent{
margin: 30px 0;
}
.child{
border: 2px solid green;
    margin: 30px 0;}

兄弟上下margin合并

.partent{
border: 2px solid red;
margin: 30px 0;
}
.child1{
border: 2px solid green;
    margin: 30px 0;
}

.child2{
border: 2px solid green;
    margin: 30px 0;}