盒模型
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
行盒 | 块盒 |
---|---|
display等于inline的元素 | display等于block的元素 |
在页面中不换行 | 独占一行 |
span、a、img、video、audio (与内容相关) | 容器元素、h1~h6、p (浏览器默认样式表设置) |
display默认值为inline (没有声明display时)
盒子的组成部分
无论是行盒、还是块盒,都由下面几个部分组成,从内到外分别是:
- 内容 content
width、height,设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
- 填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
padding: 上 右 下 左 (顺时针) or 上下 左右
- 填充区+内容区 = 填充盒 padding-box
- 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式:border-style
(soild:实线)
边框宽度:border-width
边框颜色:border-color
(默认是字体颜色)
都是速写属性
- 边框+填充区+内容区 = 边框盒 border-box
- 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin
盒模型应用
改变宽高范围
默认情况下,width 和 height 设置的是内容盒宽高。
衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒
解决方法:
- 精确计算
- CSS3:box-sizing
例:
<style>
.text{
width: 100px;
height: 200px;
padding-left: 20px;
border: solid 1px red;
}
</style>
效果如下
修改如下
<style>
.text{
width: 100px;
height: 200px;
padding-left: 20px;
border: solid 1px red;
box-sizing: border-box;
}
</style>
结果如下
改变背景覆盖范围
默认情况下,背景覆盖边框盒
可以通过background-clip进行修改
.text{
width: 200px;
height: 600px;
padding: 10px;
border: 5px dashed red;
background: #008c8c;
background-clip: padding-box;
}
效果如下
溢出处理
overflow,控制内容溢出边框盒后的处理方式
visible:可见(默认)
hidden:隐藏
scroll:滚动条(可通过overflow-y(x):使滚动条只纵向(横向)出现)
auto:滚动条自动出现
断词规则
word-break,会影响文字在什么位置被截断换行
-
normal:普通。CJK字符(文字位置截断),非CJK字符(单词位置截断)
-
break-all:截断所有。所有字符都在文字处截断
-
keep-all:保持所有。所有文字都在单词之间截断
空白处理
white-space: nowrap(不换行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
border-bottom: 1px dashed #ccc;
line-height: 2;
border-left: 3px solid #008c8c;
padding-left: 10px;
margin: 1em 0;
width: 300px;
white-space: nowrap;/*不换行 */
overflow: hidden;/* 溢出隐藏 */
text-overflow: ellipsis;/*文字溢出的部分用用圆点代替*/
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Debitis facilis aperiam nam autem. Sed, quisquam velit.</li>
<li>Mollitia consequuntur veritatis doloribus odit qui fuga id!</li>
<li>Itaque quam, dolores perferendis reprehenderit harum laboriosam! Alias?</li>
<li>Enim laborum quas rem distinctio corrupti quo ad?</li>
<li>Deleniti voluptate laboriosam quos distinctio fuga, at sint!</li>
<li>Enim labore culpa soluta placeat harum, iste ex.</li>
<li>Error quibusdam quidem minus voluptas, similique aliquid iste.</li>
<li>Nemo nam sit architecto facere non, quae similique?</li>
<li>Placeat et cumque maxime minus, ducimus hic esse.</li>
</ul>
</body>
</html>
效果如下
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
只能控制单行文本
- 取消空白折叠:
white-space: pre;
行盒的盒模型
常见的行盒:包含具体内容的元素
span、strong、em、i、img、video、audio
显著特点
- 盒子沿着内容延伸
- 行盒不能设置宽高
调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。
- 内边距(填充区)
水平方向有效,垂直方向仅会影响背景,不会实际占据空间。
- 边框
水平方向有效,垂直方向不会实际占据空间。
- 外边距
水平方向有效,垂直方向不会实际占据空间。
行块盒
display:inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠
空白折叠,发生在行盒(行块盒)内部 或 行盒(行块盒)之间
可替换元素 和 非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为非可替换元素
少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素
可替换元素:img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒,盒模型中所有尺寸都有效。