CSS进阶学习
5種主流瀏覽器及內核
IE ?trident
Chrome webkit/blink
Firefox ?gecko
Opera presto 3%-5%
Safari webkit
?
css引入三種方式
行間樣式
頁面級
外部css文件
?
同步：順序進行。一件事做完做另一件事。
異步：同時進行。兩件不同的事同時做。
?
CSS權重（ 進制256進制）
！Important ??infinity
行間樣式 ????1000
Id ???????????100
Class|屬性|偽類 10
標簽|偽元素 ??1
通配符 ???????0
??????????????????
常用復雜選擇器
div span {} ?????div下的所有span標簽樣式
div ?> ?span {} ??div下的所有子標簽span標簽樣式
div.demo{} ???????并列選擇器，通過多種條件查詢一個元素，（沒有逗號）
em,span,div{} ????分組選擇器，共用代碼塊
?
?
* 瀏覽器遍歷父子結構標簽向左的順序。
font-weight:100-900 加粗字體效果
Normal:400 ???bold:700 ??bolder:特粗體 ??lighter:細體
?
文字水平垂直居中
文本高度=容器高度 ?line-height=height
?
首行縮進2個字符
text-indent:2em ????//開頭縮進兩個字符。
em: 相對單位， ?em=1*font-size.
文字行高是1.2倍行高：line-height=1.2em;
?
行級元素：span strong em a del ?內容決定大小，css不可修改寬高
塊級元素：div p ul li ol form adress ?獨占一行，css可修改寬高
行級塊元素：img ??內容決定大小，css可修改寬高
?
盒模型
border:10px solid black; ?//盒子大小不變，外邊加變寬10px邊框
Padding:10px ?//盒子四周全都增加10px;
Margin:10px; ?//距離外部10px;
?
Padding:100px 100px 100px 100px;
上? ? ?右? ? ? ?下?? ???左
Padding:100px ??100px ????100px
? 上? ? ??左，右 ????下 ???
Padding: ?100px ??100px ??
? ? ? ? ? ? ? ?上下? ? ? ? 左右
Padding: ?100px
? ? ? ? ? ? ? 上下左右
?
?
body天生具有margin:8px;
?
定位
Left:100px; ?????盒子左邊線距左側100px;
?
層模型：
Position:absolute: ?脫離原來位置定位，每個定位的盒子在不同層，比如樓房上下層用戶。
Position:relative: ?保留原來位置定位，本來的位置不許其他盒子占用。
absolute定位相當于最近的有定位的父級進行定位；如果沒有，那么相對于文檔定位。
relative定位相當于自己原來位置進行定位。
fix定位，（廣告定位）相當于屏幕定位，在屏幕某個位置始終不變。
一般用法：父級用relative定位(保留原來位置，不影響后序標簽位置)，盒子用absolute定位。
廣告定位：始終在屏幕中心；
??
?
五環居中，隨窗口改變而改變
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五環居中</title> <style> .wrapper{ width:400px; height:180px; position: fixed; left: 50%; top: 50%; margin-left: -200px; margin-top: -90px; } .circle1, .circle2, .circle3, .circle4, .circle5{ width: 100px; height: 100px; border: 10px solid blue; border-radius: 50%; position: absolute; } .circle2{ left: 140px; border-color: #000; z-index: 3; } .circle3{ left: 280px; border-color: red; z-index: 5; } .circle4{ left: 70px; top:60px; border-color: yellow; } .circle5{ left: 210px; top:60px; border-color: green; z-index: 4; } </style> </head> <body> <div class="wrapper"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"></div> </div> </body> </html> |
?
?
margin 塌陷bug
父子結構盒子，垂直方向上，父級margin-top與子級margin-top取最大值。
如果父級margin-top較大，子級margin-top將失去效果。
如果父級margin-top較小，子級將和父級一起使用margin-top最大值
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrapper{ width: 100px; height: 100px; margin-top: 100px; ? /* 解決方案3種； 1、overflow: hidden; 2、position: absolute; 3、display: inline-block; */ } .content{ width: 50px; height: 50px; margin-top: 170px; background-color: blue; } </style> </head> <body> <div class="wrapper"> <div class="content"></div> </div> ? </body> </html> |
?
彌補方案：
1、給父級加上overflow: hidden;
2、給父級加上position: absolute;
3、給父級加上display: inline-block;
?
margin 合并bug
兄弟盒子，margin-top不能實現累加。
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .demo1{ background: red; height: 10px; margin-bottom: 100px; } .demo2{ background: green; height: 10px; margin-top: 100px; } .wrapper{ overflow: hidden; } </style> </head> <body> <!-- 解決方案：加一層包裹 <div class="wrapper"> <div class="demo1"></div> </div> <div class="wrapper"> <div class="demo2"></div> </div> --> ? <div class="demo1"></div> <div class="demo2"></div> </body> </html> |
?
解決方案：加一層wrapper.(開發中一般不解決。)
?
浮動：
只有塊級元素看不到浮動元素。當塊級元素變成bfc元素時，可以看到浮動元素。
塊級元素變成bfc元素三種方式：
1、overflow: hidden;
2、position: absolute;
3、display: inline-block;
?
如何清除浮動流。
?
1、父級元素變成bfc元素
2、父級使用偽元素::after{content: "";clear: both;display: block;}
?
*使用position 和 float 元素自動變成inline-block。
?
單行文本溢出部分打點顯示
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
?
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p{ width: 200px; border: 1px solid #000; /* 三件套 */ white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } </style> </head> <body> <p>打電話帶大客戶的卡大號帶畫uu的哈互貸的</p> </body> </html> |
?
?
多行文本溢出：只做截斷不做打點。
?
文字對齊方式
當一個行級塊元素后面加一段文字，文字與行級塊元素底對齊。當行級塊元素內部有文字時，外面文字與內部文字底對齊。
?
轉載于:https://www.cnblogs.com/2016-zck/p/9694844.html
總結
- 上一篇： 软硬件版本号命名规范及原则
- 下一篇： 简单说 CSS滤镜 filter属性