開沖了，老弟~
前言
大家好，我是林三心， 用最通俗易懂的話講最難的知識點 是我的座右銘， 基礎是進階的前提 是我的初心。
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-box IE盒模型（怪異盒模型）
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選擇器是自右往左解析？
連結：https://blog.csdn.net/jinboker/article/details/52126021
結語
我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那咱們可以交朋友，一起摸魚哈哈，摸魚群，關註我，拉你進群，有5000多名前端小夥伴在等著一起學習哦 -->
