CSS3盒模型规定了网页元素的显示方式,包括大小、边框、边界和补白等概念。2015年4月,W3C的CSS工作组发布了CSS3基本用户接口模块,该模块负责控制与用户接口界面相关效果的呈现方式。
1、盒模型基础
在网页设计中,经常会听到内容(content)、补白(padding)、边框(border)、边界(margin)等术语,在日常生活中盒子装东西与此类似,所以统称为盒模型。
盒模型具有如下特点,其结构示意图如下图所示:
- 盒子都有4个区域:边界、边框、补白、内容。
- 每个区域都包括4个部分:上、右、下、左。
- 每个区域可以统一设置,也可以分别设置。
- 边界和补白只能定义大小,而边框可以定义样式、大小和颜色。
- 内容可以定义宽度、高度、前景色和背景色。
在默认状态下,所有元素的初始状态(margin、border、padding、width和height)都为0,背景色为透明。当元素包含内容后,width和height会自动调整为内容的宽度和高度。调整补白、边框和边界的大小,不会影响内容的大小,但会增加元素在网页内显示的总尺寸。
2、大小
使用width(宽)和height(高)属性可以定义内容区域的大小。
根据CSS盒模型规则,可以设计如下等式:
- 元素的总宽度=左边界+左边框+左补白+宽+右补白+右边框+右边界
- 元素的总高度=上边界+上边框+上补白+高+下补白+下边框+下边界
假设一个元素的宽度为200px、左右边界为50px、左右补白为50px、边框为20px,则该元素在页面中实际占据的宽度为50px + 20px + 50px + 200px + 50px + 20px + 50px =440px。
注意:在浏览器怪异解析模式中,元素在页面中占据的实际大小如下:
- 元素的总宽度=左边界+宽+右边界
- 元素的总高度=上边界+高+下边界
使用CSS盒模型公式表示如下:
元素的总宽度=左边框+左补白+宽+右补白+右边框
元素的总高度=上边界+上补白+高+下补白+下边框
【示例】定义两个并列显示的div元素,设置每个div的width为50%,显示效果如下图所示:
<style type="text/css">
div { /*定义div元素公共属性 */
float: left; /*向左浮动,实现并列显示*/
background-image: url(images/1.jpg); /* 定义背景图像 */
background-color: #CC99CC; /* 定义背景色 */
font-size: 32px; /* 定义div内显示的字体大小 */
color: #FF0000; /* 定义div内显示的字体颜色 */
text-align: center; /* 定义div内显示的字体居中显示 */
height: 540px; /* 定义高度*/}
#box1 { /*定义第1个div元素属性*/
width: 50%; /* 占据窗口一半的宽度 */ }
#box2 { /*定义第2个div元素属性*/
width: 50%; /* 占据窗口一半的宽度 */ }
</style>
<div id="box1">左边元素</div>
<div id="box2">右边元素</div>
3、边框
边框可以设计修饰线,也可以作为分界线。定义边框的宽度有多种方法,简单说明如下:
(1)直接在属性后面指定宽度值。
border-bottom-width:12px; /*定义元素的底边框宽度为12px*/
border-top-width:0.2em; /*定义顶部边框宽度为元素内字体大小的0.2倍*/
(2)使用关键字,如thin、medium和thick。thick比medium宽,而medium比thin宽。不同浏览器对此解析的宽度值不同,有的解析为5px、3px、2px,有的解析为3px、2px、1px。
(3)单独为某边设置宽度,可以使用border-top-width(顶边框宽度)、border-right-width(右边框宽度)、border-bottom-width(底边框宽度)和border-left-width(左边框宽度)。
(4)使用border-width属性定义边框宽度。
border-width:2px; /*定义四边都为2px*/
border-width:2px 4px; /*定义上下边为2px,左右边为4px*/
border-width:2px 4px 6px; /*定义上边为2px,左右边为4px,底边为6px*/
border-width:2px 4px 6px 8px; /*定义上边为2px,右边为4px,底边为6px,左边为8px*/
提示:当定义边框宽度时,必须定义边框样式,因为边框样式默认为none,即不显示,所以仅设置边框的宽度,就看不到效果。
定义边框颜色可以使用颜色名、RGB颜色值或十六进制颜色值。
【示例1】分别为元素的各个边框定义不同的颜色:
<style type="text/css">
#box {/*定义边框的颜色 */
height: 164px; /* 定义盒的高度 */
width: 240px; /* 定义盒的宽度 */
padding: 2px; /* 定义内补白 */
font-size: 16px; /* 定义字体大小 */
color: #FF0000; /* 定义字体显示颜色 */
border-style: solid; /* 定义边框为实线显示 */
border-width: 50px; /* 定义边框的宽度 */
border-top-color: #aaa; /* 定义顶边框颜色为十六进制值*/
border-right-color: gray; /* 定义右边框颜色为名称值*/
border-bottom-color: rgb(120,50,20); /* 定义底边框颜色为RGB值*/
border-left-color:auto; /* 定义左边框颜色将继承字体颜色*/}
</style>
<div id="box"><img src="images/1.jpg" width="240" height="164" alt=""/></div>
CSS支持的边框样式主要包括以下几个:
- none:默认值,无边框,不受任何指定的border-width值影响。
- hidden:隐藏边框,IE不支持。
- dotted:定义边框为点线。
- dashed:定义边框为虚线。
- solid:定义边框为实线。
- double:定义边框为双线,两条线及其间隔宽度之和等于指定的border-width值。
- groove:根据border-color值定义3D凹槽。
- ridge:根据border-color值定义3D凸槽。
- inset:根据border-color值定义3D凹边。
- outset:根据border-color值定义3D凸边。
【示例2】在一段文本中包含一个span元素,利用它为部分文本定义特殊样式,设计顶部边框为80px的红色实线,底部边框为80px的绿色实线,如下图所示:
<style type="text/css">
p { /* 定义段落属性 */
margin: 50px; /* 定义段落的边界为50px */
border: dashed 1px #999; /* 定义段落的边框 */
font-size: 14px; /* 定义段落字体大小 */
line-height: 24px; /* 定义段落行高为24px */}
span { /* 定义段落内内联文本属性 */
border-top: solid red 80px; /* 定义行内元素的上边框样式 */
border-bottom: solid green 80px; /* 定义行内元素的下边框样式 */
color: blue;
}
</style>
<p> 寒蝉凄切,对长亭晚,骤雨初歇。都门帐饮无绪,留恋处舟催发。执手相看泪眼,竟无语凝噎。念去去千里烟波,
暮霭沉沉楚天阔。 <span>多情自古伤离别,更那堪冷落清秋节。</span>今宵酒醒何处?杨柳岸晓风残月。此去经年,应是良
辰好景虚设。便纵有千种风情,更与何人说? </p>
可以看到上边框压住上一行文字,并超出段落边框,下边框压住下一行文字,也超出段落边框。
4、边界
元素与元素外边框之间的区域称为边界,也称为外边距。设置边界可以使用margin属性。
margin:2px; /*定义元素四边边界为2px*/
margin:2px 4px; /*定义上下边界为2px,左右边界为4px*/
margin:2px 4px 6px; /*定义上边界为2px,左右边界为4px,下边界为6px*/
margin:2px 4px 6px 8px; /*定义上边界为2px,右边界为4px,下边界为6px,左边界为8px*/
也可以使用margin-top、margin-right、margin-bottom、margin-left属性独立设置上、右、下和左边界的大小。
margin-top:2px; /*定义元素上边界为2px*/
margin-right:2em; /*定义右边界为元素字体的2倍*/
margin-bottom:2%; /*定义下边界为父元素宽度的2%*/
margin-left:auto; /*定义左边界为自动*/
margin可以使用任何长度单位,如px、lb、in、cm、em、%等。margin默认值为0,可以取负值。如果设置负值,将反向偏移元素的位置。
【示例1】通过边界调整子元素在包含框内的显示位置:
<style type="text/css">
body {margin: 0; /*适用IE*/padding: 0; /*适用非IE*/}/*清除页边距*/
div { /*定义父子元素共同属性*/
margin: 20px;
padding: 20px;
float: left;}
#box1 { /*定义父元素的属性*/
width: 500px;
height: 300px;
float: left;
background-image: url(images/1.jpg);
border: solid 20px red;}
#box2 { /*定义子元素的属性*/
width: 150px;
height: 150px;
float: left;
background-image: url(images/2.jpg);
border: solid 20px blue;}
</style>
<div id="box1">
<div id="box2">子元素</div>
</div>
5、补白
元素包含内容与内边框间的区域称为补白,也称为内边距。设置补白可以使用padding属性。
padding:2px; /*定义元素四周补白为2px*/
padding:2px 4px; /*定义上下补白为2px,左右补白为4px*/
padding:2px 4px 6px; /*定义上补白为2px,左右补白为4px,下补白为6px*/
padding:2px 4px 6px 8px; /*定义上补白为2px,右补白为4px,下补白为6px,左补白为8px*/
也可以使用padding-top、padding-right、padding-bottom、padding-left属性独立设置上、右、下和左补白的大小。
padding-top:2px; /*定义元素上补白为2px*/
padding-right:2em; /*定义右补白为元素字体的2倍*/
padding-bottom:2%; /*定义下补白为父元素宽度的2%*/
padding-left:auto; /*定义左补白为自动*/
补白取值不可以为负。补白和边界一样都是透明的,当设置背景色和边框色后,才能看到补白区域。
【示例】设计导航列表项目并列显示,然后通过补白调整列表项目的显示大小:
<style type="text/css">
ul { /*清除列表样式*/
margin: 0; /*清除IE列表缩进*/
padding: 0; /*清除非IE列表缩进*/
list-style-type: none; /*清除列表样式*/}
#nav {width: 100%;height: 32px;} /*定义列表框宽和高*/
#nav li { /*定义列表项样式*/
float: left; /*浮动列表项*/
width: 9%; /*定义百分比宽度*/
padding: 0 5%; /*定义百分比补白*/
margin: 0 2px; /*定义列表项间隔*/
background: #def; /*定义列表项背景色*/
font-size: 16px;
line-height: 32px; /*垂直居中*/
text-align: center; /*平行居中*/}
</style>
<ul id="nav">
<li>美 丽 说</li>
<li>聚美优品</li>
<li>唯 品 会</li>
<li>蘑 菇 街</li>
<li>1 号 店</li>
</ul>
6、界面
6.1、显示方式
浏览器解析有两种模式:怪异模式和标准模式。在怪异模式下,border和padding包含在width或height之内;在标准模式下,border、padding、width或height是各自独立区域。
使用box-sizing属性可以定义对象的解析方式,具体语法如下所示:
box-sizing : content-box | border-box;
取值简单说明如下:
- content-box:为默认值,padding和border不包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即元素的实际宽度=宽+边框+补白。
- border-box:padding和border包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即元素的宽度=width。
【示例】设计两个盒子,在标准模式和怪异模式下进行解析比较,显示效果如下图所示:
<style type="text/css">
div {
float: left; /* 并列显示 */
height: 100px; /* 元素的高度 */
width: 100px; /* 元素的宽度 */
border: 50px solid red; /* 边框 */
margin: 10px; /* 外边距 */
padding: 50px; /* 内边距 */
}
.border-box { box-sizing: border-box;} /* 怪异模式解析 */
</style>
<div>标准模式</div>
<div class="border-box">怪异模式</div>
6.2、调整大小
使用resize属性可以允许用户通过拖动的方式改变元素的尺寸,具体语法如下所示:
resize:none | both | horizontal | vertical
取值简单说明如下:
- none:为默认值,不允许用户调整元素大小。
- both:用户可以调节元素的宽度和高度。
- horizontal:用户可以调节元素的宽度。
- vertical:用户可以调节元素的高度。
目前除了IE浏览器外,其他主流浏览器都支持该属性。
【示例】演示使用resize属性设计可以自由调整大小的图片:
<style type="text/css">
#resize {
/*以背景方式显示图像,这样可以更轻松地控制缩放操作*/
background:url(images/1.jpg) no-repeat center;
/*设计背景图像仅在内容区域显示,留出补白区域*/
background-clip:content;
/*设计元素最小和最大显示尺寸,用户也只能在该范围内自由调整*/
width:200px; height:120px;
max-width:800px; max-height:600px;
padding:6px; border: 1px solid red;
/*必须同时定义overflow和resize,否则resize无效,元素默认溢出显示为visible*/
resize: both;
overflow: auto;
}
</style>
<div id="resize"></div>
6.3、缩放比例
zoom是IE的专有属性,用于设置对象的缩放比例,另外它还可以触发IE的haslayout属性,清除浮动、margin重叠等作用,设计师常用这个属性解决IE浏览器存在的布局Bug。
CSS3支持该属性,基本语法如下所示:
zoom:normal | <number> | <percentage>
取值说明如下:
- normal:使用对象的实际尺寸。
-
<number>
:用浮点数定义缩放比例,不允许负值。 -
<percentage>
:用百分比定义缩放比例,不允许负值。
目前,除了Firefox浏览器之外,所有主流浏览器都支持该属性。
【示例】使用zoom放大第2幅图片为原来的2倍:
<style type="text/css">
img {
height: 200px;
margin-right: 6px;
}
img.zoom { zoom: 2; }
</style>
<img src="images/bg.jpg"/>
<img class="zoom" src="images/bg.jpg"/>
当zoom属性值为1或100%时,相当于normal,表示不缩放;当zoom属性值为小于1的正数时,表示缩小,如zoom: 0.5;表示缩小一半。
7、轮廓样式
轮廓与边框不同,它不占用页面空间,且不一定是矩形。轮廓属于动态样式,只有当对象获取焦点或者被激活时呈现。使用outline属性可以定义块元素的轮廓线,具体语法如下所示:
outline:<'outline-width'> || <'outline-style'> || <'outline-color'> || <'outline-offset'>
取值简单说明如下:
-
<'outline-width'>
:指定轮廓边框的宽度。 -
<'outline-style'>
:指定轮廓边框的样式。 -
<'outline-color'>
:指定轮廓边框的颜色。 -
<'outline-offset'>
:指定轮廓边框偏移值。
【示例】设计当文本框获得焦点时,在周围画一个粗实线外廓,以提醒用户交互效果:
<style type="text/css">
……
/*设计表单内文本框和按钮在被激活和获取焦点状态下时,轮廓线的宽、样式和颜色*/
input:focus, button:focus { outline: thick solid #b7ddf2 }
input:active, button:active { outline: thick solid #aaa }
</style>
<div id="stylized" class="myform">
<form id="form1" name="form1" method="post" action="">
<h1>登录</h1>
<p>请准确填写个人信息...</p>
<label>Name <span class="small">姓名</span> </label>
<input type="text" name="textfield" id="textfield" />
<label>email <span class="small">电子邮箱</span> </label>
<input type="text" name="textfield" id="textfield" />
<label>Password <span class="small">密码</span> </label>
<input type="text" name="textfield" id="textfield" />
<button type="submit">登录</button>
<div class="spacer"></div>
</form>
</div>
8、圆角样式
使用border-radius属性可以设计元素的边框以圆角样式显示,具体语法如下所示:
border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
取值简单说明如下:
-
<length>
:用长度值设置对象的圆角半径长度,不允许负值。 -
<percentage>
:用百分比设置对象的圆角半径长度,不允许负值。 - border-radius:此属性派生了以下4个子属性:
●border-top-right-radius:定义右上角的圆角。
●border-bottom-right-radius:定义右下角的圆角。
●border-bottom-left-radius:定义左下角的圆角。
●border-top-left-radius:定义左上角的圆角。
提示:border-radius属性可包含两个参数值:第一个参数值表示圆角的水平半径;第二个参数值表示圆角的垂直半径。如果仅包含一个参数值,则第二个参数值与第一个参数值相同。如果参数值中包含0,则这个角就是矩形,不会显示为圆角。
【示例】下面代码定义img元素显示为圆形,当图像宽高比不同时,显示效果不同:
<style type="text/css">
img {/*定义图像圆角边框*/
border: solid 1px red;
border-radius: 50%; /*圆角*/
}
.r1 {/*定义第1幅图像宽高比为1∶1*/
width:300px;
height:300px;
}
.r2 {/*定义第2幅图像宽高比不为1∶1*/
width:300px;
height:200px;
}
.r3 {/*定义第3幅图像宽高比不为1∶1*/
width:300px;
height:100px;
border-radius: 20px; /*定义圆角*/
}
</style>
<img class="r1" src="images/1.jpg" title="圆角图像" />
<img class="r2" src="images/1.jpg" title="椭圆图像" />
<img class="r3" src="images/1.jpg" title="圆形图像" />
9、阴影样式
使用box-shadow属性可以定义元素的阴影效果,基本语法如下所示:
box-shadow : none | inset? && <length>{2,4} && <color>?
取值简单说明如下:
- none:无阴影。
-
<length>
①:第1个长度值用来设置对象的阴影水平偏移值,可以为负值。 -
<length>
②:第2个长度值用来设置对象的阴影垂直偏移值,可以为负值。 -
<length>
③:如果提供了第3个长度值则用来设置对象的阴影模糊值,不允许负值。 -
<length>
④:如果提供了第4个长度值则用来设置对象的阴影外延值,可以为负值。 -
<color>
:设置对象的阴影的颜色。 - inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影。
【示例1】定义一个简单的实影投影效果:
<style type="text/css">
img{
height:300px;
box-shadow:5px 5px;
}
</style>
<img src="images/1.jpg" />
【示例2】定义位移、阴影大小和阴影颜色:
img{
height:300px;
box-shadow:2px 2px 10px #06C;
}
【示例3】定义内阴影,阴影大小为10px,颜色为#06C:文章来源:https://www.toymoban.com/news/detail-741522.html
<style type="text/css">
pre {
padding: 26px;
font-size:24px;
box-shadow: inset 2px 2px 10px #06C;
}
</style>
<pre>
-moz-box-shadow: inset 2px 2px 10px #06C;
-webkit-box-shadow: inset 2px 2px 10px #06C;
box-shadow: inset 2px 2px 10px #06C;
</pre>
文章来源地址https://www.toymoban.com/news/detail-741522.html
到了这里,关于CSS3盒模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!