盒子模型(padding-margining)-样式继承-浮动

1 回顾

1. 常用属性背景属性： background-color、background-image、background-repeat、background-position、background-attachment、background鼠标光标样式： cursor 值： pointer、move列表样式： list-style-type、list-style-position、list-style-image、list-style表格样式： table-layout、border-collapse2. 选择器组合选择器： 后代元素选择器、子元素选择器、并集选择器、交集选择器伪类选择器： :link :visited :hover :active3. 选择器优先级ID 选择器 > 类名选择器、伪类选择器 > 标签名选择器 > 全局选择器

2 盒子模型深入讲解

2.1 盒子模型的组成

① 盒子模型的相关概念

内容区域 content：盒子的主要区域，盒子中的文本内容或者后代元素都显示在内容区域中。

内边距 padding：盒子的边界（边框）与内容的间距。

边框 border：在盒子的边界上。

外边距 margin：盒子与其他盒子的距离。

② 影响盒子大小的因素

盒子大小 = 内容区域大小 + 内边距 + 边框宽度

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

2.2 盒子中的内容区域

① 设置内容区域的宽高

注意：

宽高最大最小限制一般不会与设置固定的宽高一起使用， 主要对元素默认宽高进行限制。使用百分比设置元素的宽高，参考父元素内容的宽高！

② 块级元素的默认内容宽度的计算规则

行内元素和行内块元素默认的宽高都是被内容撑开，没有内容就没有宽高。

块级元素的默认高度被内容撑开，没有内容就没有高度。块级元素的默认宽度计算规则如下：

元素默认总宽度 = 父元素内容的宽度 - 自己左右外边距元素默认内容宽度 = 父元素内容的宽度 - 自己左右外边距 - 自己左右边框宽度 - 自己左右内边距

2.3 盒子的内边距 padding

padding 复合属性可以设置一个值、二个值、三个值、四个值， 规则如下：

padding: 10px; /* 四个方向内边距都是 10px */padding: 20px 30px; /* 上下 左右 */padding: 1px 2px 3px; /*上 左右 下*/padding: 10px 20px 30px 40px; /*上 右 下 左*/

内边距值的一些规则：

使用百分比作为长度设置内边距，不论设置的哪个方向的内边距，都参考父元素内容的宽度。内边距的值不可以是负数，不能是auto（该元素在父元素中水平居中）。

不同显示模式的元素，设置内边距的规则：

块级元素、行内块元素可以完美设置各个方向内边距。行内元素可以完美地设置左右内边距，但是上下内边距设置不完美。

2.4 边框 border

注意：border 复合属性，对值没有顺序和数量要求。

2.5 外边距 margin

① 相关 css 属性

② margin 设置规则

margin 复合属性，可以设置一个值、两个值、三个值、四个值，规则如下：

margin： 10px; /*设置 4 个方向的外边距*/margin: 10px 20px; /*上下 左右*/margin: 10px 20px 30px; /*上 左右 下*/margin: 10px 20px 30px 40px; /*上 右 下 左*/

外边距值的规则：

如果使用百分比设置长度作为外边距的值，参照父元素内容的宽度。外边距的值可以负数，也可以设置为auto。

不同显示的元素，设置外边距的规则：

块级元素、行内块元素可以完美设置各个方向的外边距。行内元素，可以完美设置左右外边距，上下外边距无法设置。

③ margin 塌陷

什么是 margin 塌陷?

第一个子元素的上外边距和最后一个子元素的下外边距，会作用在父元素上，这种现象称之为margin 塌陷。

margin 塌陷只发生在块级元素上。

如何解决 margin 塌陷？

方案一： 给父元素设置边框。方案二： 给父元素设置内边距。方案三： 给父元素设置 CSS 属性overflow:hidden。

④ margin 合并

什么是 margin 合并？

上一个兄弟元素的下外边距会与下一个兄弟元素的上外边距进行合并，二者之间的距离取较大的那个外边距。

margin 合并只发生在块级元素之间。

如何解决 margin 合并？

把margin合并作为一种现象，布局的时候多加注意。

2.6 内容溢出

2.7 隐藏元素

要想隐藏元素，可以设置 CSS 属性display:none或者visibility:hidden。

两种设置方式的区别：

display:none让元素完全不占任何位置。visibility：hidden只是看不到元素，元素仍然占据原来的位置。

3 样式继承和默认样式

3.1 样式继承

样式继承指的是：设置在父元素上的样式也会作用在子元素或后代元素。不是所有的样式都可以继承。

可以继承的样式：字体样式、文字颜色、文本样式（除了 vertical-align）.

不可以继承的样式：宽高、内外边距、边框、背景 等等。

3.2 默认样式

许多元素具有默认的样式，如 a 元素具有默认的字体颜色和下划线、stong 默认字体加粗、em 默认字体变斜体、p 元素具有默认的上下外边距，h1~h6 具有默认的上下外边距和默认的字体大小以及字体加粗，ul 和 ol 具有默认的左内边距、body具有默认的外边距 等等。

默认样式的优先级大于继承过来的样式！

5 浮动

5.1 浮动的简介

浮动设计的最初想法是为了实现文字环绕图片的效果。

目前浮动成为了前端主流的布局方式。

5.2 元素浮动之后的特点

不论元素原来是行内元素、块级元素还是行内块元素，设置浮动之后，就成了浮动元素，具有浮动元素自己的特性。浮动元素默认的宽高是被内容撑开，没有内容就没有宽高； 可以通过属性设置元素的宽高。浮动元素可以完美地设置各个方向的内外边距，且不会有margin的塌陷和合并。浮动的元素会脱离文档流，多个浮动的元素会水平排列，浮动元素位置如果与不浮动元素重合会显示在上面，不浮动元素中的文本会被挤出。

5.3 浮动元素产生的影响

① 元素浮动之后产生的影响

浮动元素会对后面的兄弟元素产生影响； 后面的兄弟元素会在浮动元素的下面显示导致元素重叠。浮动元素会被父元素产生影响，无法撑开父元素的高度，导致父元素高度塌陷

② 解决浮动的影响（清除浮动）

解决对后面兄弟元素的影响：

给后面的兄弟元素设置 CSS 属性clear:both既可