FE_CSS 页面布局之盒子模型 边框 & 内外边距
/* 设置盒子模型的边框样式 */
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border: 5px solid #000; /* 设置边框宽度为5px，样式为实线，颜色为黑色 */
/* 设置盒子与其他元素的间距为10px */
padding: 10px;
margin: 10px;
}
/* 设置盒子模型的内外边距样式 */
.box-padding {
padding: 20px; /* 内边距为20px */
}
.box-margin {
margin: 20px; /* 外边距为20px */
}
/* 设置盒子模型的边框圆角样式 */
.box-border-radius {
border-radius: 10px; /* 圆角半径为10px */
}这段代码定义了一个.box类，它设置了盒子模型的宽度、高度、背景色和边框。同时，它还设置了盒子与其他元素之间的内边距和外边距。另外，.box-border-radius类用于设置边框的圆角样式，使盒子看起来更为圆润。这些样式可以直接应用于HTML中的任何元素，以实现基本的盒子模型布局。
评论已关闭