概述:盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。
1.改变宽高范围
宽高衡量设计稿尺寸的时候往往使用的是**边框盒**,
但是默认情况下width和height则是设置的**内容盒**
如果想改变宽高的影响范围可以用box-sizing 声明(属性)来定义
css3:box-sizing(在这之前只能精确计算)
box-sizing:border-box;
width:238px;
height:56;
padding-left:49px;
color:#a7a7a7;
background-color:#333;
border:1px solid red;
line-height:56px;
2.改变背景覆盖范围
默认情况下,背景覆盖边框盒
可以通过background-clip进行修改
3.溢出处理
overflow:控制内容溢出边框的处理方式
4.断词规则
word-break:会影响文字在什么位置被截断换行
normal:普通.CJK字符文字位置截断,非CJK字符单词位置截断
5.空白处理
white-space:nowrap -- 不换行
text-overflow:ellipsis; --溢出部分用原点表示
<style>
li{
border-bottom: 1px dashed #ccc;
line-height: 2;
border-left: 3px solid #008c8c;
padding-left: 10px;
width: 400px;
margin: 1em 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<ul>
<li>Lorem ipsum dolor consectetur adipisicing.</li>
<li>Sequi mollitia vol Harum, aperiam eligendi!</li>
<li>Sunt porro molestias magni! Dicta, veniam.</li>
<li>Beatae laborum nsunt, natus non?</li>
<li>Illo amet molesti in porro doloremque?</li>
<li>Ipsam, aspernatur res laboriosam delectus illum.</li>
</ul>
</body>