2.CSS

原文鏈接：https://github.com/helloyoucan/knowledge

CSS（層疊樣式表）相關(guān)

1、BFC(塊級(jí)格式化上下文)

是頁(yè)面盒模型布局中的一種CSS渲染模型澳化，相當(dāng)于一個(gè)獨(dú)立容器召边。

特點(diǎn)：

垂直方向上的BFC，margin會(huì)重疊
bfc不與浮動(dòng)元素重疊
浮動(dòng)元素會(huì)參與bfc高度計(jì)算
獨(dú)立的區(qū)域吉挣，里面與外面的元素互不影響

如何創(chuàng)建：

html根元素
float != none
position = absolute 或 fixed
display = inline-block 或 table-cell 或 table-caption 或 flex 或 inline-flex或gird或inline-grid
overflow != visible

主要作用：

解決浮動(dòng)元素造成父元素高度塌陷（清除浮動(dòng)）

2派撕、盒模型

box-sizing : content-box 或 border-box

標(biāo)準(zhǔn)模型 content-box 寬度= content

IE模型 border-box 寬度 = content + padding + border

3、多欄布局要點(diǎn)

float
flex
grid
position
table-cell

4睬魂、GPU加速

使用3D變換的樣式

translate3d
rotate3d
scale3d
translateZ

在 Chrome 和 Safari 中,使用 CSS 變換或動(dòng)畫時(shí)终吼，可能會(huì)閃爍，解決辦法：

.demo {
    -webkit-backface-visibility: hidden;//表示隱藏被旋轉(zhuǎn)的背面
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000; //定義 3D 元素距視圖的距離
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}

5氯哮、水平垂直居中

position:absolute + transform:translate
inline-block +font-size:0 + text-align:center + line-height=height + vertical-align: middle
display:grid + margin:auto
display:flex + margin:auto
display:flex + justify-content: center + align-item: center

6际跪、自適應(yīng)布局

float + margin
flex
grid + grid-template-columns
absolute

7、清除浮動(dòng)

浮動(dòng)元素下方空div設(shè)置 {clear:both;height:0;overflow:hidden;}
父元素浮動(dòng)
父元素設(shè)為inline-block
父元素設(shè)為bfc

偽類

.clearfix:after{
 content:"";
 clear:both;
 display:block;
 height:0;
 overflow:hidden;
 visibility:hidden;
}
.clearfix{
 zoom:1
}

8喉钢、CSS選擇器權(quán)重

權(quán)重	選擇器
10000	!important
1000	內(nèi)聯(lián)樣式
100	ID選擇器
10	類姆打、偽類、屬性選擇器
1	標(biāo)簽肠虽、偽元素選擇器
0	通用選擇器（*）幔戏、子選擇器（>）、相鄰選擇器（+）税课、兄弟選擇器（~）

9闲延、層疊上下文

從最低到最高

background/border
z-index < 0
block塊級(jí)水平盒子
float浮動(dòng)盒子
inline/inline-block水平盒子
z-index:auto/z-index:0
z-index > 0

10、`display:none` vs`visibility:hidden`

display:none	visibility:hidden
不占據(jù)空間	元素空間保留
影響css3的transition過(guò)渡	不影響過(guò)渡效果
觸發(fā)重繪和回流	觸發(fā)重繪
節(jié)點(diǎn)和子孫元素不可見	子元素可設(shè)visibility:visible顯示韩玩，因 `visibility: hidden`屬性值具有繼承性

11慨代、flex

display:flex|inline-flex

容器有兩根軸，水平的主軸（main axis）和垂直的交叉軸（cross axis）

容器屬性

