盒模型(box)
在网页制作中,我们往往需要区块形的区域来合理放置网页内容,盒模型就是其方法。
盒模型就是在 <div>
的基础上加上固定的 长(height) 和宽(width)
内边距
盒模型可以通过 padding
的属性来添加内边距 方法是
- 通过
padding-top/right/bottom/left
来添加 上/右/下/左 的内边距 - 其也可以通过
padding:30px 20px 10px 40px;
来简写分别添加 上/右/下/左 的内边距
ps:这里第一个数值一定是上内边距,第二个一定是右内边距,如果其后再无数值,则上内边距等于下内边距左内边距等于右内边距。
这里有一种叫 box-sizing
的方法,来表示一个元素的长宽表示方式
外边距
盒模型可以通过 margin
的属性来添加外边距,书写方式和内边距类似
不过两个盒模型直接的距离要有所注意,
1.如果是左右两个盒模型,那么它们间的距离为两者之间左右外边距之和。
2.如果是上下两个盒模型,那么它们间的距离为两者之间上下外边距的最大值,因而一般我们只设置下外边距。
margin
还有的用处是让盒模型在另一个模型内左右对齐(前提是有宽度)
可以使用 margin 0 auto
实现。
边框
在使用盒模型,我们可以通过 border
来添加盒的边框
border-width: 2px; 边框粗细
border-color: grey; 边框颜色
border-style: solid; 边框样式 如solid为实线 dashed为虚线
border: none;
是无边框
边框也可如内边距一样简写
如 border:20px solid grey;
分别为粗细 /样式/颜色
当然 对于 上/右/下/左 方向上的边框可以单独设置(也适用无边框):
如 border-top-color: grey;
其余类比前面内容 这种方法也适用上面的简写方法。
如果认为直角模型比较单调难看,可以使用 border-radius: 18px;
方法来变为圆角 也适用于 各个位置角单独变化 但是其表示不再是 上下左右的方法,而是左上角,右上角,左下角,右下角:
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 15px;
盒模型也可以添加阴影
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
- x 偏移量:在 x 轴上移动,向右为正
- y 偏移量:在 y 轴上移动,向下为正
- 阴影模糊半径:就是边线的清晰度
- 阴影扩散半径:就是向外伸展
- 阴影颜色:就是矩形下面那个矩形的背景色。