第七十三節，css盒模型

標籤：

css盒模型

 

 

學習要點：
1.元素尺寸
2.元素內邊距
3.元素外邊距
4.處理溢出

 

本章主要探討HTML5中CSS盒模型，學習怎樣瞭解元素的外觀配置以及文檔的整體布局。

 

一．元素尺寸
CSS盒模型中最基礎的就是設定一個元素的尺寸大小。有三組樣式來配置一個元素的尺寸大小，樣式表如下：

         屬性                       值                                             說明                                CSS版本

        width      　　　　　 auto、長度值或百分比 　　　　       設定元素的寬度                   1

        height     　　　　    auto、長度值或百分比 　　　　       設定元素的高度                  1

      min-width  　　　　   auto、長度值或百分比 　　             設定元素最小寬度                2

     min-height 　　　　    auto、長度值或百分比 　　　　　　  設定元素最小高度                2

      max-width  　　　　  auto、長度值或百分比 　　　　        設定元素最大寬度               2

     max-height 　　　　   auto、長度值或百分比 　　　　        設定元素最大高度               2

 

width，height設定元素尺寸，元素的寬度和高度

                值                    說明

               auto　　　　　 自適應

　　　　　像素px　　　　 設定元素尺寸

　　　　　百分比　　　　  設定元素百分比尺寸，相對於父元素來衡定的

div{    background-color: #ff1c19;    width: 400px;    height: 200px;}<div>    <p>你好</p></div>

 

min-width,min-height設定元素最小寬度和最小高度

                值                    說明

               auto　　　　　 自適應

　　　　　像素px　　　　 設定元素尺寸

　　　　　百分比　　　　  設定元素百分比尺寸，相對於父元素來衡定的

div{    background-color: #ff1c19;    min-width: 400px;    min-height: 200px;    width: 200px;    height: 100px;}<div>    <p>你好</p></div>

 

max-width，max-height設定元素最大寬度和最大高度

                值                    說明

               auto　　　　　 自適應

　　　　　像素px　　　　 設定元素尺寸

　　　　　百分比　　　　  設定元素百分比尺寸，相對於父元素來衡定的

div{    background-color: #ff1c19;    max-width: 200px;    max-height: 100px;    width: 400px;    height: 200px;}<div>    <p>你好</p></div>

 

二．元素內邊距 

CSS盒模型中可以設定元素內部邊緣填充空白的大小，我們成為內邊距。樣式表如下：

          屬性                   　　　　　　值                  　　　　　　說明         　　　　　　CSS版本

       padding-top        　　　　  長度值或百分比             　   設定頂部內邊距                   1

     padding-bottom       　　　  長度值或百分比             　   設定底部內邊距              　  1

      padding-left        　　　　   長度值或百分比             　   設定左邊內邊距                   1

      padding-right       　　　　  長度值或百分比            　　 設定右邊內邊距              　  1

         padding       　　　　　　 1~ 4個長度值或百分比 　　   簡寫屬性                           1

div{    background-color: #ff1c19;    width: 400px;    height: 200px;}div > p{    background-color: #36ff1d;    padding-top: 20px;    padding-bottom: 40px;    padding-left: 60px;}<div>    <p>你好</p></div>

內邊距簡寫格式，上右下左

div{    background-color: #ff1c19;    width: 400px;    height: 200px;}div > p{    background-color: #36ff1d;    padding: 10px 20px 10px 20px;}<div>    <p>你好</p></div>

 

三．元素外邊距

CSS盒模型中可以設定元素外部邊緣填充空白的大小，我們成為外邊距。樣式表如下：

           屬性                  　　　　 值                　　　　　　 說明           　　　　　　SS版本

       margin-top         　　       長度值或百分比            　　設定頂部內邊距               1

      margin-bottom       　　    長度值或百分比                  設定底部內邊距               1

       margin-left        　　        長度值或百分比            　　設定左邊內邊距               1

      margin-right        　　　　 長度值或百分比            　　設定右邊內邊距               1

          margin       　　　　　　1 ~ 4長度值或百分比          簡寫屬性                        1

div{    background-color: #ff1c19;    width: 400px;    height: 200px;}div > p{    background-color: #36ff1d;    width: 200px;    height: 100px;    margin-top: 30px;    margin-bottom: 30px;    margin-left: 30px;}<div>    <p>你好</p></div>

外邊距簡寫格式，上右下左

div{    background-color: #ff1c19;    width: 400px;    height: 200px;}div > p{    background-color: #36ff1d;    width: 200px;    height: 100px;    margin: 10px 20px 30px 40px;}<div>    <p>你好</p></div>

 

四．處理溢出 

當設定了元素固定尺寸且內容過大時，就會出現溢出的問題。溢出主要朝兩個方向：右側和底部。我們可以通過overflow系列樣式來控制它。

      　　屬性             　　值                 　　 說明                 　　　　　　CSS版本

      overflow-x      　　溢出值        　　　　設定水平方向的溢出                 3

      overflow-y      　　溢出值        　　　　設定垂直方向的溢出                 3

       overflow       　　 溢出值        　　　　簡寫屬性                           　  2

以上溢出處理主要有四種處理值：

         值        　　　　 說明

        auto        　　  瀏覽器自行處理溢出內容。如果有溢出內容，就顯示捲軸，否則就不顯示捲軸。         

       hidden      　　  如果有溢出的內容，直接剪掉。

       scroll       　　   不管是否溢出，都會出現捲軸。但不同平台和瀏覽器顯示方式不同。      

       visible       　　  預設值，不管是否溢出，都顯示內容。

div{    background-color: #ff1c19;    width: 400px;    height: 200px;}div > p{    background-color: #36ff1d;    width: 200px;    height: 100px;    overflow-y: hidden;}<div>    <p>簡介：當梁宇方決意不出席鉑爾曼酒店十五周年慶酒會的時候，他的父親，也是酒店董事長的梁澤，以及總經理梁宇青，正殷殷期盼著能夠在這個酒會上正式將他介紹出來。無心接班的宇方竟然藏身在馬場和分別六年的愛馬Sky馳騁草原。宇青的突然現身馬場令他無所遁行，就這樣被壓回了酒店準備亮相。但宇方仍不甘示弱，仍伺機逃跑… 小歌星杜允兒來到酒店接周年慶的暖場演唱，向天微義不容辭同行來幫忙，兩人倉皇找著</p></div>

 

第七十三節，css盒模型