盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
1、行盒，display等于inline的元素,不换行
2、块盒，display等于block的元素,独占一行
行盒在页面中不换行，块盒独占一行
display默认样式为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio 等和内容相关的
盒子的组成部分
无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
1、内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
2、填充 padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding：简写属性
padding： 上 右 下 左
padding: 上下 左右
padding: 上下左右 （4个方向一致）
填充区 + 内容区 = ** 填充盒 padding-box **
3、边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color 默认是字体颜色
边框+ 填充区 + 内容区= 边框盒 border-box
4、外边距 margin
边框到其他盒子的距离
margin也是有上下左右4个属性的
盒模型应用
改变宽高范围
在默认情况下，width 和 height 设置的是内容盒宽高。
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
例如我们现在要做一个 整体是 250px*50px的一个盒子
1、精确计算
/* 需要手动计算减去 padding-left 和边框的距离才可以 */
div{
height: 48px;
width: 218px;
border: 1px solid red;
line-height: 50px;
padding-left: 30px;
}
2、CSS3:box-sizing属性
div{
height: 50px;
width: 250px;
border: 1px solid red;
line-height: 50px;
padding-left: 30px;
/* 改变宽高的影响范围 */
box-sizing: border-box;
}
改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过background-clip进行修改
溢出处理
overflow,控制内容溢出边框盒后的处理方式,默认情况是可见的
断词规则
word-break,会影响文字在什么位置被截断换行
-
normal： 普通。CJK字符 （中日韩）在文字位置截断，非CJK字符（单词位置截断）
-
break-all:截断所有。所有字符都在文字处截断。
-
keep-all :保持所有。所有文字都在单词之间截断
空白处理
white-space: nowrap; 不换行
但是不换行可能会造成溢出，可以设置overflow: hidden;隐藏溢出的文字,在设置text-overflow: ellipsis;将文字溢出的部分显示...
只能控制单行文本
<!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: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, cumque.</li>
<li>Eligendi incidunt sint deleniti laboriosam sunt itaque tempora debitis ad.</li>
<li>Odit ipsam hic repellat voluptatibus, est asperiores odio amet sit.</li>
<li>Laborum beatae possimus repellendus nobis eius optio aliquid quis molestiae?</li>
<li>Nobis veniam tempora quas nemo laudantium ipsum qui ducimus ad?</li>
<li>Excepturi pariatur cumque maxime eligendi unde aliquid nesciunt aperiam dignissimos?</li>
<li>Quas quasi eos, ipsam et nobis voluptatum tempora fugit aliquam.</li>
<li>Modi fuga necessitatibus optio explicabo vitae, reprehenderit consequatur tenetur iure!</li>
<li>Veritatis laborum fugit aliquam ut mollitia, magni voluptate possimus enim!</li>
<li>Iste, nemo ex. Molestiae quasi unde, amet assumenda est illum!</li>
</ul>
</body>
</html>
网友评论