CSS

ivyzhang 發(fā)布于2019-04-23 11:50 / 1361人閱讀

摘要：盒模型標準盒模型盒模型具體區(qū)別是的寬度一旦確定，就不會改變。內容的寬度會根據(jù)增加或者是減小。屬于同一個的兩個相鄰的會發(fā)生重疊。的區(qū)域不會與重疊。

盒模型

content-box (W3C 標準盒模型)
border-box (IE 盒模型)

具體區(qū)別是：
1. border-box的寬度一旦確定，就不會改變。width = border + padding + 內容的寬度
2. content-box會根據(jù)padding增加或者是減小。width = 內容的寬度

BFC

就是一個容器，里外不相互影響，記住：清除浮動的時候，如果使用 overflow： hidden，是存在缺點的，如果超過了范圍，那么則被隱藏了

觸發(fā)原理

1 根元素
2 float屬性不為none,例如left、right
3 position為absolute或fixed
4 display為inline-block, table-cell, table-caption, flex, inline-flex
5 overflow不為visible，例如hidden、auto

規(guī)則

1. 內部的Box會在垂直方向，一個接一個地放置。
2. 屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
3. BFC的區(qū)域不會與float box重疊。
4. BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素
5. 計算BFC的高度時，浮動元素也參與計算

作用

1. 清除浮動，BFC里面的浮動元素高度也會參與計算
2. 防止margin重疊

清除浮動

.clearfix:after{
    content: ",
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
    line-height:0;//行高為0
}

布局

浮動布局

缺點：會存在塌陷的問題

Flex布局





Title

絕對定位

CSS優(yōu)化

(1)壓縮
(2)屬性連寫： font ：font-style font-weight font-size
(3)繼承：font clolr
(4) CSS放入Head中，減少reflow repaint

居中布局

1. 水平居中
    行內元素: text-align: center
    塊級元素: margin: 0 auto
    absolute + transform
    flex + justify-content: center
2. 垂直居中
    line-height: height
    absolute + transform
    flex + align-items: center
    table

優(yōu)先級

!important > 行內樣式 > #id > .class > tag > * > 繼承 > 默認

GPU云服務器云服務器 css引入css css _CSS css88

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

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

[譯]148個資源讓你成為CSS專家

摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...

impig33 2019-08-29 11:10 評論0 收藏0
簡單易懂的CSS Modules

摘要：結果是選手獲勝，名為的元素，最終的值為。而合理的命名約定，的確是組織代碼的有效策略。它們會再由轉換為適當?shù)慕M合。雖然本文為了嚴謹，結果寫了相當長的篇幅，但希望你讀過之后，還能覺得是簡單易懂的。不要誤會，CSS Modules可不是在說css模塊化這個好像在某些地方見過的詞，它其實是特指一種近期才出現(xiàn)的技術手段。什么技術手段呢？請待后文說明。層疊樣式表我們知道，css的全名叫做層...

chunquedong 2019-08-30 12:58 評論0 收藏0
CSS Modules實踐

摘要：能最大化地結合現(xiàn)有生態(tài)預處理器后處理器等和模塊化能力，幾乎零學習成本。編碼相關的所有樣式上例中打印的結果是注意到是按照自動生成的名。實踐手動引用渲染結果使用可以實現(xiàn)使用屬性自動加載模塊。文章同步于Github Pines-Cheng/blog 隨著前端這幾年的風生水起，CSS作為前端的三劍客之一，各種技術方案也是層出不窮。從CSS prepocessor（SASS、LESS、Styl...

hankkin 2019-08-29 13:00 評論0 收藏0
【譯】編寫更好的CSS必備的40個工具

摘要：一個叫的人用純重繪并模擬了種不同的移動設備包括可以給你的網站添加不相關的獨立組件的一個庫。每一個組件都是針對移動設備定制的，并且它有很多你在傳統(tǒng)的框架中看不到的功能。如果你用開發(fā)移動優(yōu)先的網站，并想要網站正常運行在低版本的上，可以考慮。眾所周知，CSS是非常棒的，它使網站看起來很漂亮，可以為網站添加動畫，并讓呈現(xiàn)和內容分離。去了解CSS的一切是非常難做到的，它只會變得更加困難,因為我...

moven_j 2019-08-28 18:09 評論0 收藏0
SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現(xiàn)出多種樣式。可以讓屬性的變化過程持續(xù)一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0
CSS Modules詳解及React中實踐

摘要：上例中打印的結果是對中的名都做了處理，使用對象來保存原和混淆后的對應關系。結合實踐在處直接使用中名即可。如因為只會轉變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領域中進化最慢的一塊。由于 ES2015/201...

wemall 2019-08-30 15:45 評論0 收藏0