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 溢出隐藏