盒模型
box：盒子，每個(gè)元素在頁(yè)面中都會(huì)生成一個(gè)矩形區(qū)域（盒子）
盒子類型：
1、行盒，display等于inline的元素,不換行
2、塊盒，display等于block的元素,獨(dú)占一行
行盒在頁(yè)面中不換行，塊盒獨(dú)占一行
display默認(rèn)樣式為inline
瀏覽器默認(rèn)樣式表設(shè)置的塊盒：容器元素、h1~h6、p
常見(jiàn)的行盒：span、a、img、video、audio 等和內(nèi)容相關(guān)的
盒子的組成部分
無(wú)論是行盒、還是塊盒，都由下面幾個(gè)部分組成，從內(nèi)到外分別是：
1、內(nèi)容 content
width、height，設(shè)置的是盒子內(nèi)容的寬高
內(nèi)容部分通常叫做整個(gè)盒子的內(nèi)容盒 content-box
2、填充 padding
盒子邊框到盒子內(nèi)容的距離
padding-left、padding-right、padding-top、padding-bottom
padding：簡(jiǎn)寫(xiě)屬性
padding： 上 右 下 左
padding: 上下 左右
padding: 上下左右 （4個(gè)方向一致）
填充區(qū) + 內(nèi)容區(qū) = ** 填充盒 padding-box **
3、邊框 border
邊框 = 邊框樣式 + 邊框?qū)挾?+ 邊框顏色
邊框樣式：border-style
邊框?qū)挾龋篵order-width
邊框顏色：border-color 默認(rèn)是字體顏色
邊框+ 填充區(qū) + 內(nèi)容區(qū)= 邊框盒 border-box
4、外邊距 margin
邊框到其他盒子的距離
margin也是有上下左右4個(gè)屬性的
盒模型應(yīng)用
改變寬高范圍
在默認(rèn)情況下，width 和 height 設(shè)置的是內(nèi)容盒寬高。
衡量設(shè)計(jì)稿尺寸的時(shí)候，往往使用的是邊框盒，但設(shè)置width和height，則設(shè)置的是內(nèi)容盒
例如我們現(xiàn)在要做一個(gè) 整體是 250px*50px的一個(gè)盒子
1、精確計(jì)算
/* 需要手動(dòng)計(jì)算減去 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;
}
改變背景覆蓋范圍
默認(rèn)情況下，背景覆蓋邊框盒
可以通過(guò)background-clip進(jìn)行修改
溢出處理
overflow,控制內(nèi)容溢出邊框盒后的處理方式,默認(rèn)情況是可見(jiàn)的
斷詞規(guī)則
word-break,會(huì)影響文字在什么位置被截?cái)鄵Q行
normal： 普通。CJK字符 （中日韓）在文字位置截?cái)啵荂JK字符（單詞位置截?cái)啵?/p>
break-all:截?cái)嗨?。所有字符都在文字處截?cái)唷?/p>
keep-all :保持所有。所有文字都在單詞之間截?cái)?/p>
空白處理
white-space: nowrap; 不換行
但是不換行可能會(huì)造成溢出，可以設(shè)置overflow: hidden;隱藏溢出的文字,在設(shè)置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>
