CSS 知识整理(四) 盒子模型及相关属性
目录
一、盒子模型
在html中,每个标签都可以看做是一个盒子,通过调节这个盒子在网页中的位置,可以实现网页的布局以及美化网页,下面就是盒子模型的组成
盒子模型分为:
- Margin外边距:边框外的延伸的部分
- Border边框:盒子的边框,可添加颜色和宽度
- Padding内边距:边框到实际内容之间的部分
- Content内容:显示具体的内容
一下代码实现了如何设置盒子模型基本元素的值:
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
此时盒子模型变为:
二、边框(Border)
边框属性允许我们对边框样式进行指定
- 边框样式 border-style
允许定义边框样式:无边框,虚线边框,实线边框,双边框,3D边框
- 边框宽度 border-width
可以直接使用像素值(px)进行设置,也可以使用程度副词(thick,medium,thin等)
- 边框颜色 border-color
直接设置颜色,可以使用英文(red,yellow等)也可以使用RGB(#000000) ,
- 边框分边设置
可以分别设置不同边的属性
注意区分各个值对应的边
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
三、轮廓(outline)
轮廓是外边框外围一层
可设置颜色,样式和宽度
四、外边距(margin)和填充(padding)
图如下:
可以分别天界上下左右的外边距和填充长度。
以上为笔记,具体实现参考菜鸟驿站,这里不重复。