CSS3属性详解文本 盒模型中的 box-ssize 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变 前端开发入门笔记
/* 定义一个容器 */
.container {
width: 500px;
height: 300px;
background-color: #f0f0f0;
border: 2px solid #000;
}
/* 定义一个子元素 */
.child {
width: 100px;
height: 100px;
background-color: #ff0;
margin: 10px;
padding: 20px;
border: 5px solid #00f;
box-sizing: border-box; /* 确保边框和内边距不会增加总尺寸 */
}
/* 针对不同浏览器的私有前缀 */
.child {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}这段代码定义了一个容器和一个子元素，并确保了子元素的边框和内边距不会影响其总尺寸，从而使得布局更加容易控制。同时，为了处理不同浏览器对CSS3属性的支持差异，代码中添加了各种私有前缀。
评论已关闭