前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。
CSS
1、选择器权重
- **!important：**最高权重
- **内联样式：**1000
- **id选择器：**100
- **类选择器：**10
- **属性选择器：**10
- **伪类选择器：**10
- **标签选择器：**1
- **伪元素选择器：**1
- **相邻兄弟选择器：**0
- **子选择器：**0
- **后代选择器：**0
- **通配符选择器：**0
2、可继承和不可继承样式
不可继承
- display
- width、height、margin、padding、border
- background、background-color
- position、top、right、left、bottom
可继承
- font-size、font-weight、font-family
- line-height、text-align、color
- visibility
- cursor
block和inline的区别？
- **block：**独占一行，可设置宽高、margin、padding
- **inline：**不独占一行，不可设置宽高，可设置水平margin、padding但不能设置垂直方向margin、padding
3、隐藏元素的方式
- display：none 直接消失
- visibility：hidden 不可见，但占着位置
- opacity：0 透明不可见，但占着位置
- position：absolute 绝对定位并移出可见范围
- z-index：-999 将层级设置在底部，让他不可见
4、link和@import区别
- link可以加载css、rss；@import只能加载css
- link在页面载入时同时加载；@import在页面载入后再加载
- link无兼容问题；@import是新语法，低版本浏览器不兼容
- link标签可被js操作dom去除；@import不行
5、transition和animation的区别
- **transition：**过度样式，需要被动触发
- **animation：**动画样式，不需要被动触发，可以自动触发，可结合@keyframe进行多个关键帧的动画
6、伪元素和伪类
- **伪元素：**顾名思义，假的元素，只会显示其内容，但是并不会在dom树中找到他
p::before {content:"林三心";}
p::after {content:"林三心";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
- **伪类：**将一些效果加到节点上，例如鼠标点击，悬浮等
a:hover {color: #FF00FF}
p:first-child {color: red}
7、盒模型
- **标准盒模型：**width、height的计算范围只包含content
- **IE盒模型：**width、height的计算范围包含content、padding、border
通过box-sizing进行设置
- box-sizing: content-box标准盒模型（默认）
- box-sizing: border-boxIE盒模型（怪异盒模型）
8、CSS3新样式
- **:not(.cc)：**新增的选择器，标识所有class不是“cc”的节点
- **border-radius：**边框圆角
- **box-shadow：**阴影
- **text-shadow：**文字阴影
- **text-decoration：**文字样式渲染
- **gradient：**线性渐变
- **transform：**可设置变形、放大缩小、旋转、定位
- **flex：**flex布局
9、CSS提升性能方式
- 1、css代码压缩
- 2、link代替@import
- 3、避免多层选择器
- 4、动画CPU加速
10、为何使用less、sass
他们是css预处理器，使用他们的变量、继承、运算、函数等功能，大大提高样式编写效率，大多数打包工具最后都会将他们解析为原始css样式代码
11、postCss是啥
后置css，将解析后的css样式代码进行处理，提高其在各个浏览器的兼容性，常用做法是为每个浏览器样式添加特有前缀
12、单行、多行溢出省略号
- 单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- 多行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
13、自适应布局方式
- **媒体查询@media：**通过监听不同的窗口宽度，展示不同的效果
- **rem：**监听不同窗口宽度，为根节点设置对应font-size，并进而使所有使用到rem的样式得到变化（rem的“r”就是“root”）
14、CSS工程化
- CSS实现模块化
- CSS预处理器
- CSS的postCSS
- CSS代码压缩
15、CSS常见单位
- **px：**固定像素，无自适应
- **em：**根据父元素的font-size决定大小
- **rem：**根据根元素的font-size决定大小
16、flex：1代表什么？
flex: 1 1 auto
分别是flex-grow、flex-shrink、flex-basis
17、两栏布局
两栏布局指的是，左边固定右边自适应
- float浮动
.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
background: gold;
}
- flex布局
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}
18、三栏布局
三栏布局指的是左右固定，中间自适应
直接用flex布局
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
19、双飞翼（圣杯）布局
直接用flex布局
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
20、水平垂直居中实现？
- 绝对定位+transform
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
- flex布局
.parent {
display: flex;
justify-content:center;
align-items:center;
}
21、清除浮动方式
- **给父元素定义高度：**不建议，会导致其他布局问题
- 末尾空div并设置clear：both不建议，增加无用dom节点
- 父元素设置overflow：hidden不建议，会导致部分内容被隐藏
- 使用伪元素after+clear:both强烈推荐
22、对于BFC的理解？
BFC(块级格式上下文)，你可以理解为一个有自己的布局规则的容器，其内部的布局不受外部影响
创建BFC的条件
- 根元素：body
- 元素设置浮动：float
- 元素设置绝对定位：position为absolute、fixed
- display为：inline-block、table-cell、table-caption、flex等
- overflow为：hidden、auto、scroll
BFC容器特点
- 垂直方向上，自上而下排列
- BFC中两个相邻容器的margin会重叠
- 计算BFC高度时，会把浮动元素也计算（清除浮动方式之一）
- BFC容器不会和浮动容器发生重叠
- BFC容器内部元素不会影响外部元素
- 每个元素左margin与容器的左border相接触
23、实现一个三角形？
宽度设置0，四个border中，透明掉三个，剩一个显示，就是三角形了
div {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: red;
}
24、实现扇形
跟三角形差不多，只不过多设置一个border-radius
div{
border: 100px solid transparent;
width: 0;
heigt: 0;
border-radius: 100px;
border-top-color: red;
}
25、如何显示小于12px的文字？
使用transform: scale()进行缩小
span {
font-size: 12px;
-webkit-transform: scale(0.8);
display: block;
}
26、为什么css选择器是自右往左解析？
参考资料
结语
我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜欢前端，想学习前端，那咱们可以交朋友，一起摸鱼哈哈，摸鱼群，点这个，有5000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点
