CSS整理

CSS

 

1、

域名——>DNS——>ip地址——>服務器客戶端握手交互——>傳輸數據

客戶端瀏覽器獲取一行顯示一行的執行,遇到外鏈文件,比如.css,開啓新的線程,同時(即異步)執行

 

2、

單選擇器權重順序

!important 權重 Infinity

——>行間樣式style 權重 1000

——>id選擇器 權重 100

——>class||屬性||僞類 選擇器 權重 10

——>標籤選擇器||僞元素 權重 1

——>通配符選擇器 權重 0

權重的值是 256進制的(0到1之間差 256)

 

組合選擇器——層級各權重相加

  • 父子選擇器(又叫派生選擇器)
  • 直接子元素選擇器 div > div
  • 並列選擇器 div.class
  • 分組選擇器 div, span, p

 

3、

組合選擇器 例如 div ul li span em,在DOC樹中怎麼個順序遍歷效率最高?

瀏覽器的一個內核原理就是,從右向左尋找是最快的。

 

4、

字體家族有(font-size font-weight font-style font-family color)

行塊水平對齊方式有(text-align: left || right || center)垂直對齊方式有(line-height flex彈性佈局)

font-size:50px 其實調整的是字體的高度

font-weight:light || normal || bold || boider 能不能看出效果,跟瀏覽器當前使用的字體包是否包含這麼多的樣式有關

 

5、

邊框家族(border-width border-style border-dashed border-left border-right border-top border-bottom)

小三角形 css實現原理 下面是利用border實現的4個小三角形(剛好是一個正方形的對角線分割)

div{

width: 0;

height: 0;

border: 100px solid blank;

border-left-color: green;

border-top-color: red;

border-right-color: gray;

}

  • 獲得一個三角形,只需要把其它三個的顏色變成透明色(transparent)CSS專有的透明值

 

6、

text-indent: 2em 文本縮進

像素px也是一種相對單位,1em = 1* font-size

 

7、

行極元素 inline(span a )

  • 內容決定元素所佔位置,不可以改變寬高

塊級元素 block (div p ul li )

  • 獨佔一行,可以通過css改變寬高

行級塊元素 inline-block(img)

  • 內容決定大小,可以改變寬高

凡是帶有inline屬性的元素,都有文字特性(文字分隔符 天生的4像素)

行級元素只能嵌套行級元素

塊級元素可以嵌套任何元素

但是有兩個特立獨行:

P標籤是塊級元素,但是規定它獨立,不能嵌套塊級元素,否則被塊級元素分割成前後兩組p元素

a標籤裏面不能嵌套a標籤

 

8、

大公司流程化開發都會先封裝好一些相關功能,而不用每個新人都重新寫一套代碼

先寫class的css,再導入html引用相關功能代碼的class

比如初始化標籤

body有個天生的8像素 margin:8px

a{text-decoration: none /*初始化去掉下劃線,以後再用就可以直接使用*/}

ul{list-style:none;padding:0;margin:0;/*同理*/}

通配符初始化

*{

padding:0;

margin:0;

text-decoration: none;

list-style:none;

}

 

9、

盒模型: 內容寬高 + 內邊距 + 邊框 + 外邊距

層模型:當一個元素成爲絕對定位的時候,就會脫離文檔流,獨立一層,互不干擾,因此,後面的元素可能會產生迴流和重繪的情況

比如

  • absolute脫離原來位置進行定位,相對於最近的有定位的父級定位,如果沒有就相對於文檔進行定位
  • relative保留原來位置進行定位
  • fixed固定定位,相對於瀏覽器的可視區定位,以不變應萬變

 

10

BFC(margin塌陷和margin合併)

margin塌陷:父子結構的元素,垂直方向的margin會共同選擇最大的值

解決方式:

①父級元素加border

②讓父級變成BFC塊,加上overflow:hidden; || display:inline-block || position: absolute

margin合併:正常來說,元素佔有區域不共用。但是兄弟結構的元素會出現margin區域共用的情況

解決方式:

①各個元素分別添加一個相同父元素,讓問題轉化爲累加,但是這不應該應爲bug增加無用的元素

②不解決是最好的解決方式,根據它的特性設置margin值

 

11、

float引發的問題

①浮動元素產生了浮動流,

②父子結構的元素,子元素使用float後,父級包不住的問題

原因如下

  • 所有產生了浮動流的元素,塊級元素看不到他們
  • 產生了bfc的元素和文本類屬性的元素以及文本都能看到浮動元素

 

根據以上原因可以有解決方式:

  • 清除周邊的浮動流可以添加clear:both 這個一定要用在父級且是塊級元素才起作用
  • 讓塊級元素變成bfc
  • (不選)在子元素最後邊添加一個無用的元素並給它設置clear:both
  • (優選)利用僞元素::after添加clear:both,並修改這個僞元素爲塊級元素display:block

 

凡是元素使用了position:absolute float:left || right ,

瀏覽器內部會自動將元素轉換爲inline-block

 

12、

文字溢出處理

①單行文本

text-overflow:ellipsis (三點省略號)

②多行文本

overflow:hidden 再配合一個僞元素::after{content:"..."}

 

13、背景圖片處理

background-image:url(../..xxx.jpg)

background-size: 寬 高

background-position:50% 50%;(背景圖片居中)

 

14、企業開發經驗

沒有加載CSS文件的時候,功能依然正常。

比如無法加載圖片的時候,顯示文字

 

15、

瀏覽器的一個特性,書本學不到的

行內塊級元素內外都包含文字,外面的文字會根據裏面的文字底對齊,vertical-align: 數值||middle可以調整外面的字的垂直方向上的位置

相關文章
相關標籤/搜索