前端第三课--盒模型

标准盒模型

设置div的大小后，如果放入的内容太多也会溢出来

盒子边框设置:

solid:直线边框 dashed:虚线边框

dotted:点线边框 double:双实线边框

border:20px solid black;（整边框设置样式）

border-top-style:dashed;（单边框设置样式）

border-top-color:red;（单边框设置颜色）

**内边距：**拉开内容边框有的距离

padding-top:30px(和margin用法一样)

怪异盒模型：

box-sizing:content-box;(默认值)

box-sizing:border-box;(设置为怪异盒)

怪异盒从里到位：content ->border ->padding ->width;（宽的角度）

父子元素外边距合并现象（处理高度塌陷问题）：

1.给父级加边框

border:1px solid transparent;(透明边框）

border:1px solid red；(有色边框)

2.给父级设置内边距：

padding:1px;

3.溢出隐藏（内容多余边框的部分被隐藏）：

overflow:hidden;

兄弟元素外边距合并（两个外边距合并，只留下一个大的）