10、前端开发：CSS知识总结——盒子模型（Box Model）（1）

1、定义

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

盒子模型的大小=内容区（content）+边框（border）+内边距（padding）

2、用法

border-width 边框宽度，默认是3px;

border-style 边框样式

       可选值：none  默认值

                     solid  实线

                     dashed  虚线

                     dotted   点状虚线

                     double 双实线

border-color  边框颜色

注意：以上三个属性从上开始顺时针设置四边颜色，以空格隔开。

上面三个属性有个简写：border：大小  样式  颜色 ；

例：border：10px solid black;

border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

例：border-radius: 15px;

3、box-sizing 属性

box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认情况下，元素的宽度(width) 和高度(height)计算方式如下：

width(宽度) + padding(内边距) + border(边框) = 元素实际宽度

height(高度) + padding(内边距) + border(边框) = 元素实际高度

语法：box-sizing: content-box|border-box|inherit；

示例：

div {
  box-sizing: border-box;
  width: 50%;
  border: 5px solid red;
  float: left;
}