盒子模型

目录

1.盒子模型的介绍

盒子的概念：

盒子模型：

2.内容区域的宽度和高度

3.边框（border是一个复合属性）

边框单方向设置（即只给盒子的某个方向单独设置边框）

4.内边距（padding）

5.外边距（margin）

外边距折叠现象：

2.塌陷现象

6.清除默认样式

7.版心内容

---

.psd后缀 设计师设计图

盒子模型：用来布局（从外到内：先宽高背景色，放内容，调节内存的位置，控制文字细节）

1.盒子模型的介绍

盒子的概念：

1.页面中的每一个标签，都可以看作一个“盒子”，通过盒子的视角更方便的进行布局

2.浏览器在渲染（显示）网页时，会将网页看作一个个的举行区域，也形象称之为盒子

盒子模型：

CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

布局顺序：从外往内 从下往上

2.内容区域的宽度和高度

即width/height设置内容区域大小

3.边框（border是一个复合属性）

属性值：单个取值的连写，取值之间以空格隔开

如：border：10px solid red

solid实线 dashed虚线 点线dotted

快捷键：bd+tab

边框单方向设置（即只给盒子的某个方向单独设置边框）

属性名：border-方位名词

属性值：连写的取值

边框粗细：border-width

边框样式：border-style

边框颜色：border-color

注意：border会撑大盒子的，盒子的大小变为border大小加上width/heigh

4.内边距（padding）

与border一样，都会撑大盒子

padding属性可以当作复合属性使用，表示单独设置某个方向的内边距，padding最多取4个值，对应内容框的上下左右

取四个值时：padding：上 右 下 左（顺时针）

取三个值时：padding：上 左右 下

取两个值时：padding：上下 左右

5.外边距（margin）

CSS盒模型（自动内减）

解决方法：自动内减（解决padding等撑大盒子问题）

操作：给盒子设置属性box-sizing：border-box；

有点：浏览器会自动计算多余大小，自动在内容中减去

外边距折叠现象：

1.合并现象

   场景：垂直布局的块级元素（如两个div） 上下的margin会合并

   结果：最终两者距离为margin的最大值

   解决方法：避免就好

      只给其中一个盒子设置margin即可

2.塌陷现象

  场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

  结果：导致父元素一起往下移动

  解决方法：给父元素设置border-top/padding-top（分隔父子元素的margin-top）

                    给父元素设置overflow：hidden（该方法较为完美）

                    转换成行内块元素

                    设置浮动

注意：行内元素（如span）如果想要通过margin/padding改变行内标签的垂直位置，无法生效

           行内标签的margin-top和bottom不生效

           行内标签的padding-top/bottom不生效

           但可以通过line-height来改变

6.清除默认样式

“*” 代表所有

如：清除所有标签的默认样式

*{
      margin: 0;
      padding: 0;
 }

7.版心内容

即网页的有效内容，一般在浏览器中都是居中的。

版心居中代码：

margin：0 auto；