CSS盒子模型相关

一、盒子模型的组成

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。

• margin（外边距）： 盒子与外界的距离。
• border（边框）： 盒子的边框。
• padding（内边距）： 紧贴内容的补白区域。
• content（内容）：元素中的文本或后代元素都是它的内容。

盒子的大小 = content + 左右 padding + 左右 border 。

注意： 外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

1.1. 盒子内容区（content）

注意：
max-width 、 min-width 一般不与 width 一起使用。
max-height 、 min-height 一般不与 height 一起使用。

1.2. 关于默认宽度

所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。

• 总宽度 = 父的 content - 自身的左右 margin 。
• 内容区的宽度 = 父的 content - 自身的左右 margin - 自身的左右 border - 自身的左右
  padding 。

1.3. 盒子内边距（padding）

padding 复合属性的使用规则

• padding: 10px; 四个方向内边距都是 10px 。
• padding: 10px 20px; 上下 10px ，左右 20px 。（上下、左右）
• padding: 10px 20px 30px; 上 10px ，左右 20px ，下 30px 。（上、左右、下）
• padding: 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、下、左）

注意点：

• padding 的值不能为负数。
• 行内元素 的 左右内边距是没问题的，上下内边距不能完美的设置。
• 块级元素、行内块元素，四个方向内边距都可以完美设置。

1.4. 盒子边框（border）

边框相关属性共 20 个。
border-style 、 border-width 、 border-color 其实也是复合属性。

1.5. 盒子外边距_margin

margin 注意事项

• 子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着子元素）
• 上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素
  的位置。
• 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右margin 可以完美设置，上下 margin 设置无效。
• margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。
• margin 的值可以是负值。

1.5.1. margin 塌陷问题

什么是 margin 塌陷？
第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

如何解决 margin 塌陷？

• 方案一： 给父元素设置不为 0 的 padding 。
• 方案二： 给父元素设置宽度不为 0 的 border 。
• 方案三：给父元素设置 css 样式 overflow:hidden

1.5.2. margin 合并问题

什么是 margin 合并？
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决 margin 合并？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了

二、处理内容溢出

注意：

• overflow-x 、 overflow-y 不能一个是 hidden ，一个是 visible ，是实验性属性，不建议使用。
• overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

三、隐藏元素的方式

3.1. visibility 属性

visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）。

3.2. display 属性

设置 display:none ，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

四、样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

4.1. 会继承的 css 属性

字体属性、文本属性（除了vertical-align）、文字颜色 等。

4.2. 不会继承的 css 属性

边框、背景、内边距、外边距、宽高、溢出方式 等

一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

五、默认样式

**元素一般都是些默认的样式，例如： **

• <a>元素：下划线、字体颜色、鼠标小手。
• <h1> ~ <h6> > 元素： 文字加粗、文字大小、上下外边距。
• <p> 元素：上下外边距
• <ul> 、 <ol> 元素：左内边距
• body 元素： 8px 外边距（4个方向）

优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择器到该元素。

六、布局小技巧

6.1. 行内元素、行内块元素，可以被父元素当做文本处理

可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如： text-align 、 line-height 、 text-indent 等。

6.2. 如何让子元素，在父亲中水平居中

• 若子元素为块元素，给子元素加上： margin:0 auto; 。
• 若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。

6.3. 如何让子元素，在父亲中垂直居中

• 若子元素为块元素
  给子元素加上： margin-top ，值为：(父元素 content －子元素盒子总高) / 2
• 若子元素为行内元素、行内块元素：
  让父元素的 height = line-height
• 让每个子元素都加上： vertical-align:middle;
• 补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

七、元素之间的空白问题

7.1. 产生的原因

行内元素、行内块元素，彼此之间的换行和空格会被浏览器解析为一个空白字符。

7.2. 解决方案

• 方案一： 去掉换行和空格（不推荐）。
• 方案二： 给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。

八、行内块的幽灵空白问题（行与行之间的幽灵空白）

8.1. 产生原因

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

8.2. 解决方案

• 方案一： 给行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、top 均可。
• 方案二： 若父元素中只有一张图片，设置图片为 display:block 。
• 方案三： 给父元素设置font-size: 0 。如果该行内块内部还有文本，则需单独设置 font-size 。