在使用CSS进行网页布局时,咱们必定离不开的一个东西————盒子模型。盒子模型,顾名思义,盒子就是用来装东西的,它装的东西就是HTML元素的内容。或者说,每个可见的 HTML 元素都是一个盒子,下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不一样,这里的盒子是二维的。css
一个盒子由外到内能够分红四个部分:margin(外边距)、border(边框)、padding(内边距)、content(内容)。会发现margin、border、padding是CSS属性,所以能够经过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。html
盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性,然而默认状况下width
和height
属性只是设置content(内容)部分的宽和高。盒子真正的宽和高按下面公式计算:web
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距chrome
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距浏览器
为了显得专业一点,咱们还能够用带属性的公式表示:svg
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right函数
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom布局
上面说到的是 默认 状况下的计算方法,另一种状况下,width
和height
属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。url
box-sizing
属性值spa
content-box
:默认值,width和height属性分别应用到元素的内容框。在宽度和高度以外绘制元素的内边距、边框、外边距。
border-box
:为元素设定的width和height属性决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。经过从已设定的宽度和高度分别减去外边距、边框和内边距才能获得内容的宽度和高度。
inherit
:规定应从父元素继承box-sizing属性的值。
margin,盒子的外边框,他是彻底透明的,开发者只能够设置它的边距。
margin包含了上下左右四条边,开发者能够单独设置每一条边的边距。
margin-top
:上边距margin-buttom
:下边距margin-left
:左边距margin-right
:右边距开发者也能够直接使用简写属性margin
同时设置四条边的宽度。
margin示例1
/*margin属性后只跟一个值,同时设置四条边的边距相等*/ margin: 10px; /*下面样式与上面的样式等价*/ margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
margin示例2
/*margin属性后跟两个值,第一个值设置上下边距,第二个是设置左右边距*/ margin: 10px 20px; /*下面样式与上面的样式等价*/ margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;
margin示例3
/*margin属性后跟三个值,第一个值设置上边距,第二个是设置左右边距,第三个值设置下边距*/ margin: 10px 20px 30px; /*下面样式与上面的样式等价*/ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 20px;
margin示例4
/*margin属性后跟四个值,第一个值设置上边距,第二个是设置右边距,第三个值设置下边距,第四个值设置左边距*/ margin: 10px 20px 30px 40px; /*下面样式与上面的样式等价*/ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 20px;
padding表示盒子的内边距(填充)。与外边距不一样,padding不是只能彻底透明的,能够设置背景颜色和图片。
与margin相似,padding包含了上下左右四条边,开发者能够单独设置每一条边的边距。
padding-top
:上部填充padding-bottom
:下部填充padding-left
:左部填充padding-right
:右部填充开发者也能够直接使用简写属性padding
同时设置四条边的宽度。这一部分的用法与上面的margin
相似,能够参考margin
的四个实例。
border表示盒子的边界,它能够设置成可见的,样式多样的。
最基本的,border像margin和padding同样能够分别对每一条边进行设置,也可使用简写属性border进行设置。
border-top
:上边界border-bottom
:下边界border-left
:左边界border-right
:右边界border实例1
/*使用简写属性,同时设置四条边界,四条边界的宽度、样式和颜色都是同样的*/ border: 2px solid green; /*下面的样式与上面的样式等价*/ border-top: 2px solid green; border-bottom: 2px solid green; border-left: 2px solid green; border-right: 2px solid green;
除了能够单独对每一条边进行样式设置以外,还能够分别对边界的宽度、样式和颜色进行设置(下面的属性会对四条边进行设置),一样可使用简写属性border进行设置。
border-width
:边界宽度border-style
:边界样式border-color
:边界颜色
border-sytle
属性可取值:
none
:定义无边框。hidden
:与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。dotted
:定义点状边框。在大多数浏览器中呈现为实线。dashed
:定义虚线。在大多数浏览器中呈现为实线。solid
:定义实线。double
:定义双线。双线的宽度等于 border-width 的值。groove
:定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge
:定义 3D 垄状边框。其效果取决于 border-color 的值。inset
:定义 3D inset 边框。其效果取决于 border-color 的值。outset
:定义 3D outset 边框。其效果取决于 border-color 的值。inherit
:规定应该从父元素继承边框样式。
border实例2
/*使用简写属性设置宽度、样式和颜色,同时做用于四条边*/ border: 2px dotted green; /*下面的样式与上面的样式等价*/ border-width: 2px; border-style: dotted; border-color: green;
这还不算完,开发者还能够对单独一条边界单独设置宽度、样式或颜色。以上两组属性均可以做为下面属性的简写属性。
border-top-width
:上边界宽度border-top-style
:上边界样式border-top-color
:上边界颜色border-bottom-width
:下边界宽度border-bottom-style
:下边界样式border-bottom-color
:下边界颜色border-left-width
:左边界宽度border-left-style
:左边界样式border-left-color
:左边界颜色border-right-width
:右边界宽度border-right-style
:右边界样式border-right-color
:右边界颜色border实例3
/*使用简写属性设置宽度、样式和颜色,同时做用于四条边*/ border: 2px dotted green; /*下面的样式与上面简写样式等价*/ border-width: 2px; border-style: dotted; border-color: green; /*下面的样式与上面简写样式等价*/ border-top: 2px solid green; border-bottom: 2px solid green; border-left: 2px solid green; border-right: 2px solid green; /*下面样式又与上面三个样式的任意一个样式等价*/ border-top-width: 2px; border-top-style: dotted; border-top-color: green; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: green; border-left-width: 2px; border-left-style: dotted; border-left-color: green; border-right-width: 2px; border-right-style: dotted; border-right-color: green;
上面的属性是对各边的宽度、样式和颜色进行设置,下面一些有趣的属性可让盒子变得更加地有创意、更加好看。
首先,了解一下 边界半径 ,也就是圆角。边界半径由属性border-radius
进行控制,这是一个简写属性,像上面提到过的margin
、padding
等同样,能够有一个、两个、三个或四个值进行设置。一样也能够对盒子的每个角的半径进行单独设置。
border-top-left-radius
:左上角border-top-right-radius
:右上角border-bottom-left-radius
:左下角border-bottom-left-radius
:右下角边界半径可使用 px、em 等长度单位,也可使用百分数。
border-radius
值的个数以及每一个值对应控制的位置:
- 一个值:设置四个角有相同的边界半径;
- 两个值:第一个值设置左上角和右下角,第二个值设置右上角和左下角;
- 三个值:第一个值设置左上角,第二个值设置右上角和左下角,第三个值设置右下角;
- 四个值:第一个值设置左上角,第二个值设置右上角,第三个值设置右下角,第四个之设置左下角。
border实例4
/*以简写属性的三个值为例*/ border-radius: 10px 20px 30px; /*下面样式与上面简写属性样式等价*/ border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 20px;
开发者还能够设置x半径和y半径的不一样,建立椭圆形角。x半径表示水平半径,y半径表示垂直半径。在border-radius
属性中,x半径和y半径用“/”分隔,在border-top-left
等四个属性中,传入两个值,第一个值表示x半径,第二个值表示y半径。
border实例5
/*简写属性的x半径设置两个值,y半径设置三个值*/ border-radius: 30px 20px / 20px 10px 30px; /*在简写属性中设置角度时,值与盒子角的映射是x和y分开的,按照上面提到的规则进行映射*/ /*x半径两个值,第一个值控制左上角和右下角,第二个值控制右上角和左下角*/ /*y半径三个值,第一个值控制左上角,第二个值控制右上角和左下角,第三个值控制右下角*/ border-top-left-radius: 30px 20px; border-top-right-radius: 20px 10px; border-bottom-right-radius: 30px 30px; border-bottom-left-radius: 20px 10px;
图形边界是用图形来做为盒子的边界border。我将这一部分单独做为一个小节的缘由是,图形边界border-image
是CSS3新增的内容,实现起来比较复杂,并且只有一些版本比较新的主流浏览器支持。
在这只图形边界以前,须要先设置一个边界,让图形有显示的空间,同时也可让不支持图形边界的浏览器显示这个预先设定好的非图形边界。而后,还须要将背景颜色和背景图片限制在填充和内容以内(默认状况下,背景颜色和背景图片做用在border,padding和content,边界的样式浮在背景之上),这须要用到background-clip
属性。
background-clip
属性的值:
- border-box:背景延伸到边框外沿(可是在边框之下)。
- padding-box:边框下面没有背景,即背景延伸到内边距外沿。
- content-box:背景裁剪到内容区 (content) 外沿。
- text:背景被裁剪为文字的前景色(只有chrome支持)。
在图形边界中用到如下属性:
border-image
:设置图形边界,简写属性border-image-source
:图形的来源(路径),能够接收一个URL函数或一个渐变做为值。border-image-slice
:图形的切片大小border-image-width
:图形边界的宽度border-image-repeat
:定义图片如何填充边框border-image-outset
:定义边界内部和内边距之间的额外空间的大小可能有不少小伙伴看不懂,不要紧,下面对以上属性进行详细的解释。
从图形的来源开始提及。图形的来源能够是一个图片或者渐变颜色。设置图片用URL(path)
函数,设置渐变颜色用linear-gradient(to top|bottom|left|right, beginColor1, endColor2)
函数。还有一个默认值none
,当使用默认值的时候,或者若是图像没法显示,则使用边框样式border-style
。有了图形还不行,还须要对图形进行切割,才可以应用到边界上。
该属性将图片切割成9个区域,包括四个角,四条边以及中心区域。四条切片线,从它们各自的侧面设置给定距离,控制区域的大小。
上图中,四条切片线将图片切成了9份。其中一、二、三、4为四个角区域,将会对应应用到盒子边界的四个角;五、六、七、8为四个边界区域,将会对应应用到盒子边界的四条边;区域9为中心区域,默认状况下会被丢弃,但若是设置了fill
关键字(能够被设置在属性的任何一个位置(前面、后面或者两个值之间)),则会将其做为背景图形。
border-image-slice
属性的值能够是数字或百分数,还有关键字fill
。值的个数能够是1-4个,其规则与margin
、padding
等属性同样。
该属性设置图片在边框的填充方式。值的个数能够是一个或两个,一个值时设置全部的边框,两个值时分别设置水平与垂直的边框。它具备下面的值:
stretch
:拉伸图片以填充边框。repeat
:平铺图片以填充边框。round
:平铺图像。当不能整数次平铺时,根据状况放大或缩小图像。space
:平铺图像 。当不能整数次平铺时,会用空白间隙填充在图像周围(不会放大或缩小图像)inherit
:继承父级元素的计算值。设置图形边界的宽度。当border-image-width
的值大于border-width
时,图形不会向margin方向扩展,而是会向padding和content方向扩展,覆盖。
border-image-width
属性的值能够是长度或百分数,以及auto。值的个数为1-4个,其规则与margin
、padding
等属性的规则一致。
该属性设置边框图像可超出边框盒的大小。讲的通俗一点,就是在图像和padding之间增长一些填充,将边框图像往外挤。它的值能够是长度或百分数,值的个数为1-4个,其规则与margin
、padding
等属性的规则一致。
该属性是一个简写属性,他能够设置上面提到的五个属性,其基本语法以下:
<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
关于“||”、“?”等符号的意义能够查看CSS属性值定义语法。
border-image实例
background:blue; background-clip: padding-box; border: 20px dotted green; border-image:url(https://mdn.mozillademos.org/files/13060/border-image.png) 40 / 10px / 20px round; /*其中border-image属性能够用如下一组属性代替*/ border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png); border-image-slice: 40; border-image-width: 10px; border-image-outset: 20px; border-image-repeat: round;
在盒子的组成成分以外,CSS3给盒子添加了阴影。盒子的阴影由box-shadow
属性控制,阴影的轮廓与盒子边界border的轮廓同样。该属性的正规语法以下:
none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
设置多个阴影时,使用逗号将每一个阴影的值隔开。前面的阴影会在后面阴影之上,若是上层有透明度较低的部分,会与下层的颜色重叠,合成新颜色。
border-shadow实例
/* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* 多个阴影*/ box-shadow: 3px 3px red, -1em 0 0.4em olive, 5px 10px 5px 5px green; /*全局关键字*/ box-shadow: inherit; box-shadow: initial; box-shadow: unset;
本部份内容引用w3cSchool CSS教程的CSS盒子模型
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现倒是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用本身的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。可是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具备指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。
解决IE8及更早版本不兼容问题能够在HTML页面声明 <!DOCTYPE html>
便可。
[1] w3cSchool CSS教程
[2] MDN Styling boxes