css個人總結

ccs （cascading style sheet）：層疊樣式表

主要作用：介面布局和美化介面

1.2.1 選擇器

高階選擇器

優先順序 (多級依次比較)

1.2.2、使用方式

1.2.3、路徑字型屬性：font

文字屬性：text

盒子模型：6大屬性

border :邊框

padding :內邊距

特殊性:

margin:外邊距

特殊性：

margin可以使用負值

backgroud: 背景

background-attachment：滾動 scroll(滾動) fixed(固定) ！幾乎不用

細節：

display:顯示 (變形手術)

list-style：列表

塊元素和行內元素

水平方向： 1 margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。 2 width、margin-left和margin-right可以設定為auto，其餘必須為特定值，或缺省為0 3 如果margin-left/right都設定為auto，它們會設定為相同的長度，因此將元素在其父元素中居中 4 如果3個屬性都設定為auto，則兩個外邊距都會設定為0，而width盡可能寬，這是預設情況 5 如果width、margin都是auto的話（這個前提不能少），我們再來設定padding或border，相應的width就會減小，保證整個塊級元素的大小不要超過父元素。垂直方向 1 margin-top、border-top、padding-top、height、padding-bottom、 border-bottom、margin-bottom 2 預設高度由其內容決定，它會受內容寬度的影響，內容越窄，相應的就會越高 3 相鄰元素垂直相鄰外邊距會重疊 4 父子元素間的重疊（同向margin、父元素沒有border或padding、重疊是對外而言）

水平方向 1 margin-left、border-left、padding-left、padding-right、border-right、margin-right 2 width無效，由內容本身決定垂直方向 1 height無效，有font-size和line-height決定 2 內邊距、邊框和外邊距對行內元素或其生成的框沒有垂直效果，不會影響元素行內框的高度，也不會影響包含該元素的行框的高度

1.4.1 、三種布局方式

流式布局

浮動布局 float:left | right

規則：影響：

定位布局

記錄標籤溢位部分變為…

width: 198px;          //給定寬度
white-space: nowrap; //不換行 
text-overflow: ellipsis; // 省略號 
overflow: hidden;//溢位隱藏

變性情況

清除浮動造成的塌陷

overflow:hidden; //清除對父元素的影響 父元素樣式新增
clear:both|left|right ; //清除兄弟元素之間的影響 受影響兄樣式中新增。

居中方案

text-align :center;
margin:0px auto;
heignt : 555px; ling-height: 555px; // 行高等於文字

text-align:center 真的只是讓文字居中麼？

ext-align的功能遠不止如此。

對於具有文字類屬性的元素，text-align屬性也可以使其水平居中顯示。

具有文字類屬性的元素有：行內元素、行內塊元素。也就是說text-align屬性也可以使這些元素水平居中。

line-height的使用

ine-height作用於內聯元素

line-height作用於替換元素和塊級元素

清除塌陷

1. 設定行高 2. overflow:hidden; //清除對父元素的影響父元素樣式新增 3. clear:both|left|right ; //清除兄弟元素之間的影響受影響兄樣式中新增。 clear:both只能寫在第1個受影響的元素上，寫在父元素上沒有什麼用

重疊

什麼時候，可以讓兩個盒子重疊到一起

1）乙個盒子浮動，另乙個不浮動 2）定位，定位完全脫離標準文件流

css個人總結

css的個人總結

個人CSS開發總結

CSS一些小總結個人向

css個人總結

css的個人總結

個人CSS開發總結

CSS一些小總結 個人向

相關推薦

CSS一些小總結個人向