2018-12-24盒子

盒子模型

一个盒子我们会分成几个部分：
内容区（content）
内边距(padding)
边框（border）
外边框（margin）

QQ浏览器截图20181224204341.png

内容区

• 内容区指的是盒子放置内容的区域，也是元素中的文本内容，子元素都是存在于内容区中。
• 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小一致。
• 通过width和height 两个属性可以设置内容区的大小。
• width和 height 属性只适用于块元素。

内边距

• 指的是元素内容区与边框以内的空间。
• 默认情况下width和height不包含padding大小。
• 使用padding设置元素内边距：

padding: 10px 20px 30px 40px;
这样会设置元素的上、右、下、左四个方向的内边距
padding:10px 20px 30px;
分别指定上、左右、下四个方向的内边距
padding: 10px 20px;
分别指定上下、左右的内边距
padding:10px;
同时指定上左右下的内边距

边框

• 可以在元素周围创建边框，边框是元素可见框的最外部。
• 可以使用border属性来设置盒子的边框：

border:1px solid red;
上边样式分别指定边框的宽度、样式和颜色。

• 可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框.
• 也是默认width和height并包括边框宽度。

边框可以设置多种样式：
none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）
groove（槽线）
ridge（脊线）
inset（凹边）
outset（凸边）

外边框

• 外边距是元素边框与周围元素相距的空间。
• 使用margin属性可以设置外边距。
• 用法padding类似，提供方向margin-top/left/right/bottom
• margin: 0 auto;可以使元素居中。

overflow

• 当相关标签里面内容超出了样式宽度和高度时，浏览器会让内容溢出盒子。
• 可以通过overflow来控制内容溢出情况。

可选值：
visible：默认值
scroll: 添加滚动条
auto ：根据需要添加滚动条

hidden: 隐藏超出盒子的内容

QQ浏览器截图20181224204341.png