CSS核心屬性(下)

1. padding 內(nèi)邊距 元素內(nèi)容到元素邊框的距離
   • padding-top 上方向
   • padding-right 右方向
   • padding-bottom 下方向
   • padding-left 左方向
   • 可以使用復(fù)合寫法，不可設(shè)置負(fù)值

   div{
       padding:10px 20px 30px 40px;
   }
   

2. margin 外邊距 元素外面的空白區(qū)域
   • margin-top 上方向
   • margin-right 右方向
   • margin-bottom 下方向
   • margin-left 左方向
   • 可以使用復(fù)合寫法，可以設(shè)置負(fù)值

   div{
       margin:10px 20px 30px 40px;
   }
   

3. 元素的大小計(jì)算
   • 寬度計(jì)算 元素寬度+左右padding+左右border+左右margin
   • 高度計(jì)算 元素高度+上下padding+上下border+上下margin
4. 文檔流和脫離文檔流的margin計(jì)算區(qū)別
   • 脫離文檔流margin是上下疊加和左右疊加
   • 文檔流margin是上下重合取較大的margin值,左右疊加
5. 容器溢出屬性
   • ovsible 默認(rèn)，內(nèi)容不會(huì)被修剪，呈現(xiàn)在元素框之外
   • hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容不可見(jiàn)
   • scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條，XY軸2條都會(huì)顯示
   • auto 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條，根據(jù)實(shí)際情況顯示單條或2條滾動(dòng)條
   • inherit 規(guī)定從父元素繼承overflow的屬性

   div{
       overflow: hidden;
   }
   

6. 文本空白空間
   • normal 默認(rèn)，多余空白會(huì)被瀏覽器忽略只保留一個(gè)空格
   • pre 空白會(huì)被瀏覽器保留
   • pre-wrap 保留一部分空白符序列，但是正常的進(jìn)行轉(zhuǎn)換
   • pre-line 合并空白符序列，但是保留換行符
   • nowrap 文本不會(huì)換行，文本會(huì)在同一行上繼續(xù)，直到遇到br標(biāo)簽為止

   div{
       white-space:nowrap
   }
   

7. 文本溢出屬性
   • clip 不顯示省略號(hào)，而是簡(jiǎn)單裁剪
   • ellipsis 當(dāng)文本溢出時(shí)，顯示省略號(hào)標(biāo)記
   • 使用ellipsis屬性的前置條件
     1. 必須設(shè)置容器寬度 widht：value；(px|%皆可)
     2. 必須設(shè)置文本一行顯示 white-space: nowrap;
     3. 必須設(shè)置隱藏溢出內(nèi)容 overflow: hidden;

   div{
       width: 500px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }