03 CSS-盒模型和标准文档流(行内元素和块级元素)

盒模型

一个盒子中主要的属性就5个：width、height、padding、border、margin。

• width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
• height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
• padding是“内边距”的意思
• border是“边框”
• margin是“外边距”

真实占有宽度= 左border + 左padding + width + 右padding + 右border

padding

 如果写了4个值：
 padding:30px 20px 40px 100px;
 上、右、下、左

 如果只写3个值：
 padding: 20px 30px 40px;
 上、右、下、??和右一样

 如果只写2个值：
 padding: 30px 40px;


  //用小属性层叠大属性：
  padding: 20px;
  padding-left: 30px;

 //下面的写法错误：
 padding-left: 30px;
 padding: 20px;
 (不能把小属性，写在大属性前面。)

border

边框有三个要素：粗细、线型、颜色；

实线：solid 
虚线：dashed

border属性能够被拆开，有两大种拆开的方式： 
1） 按3要素:border-width、border-style、border-color 
2） 按方向：border-top、border-right、border-bottom、border-left

 //按3要素拆开：
 border-width:10px;    → 边框宽度
 border-style:solid;   → 线型
 border-color:red;     → 颜色
 等价于：
 border:10px solid red;


 //按方向来拆
 border-top:10px solid red;
 border-right:10px solid red;
 border-bottom:10px solid red;
 border-left:10px solid red;
 等价于
 1border:10px solid red;

小总结：

• 内边距padding：内容与边框之间的距离【移动的是内容范围】
• 外边距margin：盒子与盒子之间的距离 【移动的是盒子】
• 浮动的元素或者定位的元素依然可以设置margin或者padding

标准文档流

标准流下的现象： 
1） 空白折叠现象：

比如，如果我们想让img标签之间没有空隙，必须紧密连接：
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />

2） 高矮不齐，底边对齐： (比如放三张高度不一的图) 
3） 自动换行，一行写不满，换行写。

在标准文档流中标签分为两种：块级元素、行内元素。

块级元素：

• 独占一行，不能与其他任何元素并列
• 能接受宽、高
• 如果不设置宽高，那么宽度将默认变为父亲的100%

行内元素

• 与其他行内元素并排
• 不能设置宽高。默认的宽度就是文字的宽度

在HTML中，我们将标签分为文本级、容器级：

文本级：p、span、a、b、i、u、em 
容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样 。 
所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。 
所有的容器级标签都是块级元素。

块级元素和行内元素的相互转换

块级元素可以设置为行内元素：通过display:inline; 
行内元素可以设置为块级元素：通过display:block;

标准流里面限制非常多。比如，我们现在就要并排、并且就要设置宽高。怎么办？ 
那只能脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流： 
1） 浮动 
2） 绝对定位 
3） 固定定位

补充：

还有一种是行内块元素：display: inline-block;

不推荐让行内元素转化为行内块元素。直接转为块级元素即可。 
因为：

• 行内块元素都有vertical-align属性。默认值为baseline
• 行内块元素中间都有空白间隙（这是由于写代码时回车换行导致）