flex-direction:row | row-reverse | column | column-reverse;（主軸方向：起點(diǎn)在左的水平|起點(diǎn)在右的水平|起點(diǎn)在上的垂直|起點(diǎn)在下的垂直）
flex-wrap: nowrap | wrap | wrap-reverse;（一條軸線放不下啸如，如何換行：不換|換行侍匙，第一行在上|換行，第一行在下）
flex-flow:<flex-direction>|<flex-warp>;兩個(gè)屬性的縮寫
justify-content: flex-start | flex-end | center | space-between | space-around;（項(xiàng)目在主軸對(duì)齊方式叮雳，與flex-direction的值有關(guān)想暗，假設(shè)是row：左對(duì)齊 | 右對(duì)齊 | 居中 | 兩端對(duì)齊，項(xiàng)目間隔相等|每個(gè)項(xiàng)目?jī)蓜t有相等的間隔帘不，項(xiàng)目之間距離為間隔*2）
align-items: stretch | flex-start | flex-end | center | baselin;（交叉軸上對(duì)齊方式说莫，與交叉軸方向有關(guān)，假設(shè)是從上到下：占滿容器高度 | 起點(diǎn)對(duì)齊 |終點(diǎn)對(duì)齊 | 中點(diǎn)對(duì)齊 | 項(xiàng)目第一行文字基線對(duì)齊）
align-content: stretch | flex-start | flex-end | center | space-bewtween | space-around;（多跟軸線的對(duì)齊方式：軸線占滿整個(gè)交叉軸 | 交叉軸起點(diǎn)對(duì)齊|交叉軸終點(diǎn)對(duì)齊 | 交叉軸中點(diǎn)對(duì)齊 | 兩端對(duì)齊寞焙，軸線之間間隔相等| 軸線兩邊有相等的間隔）

項(xiàng)目屬性

order（項(xiàng)目排序順序储狭，越小越前互婿，默認(rèn)0）
flex-grow （項(xiàng)目放大比例，默認(rèn)0辽狈，即剩余空間也不放大）
flex-shrink（縮小比例慈参，默認(rèn)1,，即空間不足將縮小項(xiàng)目）
flex-basis: auto |<number> ;（在分配多余空間之前刮萌，項(xiàng)目占據(jù)的主軸空間驮配，瀏覽器根據(jù)這個(gè)屬性計(jì)算主軸多余空間）
flex（ flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)none着茸，有兩個(gè)快捷屬性auto (1 1 auto) 和 none (0 0 auto)）
align-self:auto | flex- start | flex-end | center | baseline | stretch;（單個(gè)項(xiàng)目的對(duì)齊方式壮锻，默認(rèn)auto繼承父元素的align-items，沒(méi)父元素則為stretch）

12涮阔、grid

display:grid | inline-grid

設(shè)為網(wǎng)格布局以后猜绣，容器子元素（項(xiàng)目）的float、display: inline-block敬特、display: table-cell途事、vertical-align和column-*等設(shè)置都將失效。

容器屬性

grid-template-columns 列寬

grid-template-rows 行高
- repeat() 函數(shù)擅羞，簡(jiǎn)化重復(fù)的值
  
  grid-template-columns: repeat(3, 33.33%);
  grid-template-columns: repeat(2, 100px 20px 80px); //重復(fù)后面三個(gè)值的模式
- auto-fill 關(guān)鍵字 每一行容納盡可能多的單元格
  
  grid-template-columns: repeat(auto-fill, 100px);
- fr關(guān)鍵字 項(xiàng)目的比例關(guān)系，可與絕對(duì)長(zhǎng)度單位結(jié)合使用
  grid-template-columns: 150px 1fr 2fr;
- minmax() 長(zhǎng)度在這個(gè)范圍义图，接受兩參數(shù)减俏，最小值和最大值
  
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
- auto 關(guān)鍵字 瀏覽器自己決定長(zhǎng)度
  
  grid-template-columns: 100px auto 100px;
- 網(wǎng)格線的名稱 使用方括號(hào)，指定每一根網(wǎng)格線的名字碱工，方便以后的引用
  
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-row-gap 行間距

grid-column-gap 列間距

