CSS盒子布局

目录

1、边框border

2、外边距margin

3、内边距padding

补充：display

---

用一张图来形象的描述盒子布局：

最中间“content”是盒子的内容，border是盒子的边框，边框外为外边距 ---margin，边框内是内边距----padding

1、边框border

border-（top right bottom left）指定边框四个边的其中一边

border 边框属性是以下各个边框属性的简写属性：

• border-width 设置四个边框的宽度（粗细）

• border-style（必需）

值	描述
none	定义无边框。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。

• border-color设置四个边框的颜色

例：

p {
  border: 5px solid red;
}            注：该属性把边框设定为粗细5px，样式为细实线的红色边框。

border-radius 设置**圆角边框，单位px**

例：

p {
  border: 2px solid red;
  border-radius: 5px;
}

2、外边距margin

指定margin每一侧外边距的属性：

• margin-top-----上外边距

• margin-right--------右外边距

• margin-bottom------下外边距

• margin-left-----左外边距

属性值有：

auto-------根据浏览器默认来计算外边距使其在浏览器中水平居中

length（px、pt、cm）等单位指定外边距

% - 指定以包含元素宽度的百分比计的外边距

使用方法

1、margin: 25px 50px 75px 100px;

其顺序分别是上右下左分别设定属性(小技巧：可以记为从上开始顺时针排序)

2、margin: 25px 50px;

上和下外边距是 25px

右和左外边距是 50px

3、margin: 25px;

所有四个外边距都是 25px

补：当两个垂直外边距相遇时会重合，重合后外边距默认为数值最大的一边

3、内边距padding

每一侧指定内边距的属性：

• padding-top

• padding-right

• padding-bottom

• padding-left

属性值：

length（px、pt、cm）等单位指定外边距

% - 指定以包含元素宽度的百分比计的内边距

使用方法与外边距相同

补充：display

display 属性规定元素应该生成的框的类型。

块级元素和内联元素可以通过display转换

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。