CSS盒子模型

CSS盒子模型

盒子模型也称为框模型(Box Model)，利用其可以对页面进行更好的排版布局。

1.盒子模型概念

　　处理元素的尺寸，包含内容(content)、边框(border)、内边距(padding)以及外边距(margin)几个要素,盒子模型结构图表示如下：

 

 

 

　　模型图中：

　　　　*最内部的element框即content要素，指的是元素的实际内容包括width与height(注意:这是元素的宽度与高度而非盒子的)；

　　　　*紧挨着元素框向外，则是padding，清空元素周围区域；

　　　　*padding区域向外则是border，围绕着内边距及元素内容；

　　　　*margin外边距围绕在元素边缘(边框)周围的空白距离

　　以上，构成了盒子模型，通常设置背景颜色的区域就是包含content、padding、border这一块的范围。

 

　　框：页面元素皆为框
　　框模型：Box Model,定义了元素框处理元素内容，边框，内边距以及外边距的一种方式

 

　　当框模型的属性介入到元素中，元素的整体占地区域的尺寸会发生改变

 

　　元素实际宽度=width + 左右外边距 + 左右边框 + 左右内边距
　　元素实际高度=height+ 上下外边距 + 上下边框 + 上下内编剧

 

　　元素边框内宽度=width + 左右边框 + 左右内边距
　　元素边框内高度=height+ 上下边框 + 上下内边距

 

 

接下来我们通过代码来演示盒子：

 

 

 2.边框border

　　（1）简写方式
　　　　通过一个属性设置元素四个边缘的 尺寸，样式，颜色
　　　　语法：border:width style color;
　　　　　　　　　　width : 尺寸，以px为单位
　　　　　　　　　　style : 样式
　　　　　　　　　　solid : 实线
　　　　　　　　　　dotted : 虚线(点)
　　　　　　　　　　dashed : 虚线(线)
　　　　　　　　　　color : 颜色（合法的颜色取值、取值为 transparent(透明)）

　　　　注意：
　　　　　　1、为元素增加边框，会改变元素的占地区域
　　　　　　2 、border 可以取值为 0 或 none
　　　　　　　　　　　　border:0;
　　　　　　　　　　　　border:none;
　（2）单边设置
　　　　只设置某一方向的边框的 尺寸，样式，颜色
　　　　语法：border-top/right/bottom/left:width style color;
   （3）单属性设置
　　　　设置 四个方向的边框的 某一属性值
　　　　语法：border-width/style/color:值;
   （4）单边单属性设置
　　　　设置某一方向的某一个属性值
　　　　语法：border-方向-属性:值;
　　　　　　　　方向：top/right/bottom/left
　　　　　　　　属性：width/style/color

3.内边距

　　（1）什么是内边距
　　　　　　内容区域与边框(边缘)之间的距离
　　　　　　注意：内边距会扩大元素边框所占用的区域的
　　（2）语法
　　　　　　padding|padding-top/right/bottom/left

 

　　（3）取值：
　　　　　　1、以 px 为单位的数值
　　　　　　2、以 % 为单位的数值
　　　　　　3、auto

 

　　（4）简洁写法:
　　　　　　1、padding:value
　　　　　　　　四个方向的内边距
　　　　　　2、padding:v1 v2
　　　　　　　　v1 : 上下内边距
　　　　　　　　v2 : 左右内边距
　　　　　　3、padding:v1 v2 v3
　　　　　　　　上 、左右 、下
　　　　　　4、padding:v1 v2 v3 v4;
　　　　　　　　上，右，下，左
　　（5）内边距特殊注意
　　　　　　1、为行内元素 和 行内块元素增加垂直内边距时
　　　　　　2、为行内元素 和 行内块元素增加垂直内边距时，只会影响自己的效果，不会影响其他元素

 

4.外边距　