grid-gap:<grid-row-gap> <grid-column-gap>; 兩個(gè)屬性的縮寫
grid-template-areas 定以區(qū)域娃承，一個(gè)區(qū)域由單個(gè)或多個(gè)單元格組成
- 多個(gè)單元格合并一個(gè)區(qū)域的寫法：將9個(gè)單元格分成a、b怕篷、c三個(gè)區(qū)域
```
grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
```
- 布局實(shí)例：頂部是頁(yè)眉區(qū)域header历筝，底部是頁(yè)腳區(qū)域footer，中間部分則為main和sidebar
```
grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";
```
- 不需要利用的區(qū)域用點(diǎn)（“.”）表示：中間一列不屬于任何區(qū)域
```
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
```
- 注意廊谓，區(qū)域的命名會(huì)影響到網(wǎng)格線梳猪。每個(gè)區(qū)域的起始網(wǎng)格線，會(huì)自動(dòng)命名為區(qū)域名-start蒸痹，終止網(wǎng)格線自動(dòng)命名為區(qū)域名-end春弥。
  
  比如，區(qū)域名為header叠荠，則起始位置的水平網(wǎng)格線和垂直網(wǎng)格線叫做header-start匿沛，終止位置的水平網(wǎng)格線和垂直網(wǎng)格線叫做header-end。
grid-auto-flow:row|column|row dense|column dense;（容器子屬性順序：先行后列|先列后行|先行后列榛鼎，出現(xiàn)空白則按行的順序依次填滿|先列后行逃呼，出現(xiàn)空白則按列的順序依次填滿）
justify-item:stretch | start | end | center ;（單元格內(nèi)容水平位置：拉伸占滿單元格寬度|對(duì)齊起始邊緣|結(jié)束邊緣|居中）

align-items:stretch | start | end | center;（單元格內(nèi)容垂直位置：拉伸占滿單元格寬度|對(duì)齊起始邊緣|結(jié)束邊緣|居中）

place-items: <align-items> <justify-items>;（兩屬性的縮寫鳖孤，忽略第二個(gè)值則與第一個(gè)相等）
justify-content 內(nèi)容區(qū)域在容器里面的水平位置

align-content 內(nèi)容區(qū)域在容器里面的垂直位置

place-content <align-content> <justify-content>
- stretch 拉伸占據(jù)整個(gè)容器
- start 起始邊框
- end 結(jié)束邊框
- center 內(nèi)部居中
- space-around 每個(gè)項(xiàng)目?jī)蓜t有相等的間隔
- space-between 項(xiàng)目之間的間隔相等，項(xiàng)目與邊框之間沒(méi)間隔
- space-evenly 項(xiàng)目之間間隔相等抡笼，項(xiàng)目與容器邊框之間也是一樣的間隔
指定現(xiàn)有網(wǎng)格外部的項(xiàng)目（項(xiàng)目數(shù)量超出設(shè)定的網(wǎng)格個(gè)數(shù)）苏揣，用來(lái)設(shè)置，瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的列寬和行高

grid-auto-colmuns

grid-auto-rows

寫法與grid-template-columns和grid-template-rows完全相同
grid-template（grid-template-columns蔫缸、grid-template-rows和grid-template-areas這三個(gè)屬性的合并簡(jiǎn)寫形式）

grid（grid-template-rows腿准、grid-template-columns、grid-template-areas拾碌、 grid-auto-rows吐葱、grid-auto-columns、grid-auto-flow這六個(gè)屬性的合并簡(jiǎn)寫形式校翔。）

項(xiàng)目屬性

指定項(xiàng)目的四個(gè)邊框弟跑，分別定位在哪根網(wǎng)格線。（指定項(xiàng)目的位置）

