不多废话,先上图:
-
Content(内容,蓝色区域)
-
这是元素本身的文本、图片或其他内容。
-
使用
width
和height
属性设置内容的宽度和高度(注意,对于块级元素,width
和height
默认情况下只适用于内容区域)。
-
-
Padding(内边距,绿色区域)
-
内边距是内容区域与边框之间的空间。
-
使用
padding-top
、padding-right
、padding-bottom
、padding-left
分别设置上、右、下、左四个方向的内边距。 -
也可以使用
padding
一次性设置四个方向的内边距,例如padding: 10px;
意味着上下左右都是10像素的内边距。
-
-
Border(边框,黄色区域)
-
边框是紧接内边距并围绕在内容周围的线。
-
使用
border-width
、border-style
、border-color
分别设置边框的宽度、样式和颜色。 -
也可以使用
border
一次性设置宽度、样式和颜色,例如border: 1px solid black;
意味着1像素宽、实线样式、黑色的边框。
-
-
Margin(外边距,橙色区域)
-
外边距是边框与其他元素之间的空间。
-
使用
margin-top
、margin-right
、margin-bottom
、margin-left
分别设置上、右、下、左四个方向的外边距。 -
也可以使用
margin
一次性设置四个方向的外边距。
-
-
Position(定位,白色区域)
-
定位决定了元素在页面上的位置。
-
position
属性有五个值:static
、relative
、absolute
、fixed
和sticky
。 -
当使用
relative
、absolute
、fixed
或sticky
时,你还可以使用top
、right
、bottom
、left
属性来精确控制元素的位置。
-
如何设置这些样式:
.my-element {
width: 200px; /* 设置内容宽度 */
height: 100px; /* 设置内容高度 */
padding: 10px; /* 设置四个方向的内边距为10像素 */
border: 1px solid black; /* 设置1像素宽、实线样式、黑色的边框 */
margin: 20px; /* 设置四个方向的外边距为20像素 */
position: relative; /* 设置相对定位 */
top: 10px; /* 相对于其正常位置向下移动10像素 */
left: 20px; /* 相对于其正常位置向右移动20像素(注意,向左移动应为负值) */
}