在CSS中,规定了一种基本设计模型——盒模型(也叫框模型),如图所示:
其中包含了四部分内容:element/元素(即图中文字)、padding/内边框(图中两个红色边框之间白色部分)、border/边框(蓝色区域)、margin/外边框(图中两绿色边框中间白色部分)。
区别:
- element占据的就是字体本身的字号大小;
- padding和margin 类似,指的是一段距离,只能设置上、下、左、右方向的一段长度,不能设置区域颜色;
- 而border指的是一块区域,可以设置上下左右方向的长度,而且可以设置这段空间的颜色上下
- padding、border、margin三者都可以对上、下、左、右四个方向设置不同的宽度。
下面对各项的语法规则做一个简单对比
font-size: 20px; /*设置element的字号*/ padding-top:20px; /*设置padding上框高度*/ padding-right:30px; /*设置padding右框宽度*/ padding-bottom:40px; /*设置padding下框宽度*/ padding-left:50px; /*设置padding左框宽度*/ margin: T R B L; /*与padding用法基本相同,此处示例四个方向边框宽度的合并设置语法规则*/ border: size style color; /*border也可像padding和margin设置不同方向边框的宽度,此处示例对border 一步设定大小、风格(斜体)、颜色。*/
时间: 2024-10-11 03:26:58