grid-column-start:<number>|網(wǎng)格線名稱;（左邊框所在的垂直網(wǎng)格線）
grid-column-end:<number>|網(wǎng)格線名稱;（右邊框所在的垂直網(wǎng)格線）
grid-row-start:<number>|網(wǎng)格線名稱;（上邊框所在的水平網(wǎng)格線）
grid-row-end:<number>|網(wǎng)格線名稱;（下邊框所在的水平網(wǎng)格線）
**grid-column **grid-column-start和grid-column-end的合并簡(jiǎn)寫形式
grid-row grid-row-start屬性和grid-row-end的合并簡(jiǎn)寫形式
grid-area 屬性指定項(xiàng)目放在哪一個(gè)區(qū)域防症。

grid-area: e;

grid-area屬性還可用作grid-row-start孟辑、grid-column-start、grid-row-end蔫敲、grid-column-end的合并簡(jiǎn)寫形式饲嗽，直接指定項(xiàng)目的位置。
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
grid-area: 1 / 1 / 3 / 3;
justify-self :stretch|start | end | center ;（單元格內(nèi)容的水平位置：占滿單元格寬度|對(duì)齊起始邊緣|對(duì)齊結(jié)束邊緣|單元格內(nèi)部居中）

align-self:stretch|start | end | center ;（單元格內(nèi)容的垂直位置）

place-self: <align-self> <justify-self>;

13奈嘿、animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name #動(dòng)畫名稱
animation-duration #動(dòng)畫執(zhí)行時(shí)間（默認(rèn)0）
animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out |cubic-bezier(n,n,n,n); #動(dòng)畫如何完成一個(gè)周期
animation-delay:n | infinite #動(dòng)畫延遲開始秒數(shù)
animation-iteration-count #動(dòng)畫重復(fù)次數(shù)
animation-direction:normal | reverse（反向播放） | alternate（奇數(shù)次正向貌虾，偶數(shù)次反向） | alternate-reverse （奇數(shù)次反向，偶數(shù)次正向） |initial | inherit; #是否輪流反向播放動(dòng)畫
animation-fill-mode:none | forwards | backwards | both | initial | inherit; #規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)裙犹，或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)）尽狠，要應(yīng)用到元素的樣式。
animation-play-state:paused（指定暫停動(dòng)畫） | running（指定正在運(yùn)行的動(dòng)畫）; #指定動(dòng)畫是否正在運(yùn)行或已暫停叶圃。
initial #設(shè)置屬性為其默認(rèn)值袄膏。
inherit #從父元素繼承屬性

14、Retina屏幕1px邊框

0.5px邊框

IOS7以下和Android設(shè)備不支持

// 判斷設(shè)備是否支持
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1) {
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}

div {
 border: 1px solid #bbb;
}
.hairlines div {
 border-width: 0.5px;
}

border-image
background-image

多背景漸變

.background-gradient-1px {
    background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
    linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
    linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
}
/* 或者 */
.background-gradient-1px{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
    background-size: 100% 1px;
}

box-shadow模擬邊框

.box-shadow-1px {
 box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

viewport + rem（通過(guò)設(shè)置對(duì)應(yīng)viewport的rem基準(zhǔn)值）

偽類 + transform:scale 實(shí)現(xiàn)

.scale-1px{
 position: relative;
 border:none;
}
.scale-1px:after{
 content: '';
 position: absolute;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

15掺冠、移動(dòng)端1px邊框

根據(jù)像素比沉馆，利用媒體查詢和偽類實(shí)現(xiàn)

/*邊框一像素*/
.border-1px::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid red;
}

/*設(shè)備像素比*/
@media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
    .border-bottom-1px::after, .border-top-1px::after {
      transform: scaleY(0.5);
    }  
   .border-left-1px::after, .border-right-1px::after {
       transform: scaleX(0.5);
    } 
   .border-1px::after {
          width: 200%;
          height: 200%;
          transform: scale(0.5);
          transform-origin: 0 0;
     }
}

/*設(shè)備像素比*/
@media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
   .border-bottom-1px::after, .border-top-1px::after {
      transform: scaleY(0.333);
   } 
   .border-left-1px::after, .border-right-1px::after {
     transform: scaleX(0.333);
   } 
  .border-1px::after {
      width: 300%;
      height: 300%;
      transform: scale(0.333);
      transform-origin: 0 0;
  }
}

