CSS盒子模型
2015-01-11 14:30
197 查看
CSS盒子模型(上)
盒子模型(Box Model)是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法,才能真正地控制好页面中的各个元素。所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容大。 可以通过调整盒子的边框和边距等参数,来调节盒子的位置和大小。一个页面由很多这样的盒子组成,这些盒子之间会互相影响。
掌握盒子模型需要从两方面来理解:一是理解单个的盒子的内部结构;二是理解多个盒子之间的相互关系。
本文首先讲解独立的盒子相关的性质,然后介绍在普通情况下盒子的排列关系。下一次将更深入地讲解浮动和定位的相关内容。
一. 盒子模型概念
1.现实生活中的盒子:![](http://images.cnitblog.com/blog/707050/201501/111428509372099.png)
图1 现实生活中的盒子
2. 盒子模型(Box Model)
在网页布局中,为了能够使纷繁复杂的各个部分合理地进行组织,通过研究,总结出了一套完整的、行之有效的原则和规范,这就是“盒子模型”的由来。
在CSS中,一个独立的盒子模型由内容(content)、边框(border)、填充(padding)和边界(margin)4个部分组成:
内容(content):对应盒内物品
边框(border):对应包装盒的纸壳,具有厚度
填充(padding):位于边框内部,是内容与边框的距离,对应包装盒的填充部分
边界(margin):位于边框外部,是边框外面周围的间隙,对应纸壳外围间隙
![](http://images.cnitblog.com/blog/707050/201501/111428553127595.png)
图2 标准盒子模型
3. 盒子模型的三维立体结构图
![](http://images.cnitblog.com/blog/707050/201501/111429045319746.png)
图3 CSS2.0盒子模型的三维立体结构图
▪边框(border),位于盒子的第一层。
▪元素内容(content)、内边距(padding),两者同位于第二层。
▪背景图(background-image),位于第三层。
▪背景色(background-color),位于第四层。
▪整个盒子的外边距(margin),位于第五层。
二. 盒子模型属性
1. 边框(border):用于分隔不同元素、会占据空间、有4条边框、可无边框(设置为0)。语法:
border : border-width || border-style || border-color
取值:
该属性是复合属性。默认值为: medium none 。 border-color 的默认值将采用文本颜色。
边框属性简写
同时设置边框的三个属性:border: 3px solid blue;
示例代码1:边框属性简写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框属性简写</title> <style> div{ width: 200px; height: 200px; border: 3px solid blue; } </style> </head> <body> <div>盒子</div> </body> </html>
① border-width:设置对象边框的宽度。
语法:
border-width : medium | thin | thick | length
取值:
medium : 默认值。默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
length : 由浮点数字和单位标识符组成的长度值。不可为负值。
说明:
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框(顺时针)。如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
设置border-width、border-color前要设置border-style。
分别设置四条边框:
属性 | 语法规则 | 说 明 |
border-top-width | border-top-width:5px; | 上边框粗细为5px |
border-right-width | border-right-width:10px; | 右边框粗细为10px |
border-bottom-width | border-bottom-width:8px; | 下边框粗细为8px |
border-left-width | border-left-width:22px; | 左边框粗细为22px |
<style> div{ border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; width:200px; height:200px; border-style: solid; } </style>
同时设置4条边框:
属性 | 语法规则 | 说 明 |
border-width | border-width:5px; | 4条边框粗细均为5px |
border-width | border-width:20px 2px; | 上、下边框粗细为20px 左、右边框粗细为2px |
border-width | border-width:5px 1px 6px; | 上边框粗细为5px 左、右边框粗细为1px 下边框粗细为6px |
border-width | border-width:1px 3px 5px 2px; | 上边框粗细为1px 右边框粗细为3px 下边框粗细为5px 左边框粗细为2px |
<style> div{ border-width:5px 10px 20px; width:200px; height:200px; border-style: solid; } </style>
② border-color: 指定颜色。
语法:
border-color : color
取值:
color:指定颜色。附:CSS 颜色十六进制值表
说明:
▪从#后第1位开始每2位为一组,表示一个颜色的值(这是以十六进制来算的):第1组为红色,第2组为绿色,第3组为蓝色。根据三基色的原理,红色与绿色混合为黄色,红色与蓝色混为紫色,绿色与蓝色混合为青色。
▪数值大颜色亮
▪十六进制值是成对重复的可以简写,效果一样。例如:#FF0000 可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B 必须写满六位。
▪红色#FF0000,绿色#00ff00,蓝色为#0000ff,黄色为#FFFFOO,紫色为#ff00ff,青色为#00ffff,白色#ffffff,黑色#000000,要记住(上面所提到的都是饱和色)。
分别设置四条边框和同时设置4条边框语法同border-width
示例代码4:[b]同时设置4条边框的颜色(修改示例代码3的style)[/b]
<style> div{ border-color: gold pink blue red; border-width:5px 10px 20px; width:200px; height:200px; border-style: solid; } </style>
③ border-style:设置对象边框的样式。
语法:
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
取值:
none : 默认值。无边框。不受任何指定的 border-width 值影响
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove : 根据 border-color 的值画3D凹槽
ridge : 根据 border-color 的值画3D凸槽
inset : 根据 border-color 的值画3D凹边
outset : 根据 border-color 的值画3D凸边
分别设置四条边框和同时设置4条边框语法同border-width
示例代码5:[b]同时设置4条边框(修改示例代码4的style)[/b]
<style> div{ border-style: dotted; border-color: gold pink blue red; border-width:5px 10px 20px; width:200px; height:200px; } </style>
④ inherit:规定应该从父元素继承 border 属性的设置。
注:当有多条规则作用于同一个边框时,会产生冲突,后面的设置会覆盖前面的设置。
2. 填充(padding):用于控制内容与边框之间的距离;会占据空间;
可设置盒子模型上、右、下、左4个方向的内边距值;padding属性的值可以为0,即无内边距。
分别设置4个方向的内边距:
属性 | 语法规则 | 说 明 |
padding-left | padding-left:10px; | 左内边距为10px |
padding-right | padding-right:5px; | 右内边距为5px |
padding-top | padding-top:20px; | 上内边距为20px |
padding-bottom | padding-bottom:8px; | 下内边距为8px |
属性 | 语法规则 | 说 明 |
padding | padding:10px ; | 设置4个方向内边距均为10px |
padding | padding:10px 5px; | 上、下内边距为10px 左、右内边距为5px |
padding | padding:30px 8px 10px ; | 上内边距为30px 左、右内边距为8px 下内边距为10px |
padding | padding:20px 5px 8px 10px ; | 上内边距为20px 右内边距为5px 下内边距为8px 左内边距为10px |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>填充(padding)</title> <style> #box1{ width: 400px; height: 300px; background: pink; } #box2{ padding: 30px 8px 10px; width: 300px; height: 200px; background: green; } </style> </head> <body> <div id="box1"> <div id="box2">同时设置4个方向的内边距</div> </div> </body> </html>
3.边界(margin):用于控制元素与元素之间的距离;会占据空间;
可设置盒子模型上、右、下、左4个方向的外边距值;margin属性的值可以为0,即无外边距。
分别设置4个方向的内边距和同时设置4个方向的内边距语法同padding属性设置方法类似。
示例代码7:同时设置4个方向的外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边界(margin)</title> <style> #box1{ border:1px solid red; width: 400px; height: 300px; background: pink; } #box2{ margin: 10px 30px; padding: 30px 8px 10px; width: 300px; height: 200px; background: green; } </style> </head> <body> <div id="box1"> <div id="box2">同时设置4个方向的外边距</div> </div> </body> </html>
注:body的外边距,本身是一个盒子,默认情况下,有若干像素外填充。
由于各个浏览器存在着默认的内外边距值且不相同,我们需要将所有浏览器的默认内外边距,都从0计算。 所以,我们用
body,div{/*清除默认外边距和内边距*/ margin: 0; padding: 0; }
去除浏览器的默认内外边距。建议要去除的写上,不建议使用*{margin:0;padding:0;}。
示例代码8:去除body外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>去除body外边距</title> <style> body,div{ margin: 0px; padding: 0px; } div{ border:1px solid red; width: 400px; height: 300px; background: pink; } </style> </head> <body> <div id="box">此时是贴在body边框上</div> </body> </html>
效果:
![](http://images.cnitblog.com/blog/707050/201501/111429087031071.png)
图4 去除body外边距
4. 内容(content)
内容本身的宽=width
内容本身的高=height
5.盒子模型总尺寸
盒子模型总尺寸=border-width+padding+margin+内容尺寸(宽度/高度)
![](http://images.cnitblog.com/blog/707050/201501/111429115468068.png)
图5 盒子模型总尺寸
三. 盒子之间的关系
单独的一个盒子不难理解,实际上网页往往是很复杂的,一个网页可能存在着大量的盒子,并且它们之间以各种关系相互影响着。为了适应各种排版要求,CSS规范的思路是:首先确定一种标准的排版模式,这个就是“标准流”。但仅通过标准流方式,很多排版是无法实现的,CSS规范中又给出了另外几种对盒子进行布局的方法,包括“浮动”和“定位”等属性,对某些元素进行特殊排版。
1. DOM树
一个HTML从表面看是文本文件,从逻辑上看则具有内在的层次关系。“树”可以表示具有层次关系的结构。
任意一个HTML文档都对应一棵DOM树,body是所有对象的根节点。而该DOM树的节点如何在浏览器中表现,则由CSS确定。即HTML控制网页的结构,CSS控制网页的表现。
![](http://images.cnitblog.com/blog/707050/201501/111429155628609.png)
图6 HTML文档对应DOM树
2. 标准文档流
“标准文档流”(Normal Document Stream),简称“标准流”,是指在不使用其他与排列和定位相关的特殊CSS规则时,各种元素的排列规则。
如上图共有四层结构,顶层为body,第二层为ul,第三层为li,第四层为文本。这四种元素分为两类:
① 块级元素(block level)
li占据着一个矩形的区域,并且和相邻的li依次竖直排列,不会排在同一行中。ul也具有同样的性质,占据着一个矩形的区域,并且和相邻的ul依次竖直排列,不会排在同一行中。这类元素称为“块级元素” ,即它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。
常见的块标记:address、block、div、dl、fieldset、form、h1 ~ h6、menu、ol、ul、p、table
② 行内元素(inline)
对于文字这类元素,各个字母之间横向排列,到最右端自动折行,这就是另一种元素,称为“行内元素”。比如<strong></strong>标记,就是一个典型的行内元素,这个标记本身不占有独立的区域,仅仅是在其他元素的基础上指出了一定的范围。再比如,最常用的<a>、<span>标记。
3.浏览器处理元素过程:
第1步:从body开始,依次把两个ul块竖直排列。
第2步:分别进入每一个ul查看它的下级元素,把两个li块竖直排列在ul中。
第3步:进入li内部,是一行文本,按行内元素排列文字。
4.<div>标记与<span>标记
为了更好地理解“块级元素”和“行内元素”,这里重点介绍在CSS排版的页面中经常使用的<div>和<span>标记。
div简单而言就是一个块级容器标记,可以容纳段落、标题、表格、图片,乃至章节、摘要和备注等各种HTML元素。可以把div当做一个独立的对象,用CSS进行控制。<span>和<div>一样,在HTML元素中可以作为独立的对象进行处理。
两者的区别在于:div是一个块级元素,span仅仅是一个行内元素,在它的前后都不会换行。span没有结构上的意义,纯粹是应用样式,当其他行内元素都不适合时,就可以用span标记。div标记可以包含span,span不可以包含div。
5. 盒子在标准流中的定位原则
如果要精确地控制盒子的位置,就必须对margin有更深入的了解。padding只存在于一个盒子内部,所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。margin则用于调整不同的盒子之间的位置关系。
① 行内元素之间的水平margin
![](http://images.cnitblog.com/blog/707050/201501/111429196878648.png)
图7 行内元素之间的水平margin
两个块之间的距离为:30px+40px=70px。
② 块级元素之间的竖直margin
![](http://images.cnitblog.com/blog/707050/201501/111429224687432.png)
图8 块级元素之间的竖直margin
如果不是行内元素,而是竖直排列的块级元素,margin的取值情况就会有所不同。
两个块级元素之间的距离不是margin-bottom与margin-top的总和,而是两者中的较大者,如图所示。这个现象称为margin的“塌陷”(或称为“合并”)现象,意思是说较小的margin塌陷(合并)到了较大的margin中。
6. 嵌套盒子之间的margin
除了上面提到的行内元素间隔和块级元素间隔这两种关系外,还有一种父子关系,它的margin值对CSS排版也有重要的作用。当一个<div>块包含在另一个<div>块中时,便形成了典型的父子关系。
其中子块的margin将以父块的内容为参考,如图4.22所示。
![](http://images.cnitblog.com/blog/707050/201501/111429240936902.png)
图9 [b]嵌套盒子之间的margin[/b]
在没有设置width和height的情况下,高度和宽度都会自动延伸和收缩。 在标准流中,一个块级元素的盒子水平方向的宽度会自动延伸,直至上一级盒子的限制位置。对于高度,div都是以里面的内容的高度来确定的,也就是会自动收缩到能包容下内容的最小高度。
示例代码7:在没有设置width和height的情况下,高度和宽度都会自动延伸和收缩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子的嵌套</title> <style> #box1{//父盒子 设置宽度 border:1px solid red; width: 300px; height: 150px; background: pink; } #box2{//子盒子 不设置宽度 border:1px solid red; height: 100px; background: green; } </style> </head> <body> <div id="box1">父盒子 <div id="box2">子盒子宽度 自动延伸为 父盒子宽度</div> </div> </body> </html>
效果:
![](http://images.cnitblog.com/blog/707050/201501/111429257652359.png)
图10 [b]子盒子宽度延伸为父盒子宽度[/b]
如果更改代码:父盒子不设置高度,子盒子设置高度,则父盒子高度会收缩至子盒子的高度,效果如下:
![](http://images.cnitblog.com/blog/707050/201501/111429267819415.png)
图11 父[b]盒子高度收缩为子盒子高度[/b]
7. margin属性可以设置为负值
上面提及margin的时候,它的值都是正数。其实margin的值也可以设置为负数,而且有关的巧妙运用方法也非常多。
![](http://images.cnitblog.com/blog/707050/201501/111429276561515.png)
图12 [b]margin-left=-50px[/b]
CSS盒子模型(下):CSS3可伸缩框属性(Flexible Box)
转载需注明转载字样,标注原作者和原博文地址。相关文章推荐
- css's special-css盒子模型
- CSS盒子模型小剖析
- 转 CSS盒子模型
- CSS盒子模型元素实际宽度的计算
- 浅谈CSS盒子模型
- 【web】--有趣的CSS盒子模型
- CSS盒子模型
- CSS基础-17CSS盒子模型-外边距合并
- CSS基础学习十六:CSS盒子模型补充之border-radius属性
- :css教程:css盒子模型及布局应用
- css盒子模型
- CSS盒子模型
- 什么是CSS盒子模型
- CSS盒子模型
- CSS---网页编程(三)网页化妆技术CSS学习、CSS盒子模型
- css盒子模型
- css盒子模型及其他元素属性简介
- CSS盒子模型
- CSS盒子模型
- css盒子模型 css margin 外边框合并