盒模型及盒模型應用

盒模型

box: 盒子，在每個元素在頁面中都會生成一個矩形區域（盒子）

盒子類型：

1. 行盒，display等於inline的元素
2. 塊盒，display等於block的元素

行盒在頁面中不換行、塊盒獨佔一行

display默認值爲inline

瀏覽器默認樣式表設置的塊盒：容器元素、h1~h6、p

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

盒子的組成部分

1. 內容 content

   width、height，設置的是盒子內容的寬高

   內容部分通常叫做整個盒子的內容 context-box

2. 填充 padding

   盒子邊框到盒子內容的距離

   padding-top、padding-right、padding-bottom、padding-left

   padding：簡寫屬性

   padding：上 右 下 左

   填充區 + 內容區 = 填充盒 padding-box

3. 邊框 border

   邊框 = 邊框樣式 + 邊框寬度 + 邊框顏色

   邊框樣式： border-style
   邊框寬度： border-width
   邊框顏色： border-color

   邊框+填充區+內容區 = 邊框盒 border-box

4. 外邊框 margin

   邊框到其它盒子的距離

   margin-top、margin-left、margin-right、margin-bottom

   速寫屬性margin

盒模型應用

改變寬高範圍

默認情況下，width 和 height 設置的內容盒寬高

頁面重構師：將psd文件（設計稿）製作爲靜態頁面

衡量設計稿尺寸的時候，往往使用的是邊框盒，但設置width和height，則設置的是內容盒

1. 精確計算
2. CSS3：box-sizing 盒子的大小自動計算

<div></div>

 div{
        width: 200px;
        height: 200px;
        background-color: #f00;
        box-sizing: border-box;
        padding-left:10px;
        border:6px solid #00f;
    }

改變背景覆蓋範圍

默認情況下，背景覆蓋邊框盒

可以通過background-clip進行修改

div{
       width: 200px;
       height: 200px;
       background-color: #f00;
       border:20px dashed #00f;
       background-clip: content-box;
   }

溢出處理

overflow,控制內容溢出邊框盒後的處理方式

斷詞規則

word-break, 會影響文字在什麼位置被截斷換行

normal：普通。CJK字符(文字位置截斷)，非CJK字符(單詞位置截斷)

break-all: 截斷所有,所有字符都在文字處截斷

keep-all: 保持所有,所有文字都在單詞之間截斷

空白處理

white-space: nowrap;

 ul li{
         border-bottom: 1px dashed #ccc;
         border-left: 3px solid #008c8c;
         line-height: 2;
         padding-left: 10px;
         width: 300px;
         margin: 1em 0;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }

<ul>
     <li>Lorem ipsum dolor sit amet.</li>
     <li>Eaque quae cupiditate velit eveniet.</li>
     <li>Delectus, nobis? Quibusdam, odit quidem.</li>
     <li>Dignissimos est ut amet corrupti?</li>
     <li>Labore eveniet atque quas nisi.</li>
     <li>Ut voluptates dicta fuga id!</li>
     <li>Optio voluptatem animi libero. Accusantium.</li>
     <li>In officia ducimus quam omnis!</li>
     <li>Voluptas similique animi ratione eaque.</li>
     <li>Eaque minima recusandae hic modi.</li>
 </ul>