css盒子

/* CSS盒子模型示例 */

/* 1. 基本盒子结构 */
.box {
    width: 300px; /* 盒子的宽度 */
    height: 200px; /* 盒子的高度 */
    padding: 20px; /* 内边距，内容与边框之间的距离 */
    border: 5px solid black; /* 边框样式，宽度为5px，实线，颜色为黑色 */
    margin: 10px; /* 外边距，盒子与其他元素之间的距离 */
}

/* 2. 使用 box-sizing 属性 */
.box-sizing-example {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box; /* 宽度和高度包括内边距和边框 */
}

/* 3. 浮动盒子 */
.floating-box {
    width: 150px;
    height: 150px;
    background-color: lightblue;
    float: left; /* 向左浮动 */
    margin: 10px;
}

/* 4. 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both; /* 清除浮动的影响 */
}

解释说明：

1. 基本盒子结构：

   • width 和 height 定义了盒子的内容区域的宽度和高度。
   • padding 是内容与边框之间的间距。
   • border 是围绕内容和内边距的边框。
   • margin 是盒子与其他元素之间的外部间距。

2. 使用 box-sizing 属性：

   • 默认情况下，width 和 height 只包含内容区域，不包括 padding 和 border。通过设置 box-sizing: border-box，可以使 width 和 height 包括 padding 和 border，从而更方便地控制盒子的总尺寸。

3. 浮动盒子：

   • float 属性用于将元素向左或向右浮动，常用于创建多列布局。
   • 示例中的 .floating-box 向左浮动，并设置了背景颜色和外边距。

4. 清除浮动：

   • 当父元素包含浮动子元素时，父元素的高度可能会塌陷。使用 clearfix 技巧可以防止这种情况发生，确保父元素正确包裹其浮动子元素。