11.30

盒子模型

一、边框
1.边框的大小:broder-width
2.边框的样式：broder-style
（1）dasher 虚线
（2）solid 实线
（3）dotted 点
3.颜色：broder-color

二、元素显示
1.display：block 分行
2.display：inline 同行
3.display：inline-block 以块状的形式在一行内显示
4.display：none 不显示，不占页面区域
5.visibility：hidden 隐藏 ，但会占用原来的位置

三、盒子模型
1.margin 外边距
（1）margin：50px 100px 表示：上下边距为50，左右为100
（2）margin：10px 50px 100px 表示：上10， 左右50，下100
（3）margin：10px 20px 50px 100px 表示：上10， 右20，下50，左100
2.border 内边距 (border-radius 边框弧度)
（1） 50px 5px 表示左上-右下弧度50；右上-左下为5
（2）50px 20px 5px 表示左上50 ， 右上-左下为20px， 右下为5
（3）50px 20px 80px 10px 表示左上50，右上20，右下80，左下10
3.padding 填充 与margin、border同理
4.content 内容与margin、border同理

四、box-sizing
(1)内容盒子：content-box 宽高设置在内容上
(2)边框盒子：border-box 宽高设置在边框以内的
(3)填充盒子：padding-box（被弃用）