css选择器及优先级
优先级从高到低
!important
内联选择器
id选择器
类选择器、伪类选择器、属性选择器
元素选择器、伪元素选择器
通配选择器、兄弟选择器、子选择器、后代选择器
优先级相同时，根据设置的前后区分
内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
display属性值及其作用
none：元素直接消失，不占用位置、没有渲染
block：块级元素渲染，独占一行，可以设置width、height、padding、margin
inline：行内元素渲染，和其他元素一行，无法设置width、height，无法设置垂直padding、margin，可以设置水水平padding、margin
inline-block：行内块级元素，规格和block一样，但是排列为行内元素
flex：flex布局
inherit：继承父结点的display属性
table：表格
list：列表
display的block和inline-block的区别
block：块级元素渲染，独占一行，可以设置width、height、padding、margin
inline：行内元素渲染，和其他元素一行，无法设置width、height，无法设置垂直padding、margin，可以设置水水平padding、margin
inline-block：行内块级元素，规格和block一样，但是排列为行内元素
隐藏元素的方法有哪些
display:none，没有渲染，不占位置，无法绑定监听事件
visibility:hidden，占位置，无法绑定监听事件
opacity:0，占据空间，可以绑定监听事件
position:absolute绝对定位移出可视范围
z-index设置为负值，通过其他元素覆盖
transform:scale(0，0)缩放为0
clip/clip-path：占据位置，无法响应监听事件
display:none和visible:hidden的区别
display:none
没有渲染，不占位置，无法绑定监听事件
display为非继承属性，父节点消失后子节点也会消失，无法修改子节点属性
display会导致文档的重绘
visibility:hidden
占位置，无法绑定监听事件
为继承属性，会继承给子节点，可以通过修改子节点的属性使其可见
不会导致文档重绘
盒模型的理解
盒模型分为标准盒模型和怪异盒模型
标准盒模型height和width为content的长宽
怪异盒模型height和width包括了border内侧内容，不包含margin
CSS3中有哪些新特性
圆角
阴影
动画
渐变
旋转
多背景
缩放
css选择器:not(.class)非选择器
单行、多行文本溢出隐藏
单行：
overflow:hidden 隐藏
text-overflow:ellipsis 省略号
white-space:nowrap 溢出不换行
多行：
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
两栏布局的实现
浮动方案
1.左侧设置浮动，右侧设置左侧宽度的margin-left
2.左侧设置浮动，右侧设置overflow:hidden
flex布局
1.父容器设置flex布局，右侧设置flex:1
定位方案
1.设置父容器为相对定位，设置左侧为绝对定位脱离文档流，右侧设置overflow:hidden
2.设置父容器为相对定位，设置右侧为绝对定位，设置距离左侧左侧栏宽度的left
三栏布局的实现
浮动方案
1.设置左侧浮动左侧，右侧浮动右侧，中间设置margin-left和margin-right为各自宽度。
定位方案
1.设置父容器为相对定位，左侧设置绝对定位，left为0，右侧设置绝对定位，right为0，中间设置width为auto
flex布局方案
1.设置父容器display:flex设置中间为flex:1
Flex布局理解
flex布局为弹性布局，行内元素和块级元素都可以使用，父容器设置弹性布局后会成为一个容器，容器中分为主轴和垂直的交叉轴，元素先按照主轴进行排列，当一行排满后再拍到交叉轴方向的下一个主轴。
flex布局中可以设置主轴方向（flex-direction），默认为横向（row）。水平对齐方式（justify-content），默认为left。垂直对齐方式（align-items）默认为baseline。包裹方式（flex-wrap）默认为wrap
flex布局中的子元素可以设置align-self（对齐方式）默认为auto，缩小比例（flex-thrink）空间不足时按照多少比例缩小，扩大比例（flex-grow）空间空余时元素按照多少比例扩大，项目原本占据空间（flex-basis），默认为auto。order指定项目的排序顺序。
flex:1表示flex-grow:1,flex-thrink:1,flex-basis:0%，意思为父元素空间变化时，元素等比缩小。
为什么要清除浮动、清除浮动的方式
如果父元素的尺寸小于浮动元素，浮动元素会超出父元素。如果浮动元素前的元素不浮动，会造成重叠的问题。
清除浮动的方式
1.clear:both，在父元素中最后一个浮动元素后添加一个带有clear:both的元素。
2.给父元素确定height
3.给父元素添加overflow:hidden
4.使用:after伪元素选择器，为最后一个元素添加clear:both
BFC的理解、如何创建BFC
BFC（块级格式化上下文）为一块独立的渲染区域，不会影响外界元素。BFC中会计算浮动元素的尺寸。
BFC不会和浮动元素、定位元素重叠。
创建BFC
1.设置overflow：hidden
2.设置浮动
3.设置绝对定位
4.设置flex
5.body元素
position属性有哪些，它们有什么区别
有absolute、relative、fixed、sticked
1.absolute
absolute为绝对定位，设置绝对定位的元素会脱离文档流，绝对定位可以设置相对于最近的定位的父容器的位置。
2.relative
relative为相对定位，设置相对定位的元素不会脱离文档流，相对定位可以设置元素相对于原本位置的位置。
3.fixed
fixed为固定定位，设置元素相对于窗口的位置。
4.sticked
sticked为粘性定位，是相对定位和固定定位的混合使用。在未超出设定值时，会显示为相对定位，超出后显示为固定定位，常用作固定导航栏。
实现一个三角形
设置border为固定宽度，设置任三方向的边框颜色为透明。
如何解决1px问题
1px问题是因为不同设备显示分辨率不同造成显示的字体大小和预期设置不同。
1.直接设置font-size为对应的倍数
2.通过meta标签设置缩放大小
3.通过伪元素选择器设置最后一个元素先扩大后缩小
4.使用SVG矢量图形