盒模型应用

文章目录

盒模型应用
- 1. 改变宽高范围（box-sizing）
- 2. 改变背景覆盖范围（background-clip）
- 3. 溢出处理（overflow）
- 4. 断词规则(word-break)
- 5. 空白处理

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，文字不换行

20、CSS基础——盒模型的应用相关推荐

html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets) 盒模型盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...
利用Div CSS(嵌套盒模型)布局页面完整实例流程
Div CSS(嵌套盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
CSS——弹性盒模型(Flex)
CSS--弹性盒模型前言本文大部分参考自阮一峰老师和B站后盾人的Flex布局教程. 原文地址:
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答
一.问题(一).如何调试 IE 浏览器 1.对于IE7及以下版本可采用IETester(不能测脚本,模拟出来的IE6平台与真实的IE6还是有差异的,结果不完全可靠).Expression Web Su ...
Bluemsun第三周预习【CSS+选择器+盒模型】
Bluemsun第三周预习 CSS基础声明块样式表常见样式声明选择器选择器的组合与并列组合并列层叠与继承层叠 1.重要性 2.特殊性 3.源次序爱恨法则的原理就是比较源次序!!! ...
CSS基础——盒子模型【学习笔记】
盒子模型(Box Model) 所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 盒子模型有元素的内容.边框(border).内边距(padding).和 ...

20、CSS基础——盒模型的应用