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的标准盒子模型,本人在学习中所总结,希望对大家有所帮助!!!