CSS基础--盒子模型（4）

盒子模型

css学习三大重点： css 盒子模型 、 浮动 、 定位  

网页布局的本质

• 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。

• 最后把网页元素比如文字图片等等，放入盒子里面。

1. 盒子模型(Box Model)

• 盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

• 盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

• 盒子里面的文字和图片等元素是 内容区域

• 盒子的厚度 我们称为为盒子的边框

• 盒子内容与边框的距离是内边距

• 盒子与盒子之间的距离是外边距

W3c标准盒子模型

标准 w3c 盒子模型的范围包括 margin、border、padding、content

当设置为box-sizing: content-box;时，将采用标准模式解析计算，也是默认模式；

内盒尺寸计算(元素实际大小)

• 高度：Element Height = content height + padding + border （Height为内容高度）

• 宽度：Element  Width = content width + padding + border （Width为内容宽度）

• 盒子的实际大小：内容的宽度和高度 +  内边距   +  边框  

  

  IE盒子模型

IE 盒子模型的 content 部分包含了 border 和 pading

当设置为box-sizing: border-box时，将采用怪异模式解析计算；

1.1 盒子边框(border)

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框的样式：

• none：没有边框即忽略所有边框的宽度（默认值）

• solid：边框为单实线(最为常用的)

• dashed：边框为虚线

• dotted：边框为点线

边框综合设置
border : border-width || border-style || border-color 

border: 1px solid red;  没有顺序要求  

盒子边框写法总结表：

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

上边框	下边