box:? 盒子，每個(gè)元素在頁(yè)面中都會(huì)生成一個(gè)矩形區(qū)域（盒子）

盒子類型：

1.? 行盒? ? ?display等于inline的元素

2.? 塊盒? ? ?display等于block的元素

行盒在頁(yè)面中獨(dú)占一行，塊盒在頁(yè)面中不換行

注：沒有行級(jí)元素和塊級(jí)元素的叫法，因?yàn)樵厥莌tml的范疇，而html與顯示無(wú)關(guān)，具有語(yǔ)義化。行盒和塊盒是css的范疇，是顯示的特征，所以行級(jí)元素和塊級(jí)元素應(yīng)該叫做行盒和塊盒。

display默認(rèn)值是inline，該元素不能繼承

瀏覽器默認(rèn)樣式表設(shè)置的塊盒：容器元素、h1~h6、p

常見的行盒：span、a、img、video、audio

盒子的組成部分

從內(nèi)到外分別是：內(nèi)容content、填充padding、邊框border、外邊距margin

內(nèi)容部分通常叫做整個(gè)盒子的內(nèi)容盒? content-box

填充(內(nèi)邊距) 是盒子邊框到盒子內(nèi)容的距離

填充區(qū)+內(nèi)容區(qū)? =? ?填充盒? ?padding-box

邊框? =? 邊框樣式? border-style? +? 邊框?qū)挾? border-width? +? 邊框顏色? ?border-color

邊框樣式默認(rèn)為none，顏色默認(rèn)是字體的顏色

邊框? +? ?填充區(qū)? +? 內(nèi)容區(qū)? =? 邊框盒? ?border-box

外邊距：邊框到其它盒子的距離

簡(jiǎn)寫屬性（速寫屬性）

盒模型的應(yīng)用

1. 改變寬高范圍??

默認(rèn)情況下，width和height設(shè)置的是內(nèi)容盒寬高。

- 頁(yè)面重構(gòu)師：將psd文件(設(shè)計(jì)稿)制作為靜態(tài)頁(yè)面

衡量設(shè)計(jì)稿尺寸的時(shí)候，往往使用的是邊框盒，但設(shè)置width和height，則設(shè)置的是內(nèi)容盒

1.? 精確計(jì)算? 2.? css3? ：box-sizing （改變寬高的影響范圍）

單行文字居中：設(shè)置line-height

2.? 改變背景覆蓋范圍

默認(rèn)情況下，背景覆蓋邊框盒

可以通過(guò)background-clip修改

3.? 溢出處理

overflow，控制內(nèi)容溢出邊框盒后的處理方式，默認(rèn)是可見的 visible? 還有hidden、scroll、auto

4.? 斷詞規(guī)則

word-break，會(huì)影響文字在什么位置被截?cái)鄵Q行，

取值有：normal，普通，cjk字符（文字位置截?cái)啵?，是默認(rèn)。非cjk字符（單詞位置截?cái)啵??

? ? break-all：所有字符都在文字處截?cái)唷?/p>

keep-all：保持所有。所有文字都在單詞之間截?cái)唷?/p>

5.? 空白處理

white-space：nowrap? 再加上? overflow：hidden和text-overflow：ellipsis? 只能控制單行文本，多行需要使用js處理

默認(rèn)值是normal，還有pre

談?wù)勀銓?duì)CSS盒模型的認(rèn)識(shí)？ - 穿越時(shí)光機(jī) - 博客園

前端面試題之CSS盒模型_simeng-han的博客-CSDN博客_盒模型面試題

介紹一下box-sizing屬性？

box-sizing屬性主要用來(lái)控制元素的盒模型的解析模式。默認(rèn)值是content-box。

content-box：讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高

border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）。設(shè)置width/height屬性指的是border + padding + content

標(biāo)準(zhǔn)瀏覽器下，按照W3C規(guī)范對(duì)盒模型解析，一旦修改了元素的邊框或內(nèi)距，就會(huì)影響元素的盒子尺寸，就不得不重新計(jì)算元素的盒子尺寸，從而影響整個(gè)頁(yè)面的布局。