盒模型应用
文章目录
1. 改变宽高范围(box-sizing)
默认情况下,width 和 height 设置的是内容盒宽高
页面重构师:将psd文件(设计稿)制作为静态页面
衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 236px;
height: 51px;
/*width和height设置的是内容盒的宽高*/
color: #a7a7a7;
background-color: #2d2e36;
line-height: 51px;
/*文本的高度设为容器的高度,可以使单行文本水平居中*/
}
</style>
</head>
<body>
<div>
页游中心
</div>
</body>
</html>
显示效果:
此时检查网页,选中div元素,可见盒模型的宽高即设定的数值(236px*51px),此时显示的效果是我们期望看到的效果。
但是若再加填充以及边框,例如
加填充(内边距):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 236px;
height: 51px;
/*width和height设置的是内容盒的宽高*/
color: #a7a7a7;
background-color: #2d2e36;
line-height: 51px;
/*文本的高度设为容器的高度,可以使单行文本水平居中*/
padding-left: 46px;
/*左内边距为46个像素*/
}
</style>
</head>
<body>
<div>
页游中心
</div>
</body>
</html>
效果:
可以看到盒模型宽236+46=282px,高51px,此时显示的是填充盒,而内容盒的宽高并没有改变。
再加边框:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 236px;
height: 51px;
/*width和height设置的是内容盒的宽高*/
color: #a7a7a7;
background-color: #2d2e36;
line-height: 51px;
/*文本的高度设为容器的高度,可以使单行文本水平居中*/
padding-left: 46px;
/*左内边距为46个像素*/
border: 3px solid rgb(30, 181, 252);
/* 边框为上下左右宽度均为3px的淡蓝色实线 */
}
</style>
</head>
<body>
<div>
页游中心
</div>
</body>
</html>
效果:
此时显示的是边框盒,宽为236+46+3+3=288px,高为51+3+3=57px。
而真正做项目的时候,我们希望显示出来的盒模型的宽高能够直接通过设置参数来确定,单单设定内容盒的宽高在很多时候是非常不方便的。
解决办法:
- 精确计算
层层计算,设计正确的内容盒宽高来满足整个盒模型的宽高。
- CSS3:box-sizing
<!-- 改变宽高的影响范围 -->
box-sizing: border-box;
<!-- 将宽高属性在边框盒生效 -->
利用box-sizing 可以直接规定相应盒的宽高,例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 236px;
height: 51px;
/*width和height默认设置的是内容盒的宽高*/
color: #a7a7a7;
background-color: #2d2e36;
line-height: 51px;
/*文本的高度设为容器的高度,可以使单行文本水平居中*/
padding-left: 46px;
/*左内边距为46个像素*/
border: 3px solid rgb(30, 181, 252);
/* 边框为上下左右宽度均为3px的淡蓝色实线 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
页游中心
</div>
</body>
</html>
效果:
可以看到此时的盒模型(显示出来的是边框盒)的宽高就是我们想要的236*51px。
其实此时文本不是垂直居中的,因为文本的容器是内容盒,而此时的内容盒的高不再是51px。可以计算一下此时内容盒的高度是51-3*2=45px,所以将line-height改为45px即可使文本再次垂直居中。
2. 改变背景覆盖范围(background-clip)
默认情况下,背景覆盖边框盒。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 150px;
background-color: #008c8c;
border: 10px dashed #f40;
padding: 30px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur.
</div>
</body>
</html>
显示效果:
可以看到马尔斯绿的背景颜色覆盖了内容盒、填充和边框区域,验证了前面说的,背景颜色覆盖边框盒。
这种效果可以通过background-clip进行修改。
例如添加样式background-clip: content-box;
,效果如下:
添加样式background-clip: padding-box;
,效果如下:
3. 溢出处理(overflow)
有时盒子的内容会超出盒子的范围,造成溢出。不设定盒子宽高一般不会发生溢出,盒子的宽高会根据内容多少自动进行调节。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 3px solid;
padding: 10px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates molestias tempore suscipit expedita esse ea hic necessitatibus consequuntur veniam nemo. Illo iure expedita quidem consectetur accusantium nobis molestias porro aspernatur.
</div>
</body>
</html>
生成网页:
此时,盒宽高根据内容多少自动调节,没有发生溢出。
接下来,如果我们给出的盒宽高不足以容纳这么多内容,则会发生溢出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 3px solid;
padding: 10px;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates molestias tempore suscipit expedita esse ea hic necessitatibus consequuntur veniam nemo. Illo iure expedita quidem consectetur accusantium nobis molestias porro aspernatur.
</div>
</body>
</html>
效果:
overflow,控制内容溢出边框盒后的处理方式
默认情况下,溢出的内容是显现出来能够看到的,此时overflow的默认值是visible,即overflow: visible;
。
overflow的其他取值:
- hidden:溢出部分隐藏
当样式overflow: hidden;
,效果如下:
- scroll:生成滚动条
当样式overflow: scroll;
,效果如下:
- auto:需要滚动条时出现滚动条,不需要时隐藏滚动条
当样式overflow: auto;
,效果如下:
可以看到,横向不需要滚动条,则界面中没有横向滚动条出现;而纵向需要滚动条,界面中则出现了纵向滚动条。
overflow是个速写属性,可以通过设置overflow-x
和overflow-y
来分别设置横向纵向的溢出处理方式。
4. 断词规则(word-break)
word-break,会影响文字在什么位置被截断换行
取值:
- normal(默认):普通。CJK字符(文字位置截断),非CJK字符(单词位置截断)
CJK字符:中日韩统一表意文字
例如:(div元素里的文本都是用乱数假文生成的,英文lorem,中文jw,关于乱数假文在笔记4(文本元素)中介绍过)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
padding: 30px;
border: 10px solid;
width: 400px;
}
</style>
</head>
<body>
<p>非CJK字符</p>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur ipsum cumque fugit accusantium repellendus tempore assumenda sapiente, hic, numquam deserunt sed ratione aspernatur mollitia unde? Nisi architecto possimus neque? Eligendi.
</div>
<p>CJK字符</p>
<div>
老马畴学才张临韩主不,诗逃叹,陀俭了后俭九承到冷他行流次是了资你,量让极间前们他,弄变但尝,什以此原可一如接,得一觉手盲中回才里文穿量友,订疾救担对仍病入子才切落世命,助光马责,落迷爱竟人同出车哥宫洪出过尚,样承釜夭领也帝我生打友勉说肯非头一,以负哉找韩。
</div>
</body>
</html>
默认效果:
可以看到,一行的最后一个单词如果将要溢出内容盒,那么这个单词会放到下一行。
- break-all:截断所有。所有字符都在文字处截断。
现在在上面的程序中将word-break设置为break-all:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
padding: 30px;
border: 10px solid;
width: 400px;
word-break: break-all;
}
</style>
</head>
<body>
<p>非CJK字符</p>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur ipsum cumque fugit accusantium repellendus tempore assumenda sapiente, hic, numquam deserunt sed ratione aspernatur mollitia unde? Nisi architecto possimus neque? Eligendi.
</div>
<p>CJK字符</p>
<div>
老马畴学才张临韩主不,诗逃叹,陀俭了后俭九承到冷他行流次是了资你,量让极间前们他,弄变但尝,什以此原可一如接,得一觉手盲中回才里文穿量友,订疾救担对仍病入子才切落世命,助光马责,落迷爱竟人同出车哥宫洪出过尚,样承釜夭领也帝我生打友勉说肯非头一,以负哉找韩。
</div>
</body>
</html>
效果如下:
可以看出,在内容盒宽度达到上限后,一个完整的英文单词会被截断,CJK字符则没有效果。
- keep-all:保持所有。所有文字都在单词之间截断。这个规则对于英文或者说非CJK字符相当于默认情况(nomal),因为在默认情况下,非CJK字符的完整单词也不会被截断。而CJK字符不是一个字一个单词,而是看字间有无分隔符(空格,逗号等)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
padding: 30px;
border: 10px solid;
width: 400px;
word-break: keep-all;
}
</style>
</head>
<body>
<p>非CJK字符</p>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur ipsum cumque fugit accusantium repellendus tempore assumenda sapiente, hic, numquam deserunt sed ratione aspernatur mollitia unde? Nisi architecto possimus neque? Eligendi.
</div>
<p>CJK字符</p>
<div>
老马畴学才张临韩主不,诗逃叹,陀俭了 后俭九承到冷他行流次是了资你,量让极间前们他,弄变但尝,什以此原可一如接,得一觉手盲中回才里文穿量友,订疾救担对仍病入子才切落世命,助光马责,落迷爱竟人同出车哥宫洪出过尚,样承釜夭领也帝我生打友勉说肯非头一,以负哉找韩。
</div>
</body>
</html>
这里将word-break设置为keep-all,并在中文的乱数假文“陀俭了”后面加了一个空格。
效果如下:
中文的乱数假文中,两个分隔符之间的文字视为一个单词,例如“诗逃叹”、“陀俭了”、“后俭九承到冷他行流次是了资你”等。
现实应用中,一般不用修改默认的word-break,因为默认格式是最符合排版逻辑的。
5. 空白处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
/* 下边框:虚线、粗2像素、灰色 */
border-bottom: dashed 2px #ccc;
/* 行高为2 */
line-height: 2;
/* 左边框:实线、粗3像素、马尔斯绿 */
border-left: solid 3px #008c8c;
/* 左内边距:10像素 */
padding-left: 10px;
/* 盒子之间上下1个字体大小、左右为0 */
margin: 1em 0;
/* 设置内容盒宽度 */
width: 400px;
}
</style>
</head>
<body>
<div>
<!-- ul>li*10>lorem5 -->
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Nam esse iure ullam rerum.</li>
<li>Officiis veritatis cupiditate maiores aspernatur.</li>
<li>Dolor veniam quisquam magni nemo.</li>
<li>Laboriosam aliquam velit nostrum voluptatum?</li>
<li>Odit sequi voluptatibus voluptatum a!</li>
<li>Velit id fugit eveniet qui!</li>
<li>Ullam, magnam rerum. Tempora, officiis!</li>
<li>Architecto, est. Blanditiis, est nulla!</li>
<li>Dolores delectus consectetur laborum accusantium.</li>
</ul>
</div>
</body>
</html>
现在有一个程序,显示效果如下:
但是如果内容盒的宽度比字符串长度小,字符串就会换行。我们把上面程序的width改为200px,则画面就会变为:
现在我们希望文字不换行(white-space: nowrap;
),且隐藏溢出部分(overflow: hidden;
),单词显示不完的部分用“…”代替(text-overflow: ellipsis;
)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
/* 下边框:虚线、粗2像素、灰色 */
border-bottom: dashed 2px #ccc;
/* 行高为2 */
line-height: 2;
/* 左边框:实线、粗3像素、马尔斯绿 */
border-left: solid 3px #008c8c;
/* 左内边距:10像素 */
padding-left: 10px;
/* 盒子之间上下1个字体大小、左右为0 */
margin: 1em 0;
/* 设置内容盒宽度 */
width: 200px;
/* 不换行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
/* 溢出部分用“...”代替 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
<!-- ul>li*10>lorem5 -->
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Nam esse iure ullam rerum.</li>
<li>Officiis veritatis cupiditate maiores aspernatur.</li>
<li>Dolor veniam quisquam magni nemo.</li>
<li>Laboriosam aliquam velit nostrum voluptatum?</li>
<li>Odit sequi voluptatibus voluptatum a!</li>
<li>Velit id fugit eveniet qui!</li>
<li>Ullam, magnam rerum. Tempora, officiis!</li>
<li>Architecto, est. Blanditiis, est nulla!</li>
<li>Dolores delectus consectetur laborum accusantium.</li>
</ul>
</div>
</body>
</html>
效果如下:
想要实现上面的效果,记住这三条:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
但是这种方法只能用于单行文本,多行文本想实现这种效果得用到JS。
对于空白处理
white-space
,默认值是nomal
,此时会发生空白折叠(空白折叠在笔记4文本元素的pre元素中介绍过)。
之前介绍空白折叠时,知道pre元素中不会发生空白折叠。因为pre元素的样式中white-space
默认为pre
。若想在pre元素以外的地方消除空白折叠,就在相应的样式表中设置:white-space: pre;
前面的white-space
设为了nowrap
也会发生空白折叠,只不过有了不换行的特点。
对于css属性white-space,目前学到了三个取值
- nomal,默认值
- pre,消除空白折叠
- nowrap,文字不换行