前端學習之css3第三天
一、css的三大特性：層疊性、繼承性、優先性
1.層疊性：相同的選擇器設定相同的樣式，裡面的值是不一樣的。
原則：就近原則，那個樣式離著body近就用那個裡面的值。
主要是解決樣式衝突的問題。
2.繼承性：子標籤會繼承父標籤的某些樣式，如文字顏色、字型屬性等。
如：行高的繼承：如果乙個盒子沒有高度，如果在body指定行高1.5倍，子元素可以根據自己文字的大小自動調整行高。
3.優先順序：
選擇器權重
繼承或者*
0，0，0，0
標籤選擇器
0，0，0，1
類選擇器/偽類選擇器
0，0，1，0
id選擇器
0，1，0，0
行內樣式
1，0，0，0
important
無窮大注意：權重會疊加，但是不會進製。繼承的權重是0
二、盒子模型
盒子模型的組成：1.內容 2.邊框 3.內邊距 4.外邊距
1.盒子模型的邊框 border：
屬性作用
border-width
邊框的粗細，單位是px
border-style
邊框的樣式：solid實線/dashed 虛線/dotted 點線
border-color
邊框的顏色
border： 1px solid #000；
另外可以給盒子單獨設定乙個邊框：
border-top：1px solid #000
border-bottom: 1px solid #000
border-left：1px solid #000
border-right：1px solid #000
**細現邊框：可以把相鄰的邊框和並到一起，僅適用於**中
border-collapse：collapse
注意邊框的**線會影響盒子的實際大小
解決的方法：1.測量盒子大小的時候不要測量邊框 2.用width和height減去邊框寬度。
2.內邊距
內邊距主要是設定內容與邊框之間的距離
可以在乙個盒子中分別設定四個方向的內邊距**如下
padding-top：10px;
padding-bottom:20px;
padding-left:30px;
paddding-right:40px;
內邊框（padding）的復合屬性的寫法
值得個數
含義padding：10px
上下左右的邊距都為10畫素
padding：10px 20px；
上下為10畫素，左右為20畫素
padding：10px 20px 30px
上為10 左右為20 下位30
padding：10px 20px 30px 40px;
上為10，右為20，下為20，左40
注意：內邊距（padding）也會影響盒子的大小
解決的方法：用width和height減出多出來的內邊距（padding）
2.1 處理行內塊元素（inline-block）的間隙的方法：
將父元素的字型設為0（font-size），內部重新設定字型
2.2 如果塊元素的寬度（width）沒有被指定，padding不會撐大盒子的寬度。
前提是padding小於父盒子的寬度。
3.外邊距：控制盒子與盒子之間的距離
可以給乙個盒子分別設定外邊距如下：
margin-top：10px；
margin-bottom：20px；
margin-left：30px；
margin-right：40px；
margin外邊距符合屬性的寫法
值得個數
含義margin：10px；
上下左右的外邊距
margin：10px 20px；
上下的邊距為10，左右的為20
margin：10px 20px 30px；
上為10，左右為20，下為30
margin：10px 20px 30px 40px；
上為10，右為20，下為30，左為40
用外邊距來實現塊級盒子水平居中兩個條件：1.盒子必須有寬度 2.水平間距設定為auto 比如：margin：10px auto；
讓行內元素和行內塊元素水平居中方法是：給其父元素新增 text-align：center
3.1 相鄰元素垂直外邊距合併的情況，解決的方法:上面的盒子設定 margin-buttom，下面的盒子設定 margin-top ，只會取最大的值，所以之能給乙個盒子設定外邊距。
4.外邊距合併-巢狀塊元素塌陷
巢狀塊元素塌陷的情況： 1.父子元素同時具有上外邊距 2.父元素會塌陷較大的外邊距
解決的方案：1.給頂部增加邊框 2.頂部增加內邊距 3.overflow：hidden
5清除內外邊距：網頁的元素中都有預設的內外邊距，清除內外邊距可以避免樣式對布局的干擾。
寫法： * {
margin：0px；
padding：0px；
前端學習之CSS第三天
前端學習之css第三天 一 圓角邊框 border radius圓形 正方形的盒子是圓形，長方形的盒子是橢圓 boder radius 50 圓角矩形 高度或者是寬度的一半 border radius 高或寬的一半設定不同的圓角 border radius 10px 20px 30px 40px 左...
前端學習第三天
float left 設定左浮動 z index 100 重疊時顯示的順序，值越大越在上面 position fixed 固定 text align center 字型對齊方式 z index 屬性設定元素的堆疊順序 擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。所以，z index 9...
前端學習 第三天
css 指層疊樣式表 cascading style sheets 為了顯表現html 元素,使html內容與表現分離。當瀏覽器顯示文件時，它必須將文件的內容與其樣式資訊結合。它分兩個階段處理文件 1 瀏覽器將 html 和 css 轉化成 dom 文件物件模型 dom在計算機記憶體中表示文件。它把...