css 各种框 |ie9 css样式

.box {
height: 200px;
width: 400px;
border: 1px solid black;
padding: 10px;
margin: 10px;
}

1. 盒子模型(Box Model)

盒模型是CSS中的基本概念之一，也是最基本的CSS框架。它是一种由四个部分组成的框架：内容、内边距、边框和外边距。

• 内容(Content)：框中包含内容的区域
• 内边距(Padding)：内容与边框之间的空白区域
• 边框(Border)：内容和外边距之间的可见线条
• 外边距(Margin)：框周围的空白区域

2. 边框框架(Border Box)

在边框模型中，框的大小是由边框本身的大小所决定的。也就是说，边框的大小被包括在了盒子的内部。这种模型在设计时可以更好地控制盒子的大小。

.box {
height: 200px;
width: 400px;
border: 10px solid black;
padding: 10px;
margin: 10px;
box-sizing: border-box;
}

3. 内边距框架(Content Box)

在内边距模型中，框的大小是由内容本身的大小所决定的。也就是说，内边距和边框是被包裹在盒子的外部的。这种模型在设计时可以更好地控制内容的大小。

.box {
height: 200px;
width: 400px;
border: 1px solid black;
padding: 10px;
margin: 10px;
box-sizing: content-box;
}

4. 浮动框架(Float)

浮动框架可以让元素沿着父级元素的方向浮动。当一个元素被浮动时，它会尽可能地靠近父级元素的边缘。

.box {
height: 200px;
width: 400px;
border: 1px solid black;
padding: 10px;
margin: 10px;
float: left;
}

以上就是一些常用的CSS框架类型，并且大家通过代码演示了如何设置这些框架。当您设计一个网站时，这些CSS框架应该足以满足您的需求。