CSS（三）

番茄西紅柿發布于2019-04-23 13:43 / 2644人閱讀

摘要：盒子模型示意圖如下把元素叫做盒子，設置對應的樣式分別為盒子的邊框盒子內的內容和邊框之間的間距盒子與盒子之間的間距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

CSS盒子模型

盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式。盒子模型示意圖如下：

把元素叫做盒子，設置對應的樣式分別為：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

設置邊框
設置一邊的邊框，比如頂部邊框，可以按如下設置：

border-top-color:red;    /* 設置頂部邊框顏色為紅色 */  
border-top-width:10px;   /* 設置頂部邊框粗細為10px */   
border-top-style:solid;  /* 設置頂部邊框的線性為實線，常用的有：solid(實線)  
  dashed(虛線)  dotted(點線); */

上面三句可以簡寫成一句：

border-top:10px solid red;

設置其它三個邊的方法和上面一樣，把上面的top換成left就是設置左邊，換成right就是設置右邊，換成bottom就是設置底邊。

四個邊如果設置一樣，可以將四個邊的設置合并成一句：

border:10px solid red;

設置內間距padding

設置盒子四邊的內間距，可設置如下：

padding-top：20px;     /* 設置頂部內間距20px */ 
padding-left:30px;     /* 設置左邊內間距30px */ 
padding-right:40px;    /* 設置右邊內間距40px */ 
padding-bottom:50px;   /* 設置底部內間距50px */

上面的設置可以簡寫如下：

padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設置的是 上 右 下 左  
四個方向的內邊距值。 */

padding后面還可以跟3個值，2個值和1個值，它們分別設置的項目如下：

padding：20px 40px 50px; /* 設置頂部內邊距為20px，左右內邊距為40px，底部內邊距為50px */ 
padding：20px 40px; /* 設置上下內邊距為20px，左右內邊距為40px*/ 
padding：20px; /* 設置四邊內邊距為20px */

設置外間距margin

外邊距的設置方法和padding的設置方法相同，將上面設置項中的padding換成margin就是外邊距設置方法。

盒子模型的尺寸

按照下面代碼制作頁面：

通過上面的頁面得出結論：盒子的width和height設置的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：

盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

margin相關技巧
1、設置元素水平居中： margin:x auto;
2、margin負值讓元素位移及邊框合并

外邊距合并

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。解決方法如下：

1、使用這種特性
2、設置一邊的外邊距，一般設置margin-top
3、將元素浮動或者定位

margin-top 塌陷

在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設置失敗，解決方法如下：

1、外部盒子設置一個邊框
2、外部盒子設置 overflow:hidden
3、使用偽元素類：

.clearfix:before{
    content: ;
    display:table;
}

GPU云服務器云服務器三范式三分鐘三要素系列三

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2259.html

三種方法實現CSS三欄布局

摘要：本文由云社區發表作者前端林子本文會分別介紹三種實現三欄布局的方法，可在瀏覽器中打開查看效果方法一自身浮動的方法實現方法需要左欄向左浮動，右欄向右浮動，中間設左右來撐開距離實現三欄布局中間欄不要設寬度，包括左欄左浮右欄右浮，中間不本文由云+社區發表作者：前端林子本文會分別介紹三種CSS實現三欄布局的方法，可在瀏覽器中打開查看效果 1.方法一：自身浮動的方法實現方法：需要左欄向左浮...

hqman 2019-08-30 15:55 評論0 收藏0
三種方法實現CSS三欄布局

摘要：本文由云社區發表作者前端林子本文會分別介紹三種實現三欄布局的方法，可在瀏覽器中打開查看效果方法一自身浮動的方法實現方法需要左欄向左浮動，右欄向右浮動，中間設左右來撐開距離實現三欄布局中間欄不要設寬度，包括左欄左浮右欄右浮，中間不本文由云+社區發表作者：前端林子本文會分別介紹三種CSS實現三欄布局的方法，可在瀏覽器中打開查看效果 1.方法一：自身浮動的方法實現方法：需要左欄向左浮...

nodejh 2019-08-23 15:10 評論0 收藏0
三種方法實現CSS三欄布局

摘要：本文由云社區發表作者前端林子本文會分別介紹三種實現三欄布局的方法，可在瀏覽器中打開查看效果方法一自身浮動的方法實現方法需要左欄向左浮動，右欄向右浮動，中間設左右來撐開距離實現三欄布局中間欄不要設寬度，包括左欄左浮右欄右浮，中間不本文由云+社區發表作者：前端林子本文會分別介紹三種CSS實現三欄布局的方法，可在瀏覽器中打開查看效果 1.方法一：自身浮動的方法實現方法：需要左欄向左浮...

wmui 2019-08-02 14:13 評論0 收藏0
三種方法實現CSS三欄布局

摘要：本文由云社區發表作者前端林子本文會分別介紹三種實現三欄布局的方法，可在瀏覽器中打開查看效果方法一自身浮動的方法方法一自身浮動的方法實現方法需要左欄向左浮動，右欄向右浮動，中間設左右來撐開距離實現三欄布局中間欄不要設寬度，包括左欄本文由云+社區發表作者：前端林子本文會分別介紹三種CSS實現三欄布局的方法，可在瀏覽器中打開查看效果 1.方法一：自身浮動的方法實現方法：需要左欄向左浮...

gggggggbong 2019-04-23 11:50 評論0 收藏0
CSS學習筆記(四) CSS優先級

摘要：為了解決沖突，確定哪條規則勝出并最終被應用，提供了三種機制繼承層疊和特指。整個檢查更新過程結束后，再將每個標簽以最終設定的樣式顯示出來。層疊規則四順序決定權重。規則三設定的樣式勝過繼承的樣式，此時不用考慮特指度即顯式設定優先。為了解決沖突，確定哪條規則勝出并最終被應用，CSS提供了三種機制：繼承、層疊和特指。 1.繼承 CSS 中的祖先元素會向后代傳遞一樣東西：CSS屬性...

高勝山 2019-08-28 18:01 評論0 收藏0
css3 動畫（三）animation 簡介

摘要：默認，只執行一次動畫動畫名稱，該名稱為動畫關鍵幀的名稱。默認如何理解表示的是關鍵幀的名稱，那么如何定義關鍵幀呢使用。語法名稱關鍵幀樣式或總結其實也并不復雜，其有個子屬性。下一篇動畫三源碼解析通過閱讀動畫庫的源碼，來提高對中屬性的認識前言上一篇中，總結了一下 transition 以及 cubic-bezier()。本篇中，將介紹 css3 動畫中的更為靈活的動畫屬性：animati...

itvincent 2019-08-29 16:05 評論0 收藏0