【前端之旅】CSS 三萬字總結（前端進階之旅）
一名軟件工程專業學生的前端之旅，記錄自己對三件套（HTML、CSS、JavaScript）、jquery、Node.js、Vue、axios、小程序開發（uniapp）以及各種UI組件庫、前端框架的學習。
【前端之旅】Web基礎與開發工具
【前端之旅】HTML 大總結
@[TOC](CSS 三萬字總結)
一、CSS簡介
1、什么是CSS
CSS全稱Cascading Style Sheet 層疊樣式表
是一組樣式設置的規則，用于控制頁面的外觀樣式
2、CSS的好處及作用
可以實現內容與樣式的分離，便于開發，樣式復用，便于網站的后期維護。
頁面的精確控制，讓頁面更精美。
頁面外觀美化：字體，顏色，邊距，高度，寬度，背景圖片，網頁定位，網頁浮動，布局和定位。
3、CSS的初體驗
CSS測試
效果如下：
二、基本用法
1、CSS語法模板
1、CSS的定義是由三個部分構成：
① 選擇符（selector）：樣式要應用于哪些元素
② 屬性（properties）：何種樣式，如字體，顏色
③ 屬性的取值（value）：樣式的取值：如12px
2、基本格式如下：
h1 {
color: crimson;
}
（選擇符 { 屬性:值 }）
3、如果需要對一個選擇符指定多個屬性時，用分號將所有的屬性和值分開：
p { text-align: center; color: red}
（段落居中排列;并且段落中的文字為紅色）
2、CSS引用方式
CSS引用方式有三種方式：
行內樣式（直接寫在標簽內）
內部樣式（寫在style標簽內）
外部樣式（使用外部.css文件）
使用HTML標簽的style屬性定義，只對設置style屬性的標簽起作用，一般用于測試，不用于實際開發頁面中。
優勢：直觀，很容易區分是給哪個標簽添加的樣式 。
劣勢：代碼冗余，樣式過多的話，代碼的可讀性很差。
我是一個段落標簽
在頁面頭部< head > 標簽內通過style標簽定義，對當前頁面中所有符合樣式選擇器的標簽都起作用。
優勢：實現了標簽和樣式的分離，讓代碼的可讀性更高。
我是一個段落標簽
使用單獨的 .css 文件定義，然后在頁面中使用 link標簽 或 @import指令 引入，最常用。
引入方式：外部樣式（有兩種）：鏈接式和導入式。
優勢:實現了html文件和樣式的分離，讓代碼的可讀性更高，而且讓代碼的復用性也更高！
index.css
p{ color:red; font-size:30px }
index.html
我是一個段落標簽
無論是外部樣式，內部樣式還是行內樣式，都會生效都能起到為標簽添加樣式，進行布局的作用。但是如果同時使用多種引入方式,就會產生覆蓋效果，后寫的樣式覆蓋先寫的樣式。
一般自己寫案例時多使用內部樣式，這樣進行文件交換只發一個文件比較方便。 但在實際開發中我們基本不使用行內樣式，使用最多的是外部樣式引入方式！
3、選擇器
選擇器的用處：用于準確的選中元素（就是HTML種講的標簽），并賦予CSS樣式。
作用：根據標簽的名字找到標簽，但是標簽選擇器會找到所有同名選擇器。
我是段落標簽1
我是段落標簽2
作用：通過標簽的class屬性，選擇對應的標簽元素，類選擇器的作用對多個標簽（往往需要相同的樣式）設置樣式，一個標簽可以設置多個class值，值與值之間用空格隔開，這個標簽會具有所有class包含的樣式。
我是段落標簽1
我是段落標簽2
我是段落標簽3
作用：通過標簽的id屬性，選擇對應的元素。類選擇器可以選擇多個，因為class屬性不唯一，但是id選擇器只能選擇一個，因為id是唯一的。
我是段落標簽
群組選擇器是可以同時選擇多個標簽的選擇器,全選擇器顧名思義就是選擇全部的標簽。
我是段落標簽
我是文本標簽我是一級標簽
我是二級標簽
我是三級標簽
層次選擇器又分為后代選擇器、子代選擇器、相鄰選擇器、兄弟選擇器。層次選擇器是通過層次嵌套的關系進行選擇標簽的，塊狀標簽可以嵌套內聯標簽（行內元素）和其他塊狀標簽；內聯標簽只能嵌套文本和其他內聯標簽,但不能嵌套塊狀標簽。
- 我是有序列表1
- 我是有序列表2
- 我是有序列表3
- 我是有序列表11
- 我是有序列表22
- 1
- 2
- 3
- 11
- 22
- 33
我是段落標簽1
我是段落標簽2
我是段落標簽3
我是段落標簽4
我是段落標簽1
我是段落標簽2
我是段落標簽3
我是段落標簽4
我是段落標簽1
我是段落標簽2
我是段落標簽3
我是段落標簽4
偽（虛）類可以看做是一種特殊的類選擇符，是能被支持CSS的瀏覽器自動所識別的特殊選擇符。
最常見的用處就是可以對鏈接在不同狀態下定義不同的樣式效果。
格式 ：選擇符:偽類 {屬性: 值}
偽類和類不同，是CSS已經定義好的，不能像類選擇符一樣隨意用別的名字，根據上面的語法可以解釋為對象（選擇符）在某個特殊狀態下（虛類）的樣式。
使用偽類設置鏈接不同狀態的樣式
4種a（錨）元素的偽類，可表示鏈接在4種不同的狀態：link、visited、active、hover。
如果要給一個元素加4個偽類，一定要遵守一個順序（link visited hover active）
效果如下：
狀態說明：初始時未點擊時是藍色，當鼠標放上去后（懸停狀態）是紅色，點擊狀態下是綠色，點擊后離開是粉紅色。
選擇器權重：選擇器權重值高，則應用其選擇器樣式對標簽進行修飾。
內聯樣式，如: style=” ”，權值為1000。
ID選擇器，如：#content，權值為100。
類、偽類和屬性選擇器，如.content，權值為10。
標簽選擇器、層次選擇器、偽元素選擇器，如div p，權值為1。
!important(并不是選擇器而是修飾某個樣式的值)>id選擇器 > 類選擇器> 標簽選擇器> 通配符選擇器
權重高低通過精確度評判，精確度越高，權重越大。
復合選擇器的權重計算方式一：
將基本選擇器的權重相加之和，就是權重大小，值越大，權重越高。
比如：
#box ul li a .cur 權重是 100+1+1+1+10 = 113
#box li .cur 權重是 100+1+10 = 111
那么后面的樣式就會被前面的樣式層疊掉,那么最終a的顏色是red
復合選擇器的權重計算方式二：
4個0計算方式 （0,0,0,0）分別對應（行內式個數,id選擇器個數,類選擇器個數,標簽選擇器個數）
兩個選擇器通過對比4個數的大小，確定權重關系，如何理解？
例如：#box ul li a .cur 有1個id，3個標簽，1個類 那么 4個0 就是 (0,1,1,3)
例如：.nav ul .active .cur 有0個id，1個標簽，3個類 那么 4個0 就是 (0,0,3,1)
怎么比較大小呢？
先比較第一個數，兩個都是0，所以對比第二個數，因為第一個選擇器第二個數是1，而后一個選擇器權重是0所以前面的選擇器權重大。
4、設置字體樣式
常用的字體樣式主要有5種：字體顏色 、字體樣式、字體大小、字體粗細、字體傾斜
這是第一個段落標簽
這是第二個段落標簽
這是第三個段落標簽
5、設置文本樣式
常用的文本樣式主要有8種：對齊方式 、行高、縮進、文本線處理、字距詞距、文本換行、內容文本溢出處理。
我是一個段落我是一個段落 我是一個段落我是一個段落 我是一個段落我是一個段落 我是一個段落我是一個段落 我是一個段落我是一個段落 我是一個段落我是一個段落 我是一個段落我是一個段落 我是一個段落我是一個段落 我是一個段落我是一個段落 我是一個段落我是一個段落 我是一個段落我是一個段落
我是一個即將被改造的鏈接行高的應用：通過行高等于高度，實現單行文本居中對齊。
6、設置背景樣式
常用背景樣式中有5個主要的背景屬性：
background-color: 指定填充背景的顏色。
background-image: 引用圖片作為背景。
background-position: 指定元素背景圖片的位置。
background-repeat: 決定是否重復背景圖片。
background-attachment: 決定背景圖是否隨頁面滾動。
這里是用來放置背景的哦
背景定位(background-position)
background-position 屬性（background-position: 值1 值2）用來控制背景圖片在元素中的位置，實際上指定的是圖片左上角相對于元素左上角的位置。
下面的例子中，設置了一個背景圖片并且設置了 background-repeat 為 no-repeat,用 background-position 屬性來控制它的位置，其中第一個數字表示 x 軸(水平)位置，第二個是 y 軸(垂直) 位置。
/* 例 1: 默認值 */background-position: 0 0; 例 2: 把圖片向右移動 */background-position: 75px 0; 例 3: 把圖片向左移動*/background-position: -75px 0; 例 4: 把圖片向下移動 */background-position: 0 100px; */
background-position 屬性可以用其它數值，比如關鍵詞和百分比來指定，這比較實用，尤其是在元素尺寸不是用像素設置時。
關鍵詞：通過設置X軸與Y軸來進行圖片定位。
x 軸上：left center right
y 軸上：top center bottom
百分數:瀏覽器是以元素的百分比數值來設置圖片的位置的。順序方面和使用像素值時的順序幾乎一樣，首先是 x 軸，其次是 y 軸
background-position: right top;background-position: 100% 50%;
7、設置列表樣式
ul li ：list-style
none:去掉原點
circle：空心圓
decimal：數字
square：正方形
三、盒子模型
在Html學習中，我們知道Html中的每個元素（標簽），都有自己的大小（占地面積），了解每個元素的大小，有助于我們更好的對頁面進行布局，通過盒子模型的特征進行布局，是HTML布局的主要方式之一。
什么是盒子模型？
可以把頁面上的每一個元素看成一個盒子，這是一個抽象的概念。
盒子模型的組成：盒子模型由內容（通過width和height指定的大小區域），內邊距（內容區域和外框之間的空隙），邊框（border）和外邊距（當前元素和其他元素之間的距離）組成。
盒子由外邊距、邊框、內邊距和內容組成
背景應用于由內容和內邊距、邊框組成的區域
width 和 height 指的是內容區域的寬度和高度
盒子實際占有寬度（或高度）為“內容+內邊距+邊框+外邊距”。
1、盒子模型之內容
content：盒子里的“物品”，即盒子模型必須有的部分，可以是文字、圖片、超鏈接，或其它盒子等。
內容的大小由寬度和高度屬性定義
對于塊級(display: block)元素：(缺省的寬度為充滿父元素寬度，缺省的高度為內容的高度)可以通過定義寬度和高度改變大小。
對于行內 (display: inline)元素：（缺省的寬度為內容的寬度，缺省的高度為內容的高度）不可以通過定義寬度和高度改變大小。
常見的塊級元素：
, ,
,
, 和 - 。
常見的行內元素： , ,
如內容過多，超過盒子的寬度和高度時，盒子的高度將自動放大，可使用overflow屬性定義超出時的處理方式
塊級（block）元素的特點：
總是在新行上開始（除非浮動）
寬度、高度，行高以及四周的內、邊距都可控制
寬度缺省是它的容器的100%減去內、外邊距和邊框，除非設定一個寬度
, ,
, 和 - 是塊元素的例子。
行內（inline）元素的特點：
和其他inline（及inline-block)元素處在同一行上
寬度和高度均由內容決定，不可改變，但可以設置四周的內邊距
只可設置左、右外邊距，上、下外邊距無效
, ,
行內元素與塊級元素的轉換可使用display屬性改變塊級、行內元素盒子的類型。
display 語法格式：
display：none | block | inline | inline-block | inline-table | list-item
聲明為none時元素被隱藏，同時不再占據空間（注意與visibility: hidden的區別)
聲明為block時，元素為塊級元素，block是p、div等標記的默認display屬性值
聲明為inline時，元素為行內元素，inline是span、a等標記的默認display屬性值
聲明為inline-block類型的元素為行內塊級元素，特性：
1、如未設置width和height，特性同inline類型元素
2、當設置width和height后，按指定的大小顯示，但同其它inline及inline-block元素處于同一行中
table元素默認為block，如修改為inline-table，則顯示為行內元素。
display:none; 不顯示該元素，也不會保留該元素原先占有的文檔流位置。
display:block; 轉換為塊級元素。
display:inline; 轉換為行內元素。
display:inline-block; 轉換為行內塊級元素。
當內容超過寬度、高度定義的區域時，由overflow屬性定義顯示方式。
overflow: auto | visible | hidden | scroll
visible：對溢出內容不做處理，內容可能會超出容器，默認值。
hidden：隱藏溢出容器的內容且不出現滾動條。
scroll：隱藏溢出容器的內容，溢出的內容將以卷動滾動條的方式呈現，總是出現滾動條。
auto：當內容沒有溢出容器時不出現滾動條，當內容溢出容器時出現滾動條，按需出現滾動條。
auto 與 scroll取值的區別：auto僅在內容大于元素寬、高時出現滾動條，而scroll總是出現滾動條。
2、盒子模型之邊框
border： 定義處于外邊距和內邊距之間分界線。
其中 border-width、border-style、border-color分別定義邊框的寬度、樣式和顏色
border-width： | thin | medium | thick
border-style：none | hidden | dotted (點線) | dashed (虛線)| solid (實線) | double (雙線) | groove | ridge | inset | outset
border-color：
復合樣式：可以直接在border屬性后加3個對應值：
如：border: 1px solid red;
邊框多種屬性可以用來設置上下左右邊框的顏色、樣式、寬度。
盒子模型之邊框 邊框效果：
使用boreder-radius來定義圓角，使用一個半徑時確定一個圓形，當使用兩個半徑時確定一個橢圓。這個(橢)圓與邊框的交集形成圓角效果。
圓角邊框的四角分別設置：border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius。
border-radius 語法屬性：
定義圓形半徑或橢圓的半長軸，半短軸。負值無效。
使用百分數定義圓形半徑或橢圓的半長軸，半短軸。水平半軸相對于盒模型的寬度；垂直半軸相對于盒模型的高度。負值無效。
border-radius: 30px;
border-radius: 25% 10%;
border-radius: 10% 50%;
3、盒子模型之內邊距
padding：定義元素的內邊距，有時又稱為“填充”。
語法格式：padding: length;
length可以是長度值，也可以是百分比
當取值為百分比是，相對于父元素寬度(width)
當使用em單位時，相對于當前元素文字大小(font-size)
可以使用padding-top、padding-bottom、padding-left和padding-right分別定義上、下左和右的內邊距。
設置盒子內邊距樣式時需注意：
設置內邊距時不能設置負值。
設置內邊距時，內邊距會自動把邊框撐大，以適應設置的內邊距。
盒子模型之內邊距 萬維網上的一個超媒體...... 內邊距效果：
4、盒子模型之外邊距
margin:定義盒子之間的距離，外邊距有時又稱為“邊界”。
語法格式：margin: auto | length;
length是長度或百分比值（百分比值是基于父對象的寬度(width)）
當使用em單位時，相對于當前元素文字大小(font-size)
可以使用margin-top, margin-bottom, margin-left和margin-right分別定義四周的外邊距
左、右邊距為auto時可實現元素的居中
長度可以是負值，實現盒子間的重疊效果
對于行內元素，只有左、右外邊距有效，上、下外邊距無效，塊級元素的垂直相鄰外邊距會合并
浮動元素的外邊距不會合并。
margin的簡寫
/* 四周外邊距全為10像素 */ margin: 10px; /* 上、下外邊距為10像素，左、右20像素 */ margin: 10px 20px; /*上外邊距為10像素，左、右20像素，下外邊距為30像素 */ margin: 10px 20px 30px; /*上外邊距為10像素，右20像素，下30像素，左40像素（順時針） */ margin: 10px 20px 30px 40px;
盒子模型之外邊距 外邊距效果：
兄弟塊級元素之間的豎直margin會“塌陷”，實際距離為兩個邊距中的較大者。
塊元素1 塊元素2 所以我們進行div布局的時候一般首先使用通配符選擇設置外邊框與內邊距為零。
* {margin: 0; padding: 0;}
當父、子元素的上、下外邊距緊貼在一起時（沒有邊框、內邊距或內容分隔時），父、子元素的上、下外邊距重疊在一起，出現在父元素外側，大小為父、子元素外邊距中的較大者。
CSS web前端 容器
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
常見的行內元素： , ,
如內容過多，超過盒子的寬度和高度時，盒子的高度將自動放大，可使用overflow屬性定義超出時的處理方式
塊級（block）元素的特點：
總是在新行上開始（除非浮動）
寬度、高度，行高以及四周的內、邊距都可控制
寬度缺省是它的容器的100%減去內、外邊距和邊框，除非設定一個寬度
, ,
,
, 和 - 是塊元素的例子。
行內（inline）元素的特點：
和其他inline（及inline-block)元素處在同一行上
寬度和高度均由內容決定，不可改變，但可以設置四周的內邊距
只可設置左、右外邊距，上、下外邊距無效
, ,
行內元素與塊級元素的轉換可使用display屬性改變塊級、行內元素盒子的類型。
display 語法格式：
display：none | block | inline | inline-block | inline-table | list-item
聲明為none時元素被隱藏，同時不再占據空間（注意與visibility: hidden的區別)
聲明為block時，元素為塊級元素，block是p、div等標記的默認display屬性值
聲明為inline時，元素為行內元素，inline是span、a等標記的默認display屬性值
聲明為inline-block類型的元素為行內塊級元素，特性：
1、如未設置width和height，特性同inline類型元素
2、當設置width和height后，按指定的大小顯示，但同其它inline及inline-block元素處于同一行中
table元素默認為block，如修改為inline-table，則顯示為行內元素。
display:none; 不顯示該元素，也不會保留該元素原先占有的文檔流位置。
display:block; 轉換為塊級元素。
display:inline; 轉換為行內元素。
display:inline-block; 轉換為行內塊級元素。
當內容超過寬度、高度定義的區域時，由overflow屬性定義顯示方式。
overflow: auto | visible | hidden | scroll
visible：對溢出內容不做處理，內容可能會超出容器，默認值。
hidden：隱藏溢出容器的內容且不出現滾動條。
scroll：隱藏溢出容器的內容，溢出的內容將以卷動滾動條的方式呈現，總是出現滾動條。
auto：當內容沒有溢出容器時不出現滾動條，當內容溢出容器時出現滾動條，按需出現滾動條。
auto 與 scroll取值的區別：auto僅在內容大于元素寬、高時出現滾動條，而scroll總是出現滾動條。
2、盒子模型之邊框
border： 定義處于外邊距和內邊距之間分界線。
其中 border-width、border-style、border-color分別定義邊框的寬度、樣式和顏色
border-width： | thin | medium | thick
border-style：none | hidden | dotted (點線) | dashed (虛線)| solid (實線) | double (雙線) | groove | ridge | inset | outset
border-color：
復合樣式：可以直接在border屬性后加3個對應值：
如：border: 1px solid red;
邊框多種屬性可以用來設置上下左右邊框的顏色、樣式、寬度。
盒子模型之邊框 邊框效果：
使用boreder-radius來定義圓角，使用一個半徑時確定一個圓形，當使用兩個半徑時確定一個橢圓。這個(橢)圓與邊框的交集形成圓角效果。
圓角邊框的四角分別設置：border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius。
border-radius 語法屬性：
定義圓形半徑或橢圓的半長軸，半短軸。負值無效。
使用百分數定義圓形半徑或橢圓的半長軸，半短軸。水平半軸相對于盒模型的寬度；垂直半軸相對于盒模型的高度。負值無效。
border-radius: 30px;
border-radius: 25% 10%;
border-radius: 10% 50%;
3、盒子模型之內邊距
padding：定義元素的內邊距，有時又稱為“填充”。
語法格式：padding: length;
length可以是長度值，也可以是百分比
當取值為百分比是，相對于父元素寬度(width)
當使用em單位時，相對于當前元素文字大小(font-size)
可以使用padding-top、padding-bottom、padding-left和padding-right分別定義上、下左和右的內邊距。
設置盒子內邊距樣式時需注意：
設置內邊距時不能設置負值。
設置內邊距時，內邊距會自動把邊框撐大，以適應設置的內邊距。
盒子模型之內邊距 萬維網上的一個超媒體...... 內邊距效果：
4、盒子模型之外邊距
margin:定義盒子之間的距離，外邊距有時又稱為“邊界”。
語法格式：margin: auto | length;
length是長度或百分比值（百分比值是基于父對象的寬度(width)）
當使用em單位時，相對于當前元素文字大小(font-size)
可以使用margin-top, margin-bottom, margin-left和margin-right分別定義四周的外邊距
左、右邊距為auto時可實現元素的居中
長度可以是負值，實現盒子間的重疊效果
對于行內元素，只有左、右外邊距有效，上、下外邊距無效，塊級元素的垂直相鄰外邊距會合并
浮動元素的外邊距不會合并。
margin的簡寫
/* 四周外邊距全為10像素 */ margin: 10px; /* 上、下外邊距為10像素，左、右20像素 */ margin: 10px 20px; /*上外邊距為10像素，左、右20像素，下外邊距為30像素 */ margin: 10px 20px 30px; /*上外邊距為10像素，右20像素，下30像素，左40像素（順時針） */ margin: 10px 20px 30px 40px;
盒子模型之外邊距 外邊距效果：
兄弟塊級元素之間的豎直margin會“塌陷”，實際距離為兩個邊距中的較大者。
塊元素1 塊元素2 所以我們進行div布局的時候一般首先使用通配符選擇設置外邊框與內邊距為零。
* {margin: 0; padding: 0;}
當父、子元素的上、下外邊距緊貼在一起時（沒有邊框、內邊距或內容分隔時），父、子元素的上、下外邊距重疊在一起，出現在父元素外側，大小為父、子元素外邊距中的較大者。
CSS web前端 容器
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
行內（inline）元素的特點：
和其他inline（及inline-block)元素處在同一行上
寬度和高度均由內容決定，不可改變，但可以設置四周的內邊距
只可設置左、右外邊距，上、下外邊距無效
, ,
行內元素與塊級元素的轉換可使用display屬性改變塊級、行內元素盒子的類型。
display 語法格式：
display：none | block | inline | inline-block | inline-table | list-item
聲明為none時元素被隱藏，同時不再占據空間（注意與visibility: hidden的區別)
聲明為block時，元素為塊級元素，block是p、div等標記的默認display屬性值
聲明為inline時，元素為行內元素，inline是span、a等標記的默認display屬性值
聲明為inline-block類型的元素為行內塊級元素，特性：
1、如未設置width和height，特性同inline類型元素
2、當設置width和height后，按指定的大小顯示，但同其它inline及inline-block元素處于同一行中
table元素默認為block，如修改為inline-table，則顯示為行內元素。
display:none; 不顯示該元素，也不會保留該元素原先占有的文檔流位置。
display:block; 轉換為塊級元素。
display:inline; 轉換為行內元素。
display:inline-block; 轉換為行內塊級元素。
當內容超過寬度、高度定義的區域時，由overflow屬性定義顯示方式。
overflow: auto | visible | hidden | scroll
visible：對溢出內容不做處理，內容可能會超出容器，默認值。
hidden：隱藏溢出容器的內容且不出現滾動條。
scroll：隱藏溢出容器的內容，溢出的內容將以卷動滾動條的方式呈現，總是出現滾動條。
auto：當內容沒有溢出容器時不出現滾動條，當內容溢出容器時出現滾動條，按需出現滾動條。
auto 與 scroll取值的區別：auto僅在內容大于元素寬、高時出現滾動條，而scroll總是出現滾動條。
2、盒子模型之邊框
border： 定義處于外邊距和內邊距之間分界線。
其中 border-width、border-style、border-color分別定義邊框的寬度、樣式和顏色
border-width：
border-style：none | hidden | dotted (點線) | dashed (虛線)| solid (實線) | double (雙線) | groove | ridge | inset | outset
border-color：
復合樣式：可以直接在border屬性后加3個對應值：
如：border: 1px solid red;
邊框多種屬性可以用來設置上下左右邊框的顏色、樣式、寬度。
邊框效果：
使用boreder-radius來定義圓角，使用一個半徑時確定一個圓形，當使用兩個半徑時確定一個橢圓。這個(橢)圓與邊框的交集形成圓角效果。
圓角邊框的四角分別設置：border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius。
border-radius 語法屬性：
border-radius: 30px;
border-radius: 25% 10%;
border-radius: 10% 50%;
3、盒子模型之內邊距
padding：定義元素的內邊距，有時又稱為“填充”。
語法格式：padding: length;
length可以是長度值，也可以是百分比
當取值為百分比是，相對于父元素寬度(width)
當使用em單位時，相對于當前元素文字大小(font-size)
可以使用padding-top、padding-bottom、padding-left和padding-right分別定義上、下左和右的內邊距。
設置盒子內邊距樣式時需注意：
設置內邊距時不能設置負值。
設置內邊距時，內邊距會自動把邊框撐大，以適應設置的內邊距。
萬維網上的一個超媒體......
內邊距效果：
4、盒子模型之外邊距
margin:定義盒子之間的距離，外邊距有時又稱為“邊界”。
語法格式：margin: auto | length;
length是長度或百分比值（百分比值是基于父對象的寬度(width)）
當使用em單位時，相對于當前元素文字大小(font-size)
可以使用margin-top, margin-bottom, margin-left和margin-right分別定義四周的外邊距
左、右邊距為auto時可實現元素的居中
長度可以是負值，實現盒子間的重疊效果
對于行內元素，只有左、右外邊距有效，上、下外邊距無效，塊級元素的垂直相鄰外邊距會合并
浮動元素的外邊距不會合并。
margin的簡寫
/* 四周外邊距全為10像素 */ margin: 10px; /* 上、下外邊距為10像素，左、右20像素 */ margin: 10px 20px; /*上外邊距為10像素，左、右20像素，下外邊距為30像素 */ margin: 10px 20px 30px; /*上外邊距為10像素，右20像素，下30像素，左40像素（順時針） */ margin: 10px 20px 30px 40px;
外邊距效果：
兄弟塊級元素之間的豎直margin會“塌陷”，實際距離為兩個邊距中的較大者。
塊元素1
塊元素2
所以我們進行div布局的時候一般首先使用通配符選擇設置外邊框與內邊距為零。
* {margin: 0; padding: 0;}
當父、子元素的上、下外邊距緊貼在一起時（沒有邊框、內邊距或內容分隔時），父、子元素的上、下外邊距重疊在一起，出現在父元素外側，大小為父、子元素外邊距中的較大者。
CSS web前端 容器
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
