css盒子模型

盒子模型

内容：content：width和height默认设置的是内容部分的宽高

边框：border:边框的粗细border-width

边框的样式border-style

实线 solid 虚线 dashed 点线 dotted

边框的颜色border-color

连写 border:width style color

border的单方向设置

border-方位名词top right bottom left

盒子大小初级计算公式 盒子实际大小 = 内容（content）+ 边框（border）

内边距：padding控制边框与内容之间的距离

取值

一个值上右下左

两个值上下  左右

三个值上  左右  下

四个值上  右  下  左

记忆规则：先从上开始赋值，然后顺时针赋值，如果没有赋值的？？？？看对面的！！

padding的单方向设置  padding-方位名词

盒子大小的终极计算公式 盒子实际大小 = 内容（content）+ 边框（border）+ 内边距 （padding）

不会撑大盒子的特殊情况；如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度

此时给子盒子设置左右的padding或者左右的border此时不会撑大盒子

css3的盒模型  自动内减  box-sizing:border-box

外边距：margin控制边框以外盒子与盒子之间的距离

取值

一个值上右下左

两个值上下  左右

三个值上  左右  下

四个值上  右  下  左

记忆规则：先从上开始赋值，然后顺时针赋值，如果没有赋值的看对面的

margin的单方向设置margin-方位名词

margin的单方向应用

水平方向

margin-left让当前盒子往右移动

margin-right让右边的盒子往右移动

垂直方向

margin-top让当前的盒子往下移动

margin-bottom让下面的盒子往下移动

去除标签默认的margin和padding   * {margin：0；padding：0；}

margin外边距折叠现象

margin的合并现象

垂直布局的盒子，此时上下的margin会合并

两者的距离为margin的最大值

margin的塌陷现象

互相嵌套的块级元素，父子元素的margin-top会被合并作用在父元素上

导致父元素一起往下移动（塌陷）

解决方法

1、给父元素设置一个border-top或者padding-top

分隔父子元素的margin-top

2、给父元素设置overflow：hidden

3、转换成行内块元素

4、设置浮动

行内元素的margin和padding无效的特殊情况

水平方向的margin和padding布局有效果！

垂直方向的margin和padding布局是无效的！