1、盒模型
W3C 的规范:元素内容占据的空间=width , padding 和 border 值是另算
IE5.X 和 6 : width=width+padding+border
flex浏览器支持
目前没有浏览器支持 box-flex 属性。
Firefox 支持替代的 -moz-box-flex 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
ie9之前的浏览器不支持
参考:https://www.cnblogs.com/yangjie-space/p/4856109.html
2、flex(display:flex)
- 容器上:flex-direction/ flex-wrap/ flex-flow/ jusitify-content/ align-items/ align-content
- 子项上:order(小前)/flex-grow(总和1)/flex-shrink(1默认收缩 0不 大于1按比例收缩) /flex-basis(auto自动,1XXpx)/flex/align-self
- flex:默认(0 1 auto) 1(1 1 0%) none(0 0 auto) auto(1 1 auto)
3、css单位
1.px :绝对单位,页面按精确像素展示
2.em :相对单位,基准点为父节点字体的大小,如果自身定义了font-size 按自身来计算(浏览器默认字体是16px ),整个页面内1em 不是一个固定的值。
3.rem :相对单位,可理解为“ root em ” ,相对根节点html 的字体大小来计算,CSS3 新加属性,chrome / firefox / IE9 + 支持。
4.vw :视点宽度,视窗宽度,1vw 等于视窗宽度的1%。
5.vh :视点高度,视窗高度,1vh 等于视窗高度的1%。
6.vmin :vw 和vh 中较小的那个。
7.vmax :vw 和vh 中较大的那个。
8.%:百分比
4、css选择器
类,元素,ID,属性等选择器
5、bfc 清除浮动
(1) BFC渲染规则
规则1: 创建了BFC的元素中,在垂直方向上的margin会发生重叠。根元素<html>就是一个BFC元素 (这个可以解释margin重叠)
规则2: BFC元素在页面上是一个独立的容器,外面的元素和里面的元素互不影响。
规则3: BFC元素不会和浮动的元素重叠。(这个可以解释两栏自适应)
规则4: 计算BFC元素的高度时,里面浮动元素的高度也会参与计算 (用来解释overflow:hidden可以清除浮动)
(2) 触发BCF方式
根元素,即HTML标签
浮动元素:float值为left、right
overflow值不为 visible,为 auto、scroll、hidden
display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
定位元素:position值为 absolute、fixed
6、层叠上下文
- 页面根元素或z-index或css3导致
- 后来居上/z-index大小来判断
- 参考:https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
7、常见页面布局
8、响应式布局
使用@media 的三种方式
第一: 直接在CSS文件中使用
@media 类型 and (条件1) and (条件二)
{
css样式
}
@media screen and (max-width:980px ) {
body{
background-color: red;
}
}
第二:使用@import导入
@import url("css/moxie.css") all and (max-width:980px);
第三,也是最常用的:使用link连接,media属性用于设置查询方式
<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>
9、css预处理,后处理
Sass
、LESS
、Stylus
10、css3新特性
animation和transiton的相关属性
animate和translate
11、display哪些取值
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素 |
参考:http://www.w3school.com.cn/cssref/pr_class_display.asp
12、相邻的两个inline-block节点为什么会出现间隔,该如何解决
-
方法1: 改变书写方式
方法2:font-size
方法3:使用margin负值
方法4:使用word-spacing或letter-spacing
- 参考:https://www.jianshu.com/p/b6fb427308ad
13、meta viewport 移动端适配
14、CSS实现宽度自适应100%,宽高16:9的比例的矩形
15、rem布局的优缺点
- 优点:兼容性高,理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。
- 缺点:不适用内容多的pc端,无法做到高度自适应
16、画三角形
17、1像素边框问题
1. 媒体查询利用设备像素比缩放,设置小数像素
2. viewport + rem 方案
3. 设置 border-image 方案
4. background-image 渐变实现