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> |
多行文本溢出：只做截断不做打点。
文字对齐方式
当一个行级块元素后面加一段文字，文字与行级块元素底对齐。当行级块元素内部有文字时，外面文字与内部文字底对齐。
