css中的盒模型

1、作用：控制元素和元素之间，或者元素和内容之间的位置关系；

2、概念：盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素之间的相互关系，CSS定义所有的元素都可以有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界（外边距）

3、盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

• content：元素的宽和高

• border：盒子的边缘

• padding 填充区域

  • 作用1：用来控制父元素和子元素之间的位置关系

  • 作用2：用来控制元素和内容之间的位置关系

  • 特点：添加了padding值之后，padding值会把元素原有的大小撑大；如果想让元素原本大小不变，需要在元素的宽高上减掉所加的padding值

  • 使用方法：

    • padding-top： 30px; 上填充

    • padding-right: 30px; 右填充

    • padding-bottom: 30px;下填充

    • padding-left: 30px; 左填充

    • padding：1 2 3 4； 复合式写法上右下左

    • padding: 1 2 3；1上 2左和右 3下

  • padding不会对背景图的位置造成影响

  • 背景色会延展到padding区域

• margin：外边距

  • 作用：控制同辈元素之间的位置关系。

  • 特点：margin是显示在元素边框以外的空白区。

  • 使用方法：

    • margin-top： 30px; 上边距

    • margin-right: 30px; 右边距

    • margin-bottom: 30px;下边距

    • margin-left: 30px; 左边距

    • margin：1 2 3 4；复合式写法参考padding

  • 实现水平居中的方法：

    • margin：0 auto

    • margin-left：auto；margin-right：auto

  • margin是可以写负值的，padding不可以

  • margin不会影响元素的实际大小，但是也会增加他的所占区域

  • margin的bug：

    • 上下的两个元素的margin值会重叠显示谁的值大，就以谁的margin值显示（BFC解决）

    • 当父元素里的第一个子元素，添加margin-top的时候，会错误的把margin-top值添加给父元素。建立在当前的元素们没有添加边框和浮动的前提下。

      解决方法：BFC 1）给父元素添加overflow：hidden；推荐使用

      2）给父元素和子元素添加浮动属性

      3）可以给父元素添加边框

      4）把margin改成padding

• 标准盒模型所占位置的组成：宽高（content）+padding+border+margin

  • 元素宽度占用的位置大小：宽+左右的padding+左右border+左右margin

  • 元素高度占用的位置大小：高+上下的padding+上下的border+上下的margin

• 怪异盒模型：比如提交按钮

  • 元素的宽度：width（content+border+padding）+margin

  • 属性：box-sizing：border-box（怪异盒模型）/ content-box（标准盒模型）

  tips：li是块状元素，当不给他设置width属性的时候，他默认的宽度是100%，也就是跟父元素等宽，当你给他添加padding左右值的时候，li会重新进行宽度的计算，也就是加上padding值之后依然等于父元素的宽度。