　　(1)属性：margin\margin-top/right/bottom/left
　　(2)取值：
　　　　1、以 px为单位的数值
　　　　2、以 % 为单位的数值
　　　　3、取值为负数
　　　　　　　　特别是在margin-top/left 中使用
　　　　　　　　margin-top取负值，向上移动
　　　　　　　　margin-left取负值，向左移动
　　　　4、取值为 auto
　　　　　　正常情况下，只对左右有效
　　　　　　让元素水平居中对齐(只针对块级)
　　　　　　前提：为元素设置宽度

　　(3)外边距的简洁写法：
　　　　1、margin:value;
　　　　　　　　value表示四个方向的外边距值
　　　　　　　　ex:margin:5px;
　　　　2、margin:v1 v2;
　　　　　　　　　　v1:上下的外边距
　　　　　　　　　　v2:左右的外边距
　　　　　　　　ex:margin:10px auto;
　　　　3、margin:v1 v2 v3;
　　　　　　　　　　v1:上外边距
　　　　　　　　　　v2:左右外边距
　　　　　　　　　　v3:下外边距
　　　　　　　　ex:margin:10px auto 5px;
　　　　4、margin:v1 v2 v3 v4;上 右 下 左

　　(4)页面中具备默认外边距的元素

              会通过 "CSS Reset(重写)" 的手段，将具备默认外边距的元素的外边距改为0

　　（5）外边距的特殊效果
　　　　　　1、外边距合并
　　　　　　　　当两个"垂直"外边距相遇时，他们将合成一个，值，以大的为主
　　　　　　2、外边距的溢出
　　　　　　　　　　在某种条件下，为子元素设置上外边距时，有可能会作用到父元素上
　　　　　　　　　　条件：
　　　　　　　　　　　　　　1、父元素没有上边框
　　　　　　　　　　　　　　2、为第一个子元素设置上外边距时
　　　　　　　　　　解决方案：
　　　　　　　　　　　　1、为父元素增加上边框
　　　　　　　　　　　　　　弊端：父元素会变高
　　　　　　　　　　　　2、通过为父元素设置上内边距来取代子元素的上外边距
　　　　　　　　　　　　　　弊端：也会增加父元素的高度
　　　　　　　　　　　　3、在父元素中，增加一个空 <table>元素
　　　　　　　　　　　　　　弊端：页面中多一个空元素而已
　　　　　　　　　　　　4、使用CSS3中内容生成的方式

　　　　　　　　　　　　　　　　　　

　　　　　　　3、对行内元素 和 行内块元素设置垂直外边距时
　　　　　　　　　　1、垂直外边距对行内元素无效，但<img>除外
　　　　　　　　　　2、为行内块元素(input)增加垂直外边距时，整行元素都跟着变

5.box-sizing

　　(1)作用：重新指定元素的框模型边框以及边框内的尺寸计算方式

`　　(2)元素边框内宽度

　　　　　　元素边框内宽度=width + 左右内边距 + 左右边框
　　　　　　ex
　　　　　　　　div{
　　　　　　　　　　width:300px;
　　　　　　　　　　border:7px solid #ddd;
　　　　　　　　　　padding-left:13px;
　　　　　　　　　　padding-right:6px;
　　　　　　　　　　}
　　　　　　　　300+7+7+13+6 = 333

　　

　　(3)语法：
　　　　属性：box-sizing
　　　　取值：
　　　　　　1、content-box
　　　　　　　　默认计算方式:

　　　　　　　　　　元素的width属性 只表示内容区域的尺寸，border以及padding要额外加在width 计算出真正的边框内区域
　　　　　　　　　　　　　　height 同上 ...
　　　　　　2、border-box
　　　　　　　　元素的width属性值中，包含 border，padding 的
　　　　　　　　div{
　　　　　　　　　　box-sizing:border-box;
　　　　　　　　　　width:300px;
　　　　　　　　　　border:7px solid #ddd;
　　　　　　　　　　padding-left:13px;
　　　　　　　　　　padding-right:6px;
　　　　　　　　　　}

以上为W3C的标准盒子模型，本人在学习中所总结，希望对大家有所帮助！！！