详解CSS-04-认识盒模型

一、盒模型基本概念

1. 认识盒模型

什么是盒模型：

• 所有HTML标签都可以看成矩形盒子，由width、height、 padding、margin、border构成，称为“盒模型”。
  

2. width和height属性详解

width属性：

• width属性表示盒子内容的宽度
• width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。
• 当块级元素(div、h系列、li等)没有设置width属性时，它 将自动撑满，但这并不意味着width可以继承。

height属性：

• height属性表示盒子内容的高度
• height属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。
• 盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0。

3. padding属性详解

• padding是盒子的内边距，即盒子边距内壁到文字的距离。
• 四个方向的padding，可以分别用小属性进行设置
  
• padding的数值写法
  • 四数值写法:四个数值以空格隔开进行设置，分别表 示上、右、下、左的padding。
    
  • 三数值写法:三个数值以空格隔开进行设置，分别表 示上、左右、下的padding。
    
  • 二数值写法:二个数值以空格隔开进行设置，分别表 示上下、左右的padding。
    

灵活设置padding

• 样例一：
  

• 样例二：
  

• 样例三：
  

• 样例四：用小属性层叠大属性。
  

4. margin属性详解

• margin是盒子的外边距，即盒子和其他盒子之间的距离
• margin的四个方向
  

margin的塌陷:

• 竖直方向的margin有塌陷现象：小的margin会塌陷到大的 margin中，从而margin不叠加，值以大值为准。
• 一些元素(比如body、ul、p等)都有默认的margin，在开始制作网页的时候，要将他们清除。尽量不要使用通配符，存在性能问题。一般项目中使用第三方写好的reset.css。
  • https://clarle.github.io/yui3/yui/docs/cssreset/
  • https://necolas.github.io/normalize.css/

盒子的水平居中:

• 将盒子左右两边的margin都设置为auto，盒子将水平居中。

  margin: 0 auto;
  

5. 盒模型计算

相关高度：

• width、height不是盒子总高度。
• 盒子的实际总宽度 = width + 左右padding + 左右border
• 盒子的实际总高度 = height + 上下padding + 上下border
• 盒子的宽度的空间尺寸 = width + 左右padding + 左右border + 左右margin
• 盒子的高度的空间尺寸 = height + 上下padding + 上下border + 上下margin

6. box-sizing属性

• 将盒子添加了box-sizing: border-box;之后，盒子的width 、height数字就表示盒子实际占有的宽高(不含margin) 了，即padding、border变为“内缩”的，不再“外扩”。
• box-sizing属性大量应用于移动网页制作中，因为它结合百 分比布局、弹性布局等非常好用，在PC页面开发中使用较少。
• box-sizing属性兼容到IE9

二、行内元素和块级元素

1. display属性

• img和表单元素是特殊的行内块，它们既能够设置宽度高度 ，也能够并排显示

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

• 使用display:block;即可将元素转为块级元素。
• 使用display:inline;即可将元素转为行内元素，将元素转
  为行内元素的应用不多见。
• 使用display:inline-block;即可将元素转为行内块。

3. 元素的隐藏

• 使用display: none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样。
• 使用visibility: hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置。