第七十三節，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>

 

元素可見性

使用visibility屬性能夠實現元素的可見性，這種樣式通常能夠配合JavaScript 來實現效果。樣式表以下：

屬性 　　　　　　值 　　　　　　　　 說明 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　CSS版本

visibility　　　　visible 　　　　　　 默認值，元素在頁面上可見。 　　　　　　    　　　　　　　　　　　　 2

　　　　　　　  hidden 　　　　　　元素不可見，但會佔據空間。 　　　　　　　 　　　　　　　　　　　　  2

　　　　　　　 collapse  　　　　　 元素不可見，隱藏表格的行與列，若是不是表格，則和hidden同樣。         2

table .a{
    visibility: collapse;
}

<div>
   <table border="1">
       <tr class="a">
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>
       <tr>
           <td>4</td>
           <td>5</td>
           <td>6</td>
       </tr>
   </table>
</div>

 

元素盒類型
CSS盒模型中的display屬性，能夠更改元素自己盒類型。那麼元素有哪些盒類型呢？ 主要有：1.塊級元素（區塊）；2行內元素（內聯）；3行內 塊級元素（內聯塊）；4.隱 藏元素。

1.塊級元素 （區塊）
所謂塊級元素，就是可以設置元素尺寸、隔離其餘元素功能的元素。好比：<div>、<p>等文檔元素。

2.行內元素 （內聯）
所謂行內元素，不可以設置元素尺寸，它只能自適應內容、沒法隔離其餘元素，其它元素會緊跟其後。好比：<span>、<b>等文本元素。

3.行內-塊元素 （內聯塊）
所謂行內 塊元素，能夠設置元素尺寸，但沒法隔離其餘元素的元素。好比<img>。

 

         屬性                值                    說明               　　　　CSS版本

        display         block        　　    盒子爲塊級元素             1

                            inline       　　　  盒子爲行內元素             1

                     　　 inline-block        盒子爲行內 塊元素         2

                            none                  盒子不可見，不佔位       1

 

將內聯轉換成區塊

span{
    background-color: #ff1d30;
    display: block;
}

<span>這是內聯</span>

將區塊轉換成內聯

p {
    background-color: #ff1d30;
    display: inline;
}

<p>這是區塊</p>

將塊級元素轉化成行內塊元素（內聯塊）

p{
    background-color: #ff1d30;
    display: inline-block;
}

<p>這是區塊</p>

將盒子元素隱藏，不佔位

p{
    background-color: #ff1d30;
    display: none;
}

<p>這是區塊</p>文本

 display屬性還有很是多的值，有些後面部分講解，而有些支持度很差或者尚不支持，從而省略。有興趣的，能夠參考CSS3手冊。

元素的浮動
CSS盒模型有一種叫浮動盒，就是經過float屬性創建盒子的浮動方向，樣式表以下：

         屬性               值                     說明             　　　　 CSS版本

         float             left         　　     浮動元素靠左                1

         　　　　　　 right        　        浮動元素靠右                1

                            none                  禁用浮動                      1

div {
    width: 200px;
    height: 200px;
}
.a{
    background-color: #ff1d30;
    float: right;
}
.b{
    background-color: #ffcf2c;
    float: right;
}
.c{
    background-color: #3eff51;
    float: left;
}

<div class="a">我是1</div>
<div class="b">我是2</div>
<div class="c">我是3</div>

 

清除浮動

剛纔的浮動有一個問題：當一個元素盒子被浮動後，下面的元素會自動堆疊處理，致使元素不可見或部分不可見。咱們可使用clear屬性來處理。

 

         屬性               值                    說明              　　　　　　　　　　CSS版本

 

        clear            none         　　   容許兩邊都可浮動                    　　 1

 

                           left           　　    左邊界不得浮動                              1

 

                           right           　　   右邊界不得浮動                             1

 

                           both           　　   兩邊都不得浮動 【推薦】                1

div {
    width: 200px;
    height: 200px;
}
.a{
    background-color: #ff1d30;
    float: left;
}
.b{
    background-color: #ffcf2c;
    clear: left;
}
.c{
    background-color: #3eff51;
}

<div class="a">我是1</div>
<div class="b">我是2</div>
<div class="c">我是3</div>

 

 position定位CSS中定位的使用

屬性名稱            　　屬性值              　　 說明

position            　　relative            　　設置區塊基準點爲左上角（相對定位）

                              absolute           　  設置網頁的爲基準點左上角（絕對定位）

　　　　　　　　　　static                     無設置

              

 left               　　    auto                　　以基準點定位在左邊

                               像素/百分比         　定位在左邊

 

top                　　　 auto                      以基準點定位在上邊

                               像素/百分比            定位在上邊

 

 right                       auto                      以基準點定位在右邊

                               像素/百分比            定位在右邊 

 

bottom                    auto                      以基準點定位在下邊

                               像素/百分比            定位在下邊 

 

 z-index                   auto                     自動調整高度

                                數字                      數字越大越往上層

 

 使用技巧，有時候會把父親級元素設置爲相對定位，只設置一個相對定位不設置定位值，而後將子級元素設置絕對定位

 

vertical-align內聯元素垂直位置設置

解釋：負值往下，正值往上。若是默認基線在上面，用負數。若是默認基線在下面，用正值。

              值                           說明                   　　　　　　　　　　　　 CSS版本

            長度值           　　　　設置上下的偏移量，能夠是負值                       1

            百分比           　　　　同上                                                           1

@charset "utf-8";
div{
    width: 132px;
    height: 42px;
    background-color: #4af5ff;
}
samp{
    background-color: #ff4e37;
    vertical-align: -10px;
}

<div>
    <samp>加入購物車</samp>
</div>