标签：谷歌 important 相互 定位 基础 under 内核 lock css基础
1.浏览器内核(主要指渲染引擎)：
webkit 谷歌用的多
Safari 苹果
trident(IE内核)
Gecko 火狐用的最多，跨平台
Chromium/Blink 谷歌
移动端 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。
2.css3新增选择器：
结构伪类选择器：例如：li:nth-child(n) （even偶数 odd奇数）
属性选择器：例如：div[class]{} （ ^=以开头 $=以结尾 *通配）
伪元素选择器：例如：p::first-letter{}
3.行内元素，行内块元素，块级元素的区别以及相互转换
行内元素（如span,b,img,a,u等）：1）设置宽高无效 2）margin左右有效上下无效，padding都有效 3）不会自动换行 4）除a外，里面只能放行内元素
行内块元素：1）不自动换行 2）宽高有效
块级元素(如div,p,nav,aside,header等)：1)宽高有效 2）margin,padding均有效 3）自动换行
4.CSS三大特性
1) 层叠
2) 继承（文本）
3) 优先（!important>行内样式>id>类>标签）
5.盒子模型:
padding指内边距 写法：1)上、右、下、左
margin指外边距
border指边框
width、height在标准盒模型中指内容的宽高，IE盒模型指内容+border+padding的宽高
默认带有padding的标签：th,td
默认带有margin的标签：h1~h6,dl,dd,p
默认带有padding、margin的标签：ol,ul,textarea
6.外边距合并问题
1）互为兄弟关系的块级元素。解决方案：避免
2）互为父子关系的块级元素，父元素没有内边距和边框。解决方案：1）父元素加边框或内边距2）overflow：hidden
7.清楚浮动
Why:解决父级元素因为子级元素引起的内部高度为0的问题
When: 父元素没有确定高度值，子元素浮动，导致父元素没有高
How: 1）额外标签法：在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
2）父元素添加overflow：hidden;
3）After伪元素清楚浮动
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
4）双伪元素
参考文档 https://www.jianshu.com/p/7e04ed3f4bea 了解BFC才能了解清楚浮动的原理
8.定位：
1）静态static：（默认）
2）相对relative：可通过边偏移改变位置，原来位置继续占有
3）绝对absolute：不占位置，父元素没定位，以屏幕，父亲有定位以最近父亲为基准（子绝父相）
4）固定fixed：变异的绝对，不占位置，完全脱标
9.模式转换：
浮动、绝对定位、固定定位会转换为行内块模式
10.display、visibility、overflow区别：
Display 隐藏后不保留位置，Visibility 保留 位置Overflow 溢出隐藏
标签：谷歌 important 相互 定位 基础 under 内核 lock css基础
原文地址：https://www.cnblogs.com/front-end0829/p/10290033.html