16、多行文本溢出省略效果

單行

{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap; 
}

多行

{
    display:-webkit-box;
    -webkit-box-content:vertical;
    -webkit-line-clamp:3;
    overfolow:hidden;
}

兼容

兼容：
p{
    position: relative; 
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}
p::after{
    content: "...";
    position: absolute; 
    bottom: 0; right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

最后編輯于：2020.07.09 09:43:58

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末德崭，一起剝皮案震驚了整個(gè)濱河市悍及，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌接癌，老刑警劉巖心赶，帶你破解...
沈念sama閱讀 218,640評(píng)論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異缺猛，居然都是意外死亡缨叫，警方通過(guò)查閱死者的電腦和手機(jī)椭符，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,254評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)耻姥，“玉大人销钝，你說(shuō)我怎么就攤上這事∷龃兀” “怎么了蒸健？”我有些...
開封第一講書人閱讀 165,011評(píng)論 0贊 355
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)婉商。經(jīng)常有香客問(wèn)我似忧，道長(zhǎng)，這世上最難降的妖魔是什么丈秩？我笑而不...
開封第一講書人閱讀 58,755評(píng)論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任盯捌，我火速辦了婚禮，結(jié)果婚禮上蘑秽，老公的妹妹穿的比我還像新娘饺著。我一直安慰自己，他們只是感情好肠牲，可當(dāng)我...
茶點(diǎn)故事閱讀 67,774評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布幼衰。她就那樣靜靜地躺著，像睡著了一般缀雳。火紅的嫁衣襯著肌膚如雪渡嚣。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,610評(píng)論 1贊 305
城市分裂傳說(shuō)
那天俏险，我揣著相機(jī)與錄音，去河邊找鬼扬绪。笑死竖独，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的挤牛。我是一名探鬼主播莹痢，決...
沈念sama閱讀 40,352評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼墓赴！你這毒婦竟也來(lái)了竞膳？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,257評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤诫硕，失蹤者是張志新（化名）和其女友劉穎坦辟，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體章办，經(jīng)...
沈念sama閱讀 45,717評(píng)論 1贊 315
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡锉走，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,894評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年滨彻，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挪蹭。...
茶點(diǎn)故事閱讀 40,021評(píng)論 1贊 350
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡亭饵，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出梁厉，到底是詐尸還是另有隱情辜羊，我是刑警寧澤，帶...
沈念sama閱讀 35,735評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布词顾，位于F島的核電站八秃，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏计技。R本人自食惡果不足惜喜德，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,354評(píng)論 3贊 330
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望垮媒。院中可真熱鬧舍悯，春花似錦、人聲如沸睡雇。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,936評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)它抱。三九已至秕豫，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間观蓄，已是汗流浹背混移。一陣腳步聲響...
開封第一講書人閱讀 33,054評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留侮穿，地道東北人歌径。一個(gè)月前我還...
沈念sama閱讀 48,224評(píng)論 3贊 371
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像亲茅，于是被迫代替她去往敵國(guó)和親回铛。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,974評(píng)論 2贊 355

2.CSS

CSS（層疊樣式表）相關(guān)

1、BFC(塊級(jí)格式化上下文)

2派撕、盒模型

3、多欄布局要點(diǎn)

4睬魂、GPU加速

5氯哮、水平垂直居中

6际跪、自適應(yīng)布局

7、清除浮動(dòng)

8喉钢、CSS選擇器權(quán)重

9闲延、層疊上下文

10、display:none vsvisibility:hidden

11慨代、flex

容器屬性

項(xiàng)目屬性

12涮阔、grid

容器屬性

項(xiàng)目屬性

13奈嘿、animation

14、Retina屏幕1px邊框

15掺冠、移動(dòng)端1px邊框

16、多行文本溢出省略效果

推薦閱讀更多精彩內(nèi)容

10、`display:none` vs`visibility:hidden`