css盒子模型

目录

1.content

2.padding

3.border

4.margin

​5.盒子的水平布局

6.外边距的折叠

7.行内元素的盒模型

---

对元素进行设计和布局的，包含四个部分

由内而外 ：content(内容区) padding(内边距) border(边框) margin(外边距)

盒子的可见大小 由content + padding  + border决定

1.content

实际内容区域 里面可以放文本、子元素

2.padding

  content和border之间的距离

该区域是透明的没有颜色

 可以对上下左右四个进行设计

3.border

通常由 width、color、style 三个属性控制

4.margin

元素周围的空间，设置该元素所在网页的位置

块元素的宽度 = content + 内边距 + border + margin 也就是盒子实际占用的空间

5.盒子的水平布局

元素在父元素的位置由margin + border + padding + width 决定

margin-left + border-left  +  padding-left  + width  +  padding-right  + border-right    +
margin-right    = 其父元素内容区的宽度 （必须满足）

如果不满足 自动填充

1. 没有auto,自动填充 margin-right的值

     0 + 0 + 0 + 200 + 0 + 0 + 0 = 800  
         最终会自动填充成如下
     0 + 0 + 0 + 200 + 0 + 0 + 600 = 800

2. 有auto,自动调整auto的值

0 + 0 + 0 + auto + 0 + 0 + 0 = 800              宽的auto 则为 800

6.外边距的折叠

因为块元素是独占一行的，所以只有在垂直方向上的折叠

兄弟元素（不需要处理）

二者都是正值：取较大的

一正一负：相加的和

二者都是负值 ：取绝对值较大的

父子元素（需要处理）

父子元素的外边距相邻，子元素会传递给父元素（上外边距）会影响页面的布局；

这时给父元素添加border属性

 7.行内元素的盒模型

可以设置padding border margin 但是在垂直方向无效 是被内容数据撑起来的，因此不支持设置宽度和高度。

可以转换成块元素进行设置 用dispaly属性

dispaly的属性：

none: 隐藏且不占地方

block：行内元素转换成块元素的样式，可以设置块元素的属性

inline：块元素变成行内元素的样式

inline-block：变成行内的块元素，既有行内元素又有块元素的属性