兩種盒模型

盒模型分為W3C的標(biāo)準(zhǔn)模型和IE模型

盒模型又稱為框模型，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、外邊距（margin）、邊框（border）

如圖：

W3C的標(biāo)準(zhǔn)模型：width/height屬性指content

IE模型：width/height屬性由content+padding+border組成

這兩種模型的區(qū)別就是計(jì)算的寬度和高度不同

通過CSS3新增的屬性box-sizing:content-box | border-box分別設(shè)置盒模型為標(biāo)準(zhǔn)模型（content-box）和IE模型（border-box）
W3C的標(biāo)準(zhǔn)模型：

<div class="content-box"></div>

.content-box {
  box-sizing: content-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid red;
  margin: 10px;
}

其中：width=100px

IE模型：

<div class="border-box"></div>

.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid red;
  margin: 10px;
}

其中：width= content + 2padding + 2border = 100px

相對(duì)比較而言：border-box更好用?。?！

擴(kuò)展：JS如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高呢？

dom.style.width / height;   // 設(shè)置獲取的是內(nèi)聯(lián)樣式
dom.currentStyle.width / height;   // IE支持
window.getComputedStyle(dom).width / height;   // 兼容性好
dom.getBoundingClientRect().width / height;   // 計(jì)算一個(gè)元素的絕對(duì)位置

為什么要初始化CSS樣式

因?yàn)闉g覽器的兼容問題，不同瀏覽器的部分標(biāo)簽?zāi)J(rèn)值都是不同的，如果沒有對(duì)CSS樣式初始化會(huì)出現(xiàn)各個(gè)瀏覽器之間的頁面顯示差異。

對(duì)CSS樣式初始化后會(huì)對(duì)SEO有一定的影響，所以力求影響最小的情況下進(jìn)行初始化。

最簡(jiǎn)單也不建議初始化的方式：

* {
  margin: 0;
  padding: 0;
}

可以使用normalize.css進(jìn)行CSS初始化。

以下是淘寶的樣式初始化代碼：

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend
,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

塊級(jí)元素與行內(nèi)元素分別有哪些以及各有什么特點(diǎn)

行內(nèi)元素

一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間，行內(nèi)元素前后不會(huì)產(chǎn)生換行，一系列的行內(nèi)元素都在一行顯示，直到該行排滿為止再另起一行。

行內(nèi)元素有：a、img、span、button、input、textarea、label、em、kbd、br、b、i、tt等等

特點(diǎn)：

1. 和其他元素都在同一行上；
2. 寬度(width)、高度(height)、內(nèi)邊距的top / bottom(padding-top / padding-bottom)和外邊距的top / bottom(margin-top / margin-bottom)都不可改變，但是padding、margin的left和right是可以設(shè)置的，line-height也是有效的。
3. 寬度就是它的文字或圖片的寬度，是不可改變的。
4. 行內(nèi)元素只能容納文本或者其他行內(nèi)元素，不能容納塊級(jí)元素。
5. 行內(nèi)元素會(huì)在一條直線上排列，都是同一行的，水平方向排列。

塊級(jí)元素

塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間，因此創(chuàng)建了一個(gè)“塊”。通常瀏覽器會(huì)在塊級(jí)元素前后另起一個(gè)新行。

塊級(jí)元素有：div、p、h1~h6、hr、ul、ol、li、dd、dl、table等等

特點(diǎn)：

1. 獨(dú)占一行，每一個(gè)塊級(jí)元素都會(huì)從新的一行重新開始
2. 寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可設(shè)置
3. 如果寬度沒有設(shè)置，則默認(rèn)寬度為容器的100%
4. 塊級(jí)元素可以容納行內(nèi)元素和其他塊級(jí)元素
5. 塊級(jí)元素各占據(jù)一行，垂直方向排列。

position有哪些常用的值

static

static是position屬性的默認(rèn)值，如果省略了position屬性，瀏覽器就認(rèn)為該元素為static定位。

瀏覽器會(huì)按照源碼的順序，決定每個(gè)元素的位置，這稱為"正常的頁面流"（normal flow）。每個(gè)塊級(jí)元素占據(jù)自己的區(qū)塊（block），元素與元素之間不產(chǎn)生重疊，這個(gè)位置就是元素的默認(rèn)位置。

static定位所導(dǎo)致的元素位置，是瀏覽器自主決定的，所以這時(shí)top、bottom、left、right這四個(gè)屬性無效，并且z-index設(shè)置也無效。

relative

relative表示相對(duì)定位，是默認(rèn)參照父級(jí)的原始點(diǎn)為原始點(diǎn)來定位的，若無父元素則按照上一個(gè)元素的底部為原始點(diǎn)進(jìn)行定位。

1. 相對(duì)定位不會(huì)影響元素本身的特性
2. 不會(huì)使元素脫落文檔流
3. 沒有定位偏移量時(shí)對(duì)元素?zé)o影響
4. top、bottom、left、right、z-index屬性有效

absolute

absolute表示絕對(duì)定位，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。

1. 使元素完全脫離文檔流
2. 可以改變行內(nèi)元素的特性，即可以設(shè)置寬高
3. 在未設(shè)置寬度時(shí)，寬度由內(nèi)容撐開寬度
4. 相對(duì)于最近的一個(gè)有定位的父元素偏移，若父元素沒有定位則逐層向上找直至body為止
5. top、bottom、left、right、z-index屬性有效

fixed

fixed表示絕對(duì)定位，相對(duì)于瀏覽器窗口進(jìn)行定位。即定位基點(diǎn)是瀏覽器窗口。這會(huì)導(dǎo)致元素的位置不隨頁面滾動(dòng)而變化，就好像固定在網(wǎng)頁上一樣。

搭配top、bottom、left、right這四個(gè)屬性一起使用，表示元素的初始位置是基于視口計(jì)算的，否則初始位置就是元素的默認(rèn)位置。

CSS中偽類與偽元素的區(qū)別

參考文章 - 總結(jié)偽類與偽元素

如何垂直居中

傳送門 - CSS實(shí)現(xiàn)垂直居中的幾種方法

如何水平居中

傳送門 - CSS實(shí)現(xiàn)水平居中的幾種方法

flex怎么用，常用屬性有哪些

傳送門 - Flex布局

騰訊云加社區(qū) - 30分鐘徹底弄懂flex布局

grid布局怎么用

阮一峰 - CSS Grid網(wǎng)格布局教程

display:none; 、visibility:hidden; 、opacity:0; 有什么區(qū)別

display:none;：

1. 隱藏對(duì)應(yīng)的元素，瀏覽器不會(huì)渲染，在文檔布局中不占據(jù)空間；
2. 無法進(jìn)行 DOM 事件監(jiān)聽；
3. 會(huì)引起重排，性能較差；
4. 不會(huì)被子元素繼承；

visibility:hideen;：

1. 隱藏對(duì)應(yīng)的元素，瀏覽器會(huì)渲染，在文檔布局中占據(jù)原來的空間；
2. 無法進(jìn)行 DOM 事件監(jiān)聽；
3. 只會(huì)引起重繪，性能較高；
4. 會(huì)被子元素繼承，子元素可以設(shè)置 visibility: visible; 來進(jìn)行顯示；

opacity:0;：

1. 將透明度為 100%，元素被隱藏了，在文檔布局中占據(jù)原來的空間；
2. 可以進(jìn)行 DOM 事件監(jiān)聽；
3. 提升為合成層，不會(huì)觸發(fā)重繪，性能較高；
4. 會(huì)被子元素繼承，但是子元素設(shè)置 opacity: 1; 無效；

使用 display:none; 屬性后，HTML 元素（對(duì)象）的寬度、高度等各種屬性值都將丟失；使用 visibility:hideen; 屬性后，HTML 元素（對(duì)象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在；而使用opacity:0;屬性后，也僅僅是將透明度設(shè)置成了 100%，以致于在視覺上完全看不見。

示例代碼

BFC是什么，舉例回答

傳送門 - 理解CSS中的BFC

[譯]:BFC與IFC

CSS選擇器的優(yōu)先級(jí)

1. 越具體優(yōu)先級(jí)越高；
2. 寫在后面的覆蓋前面的；
3. !important，最高，但是要少用！
4. !important > 行內(nèi)樣式 > id > class > tag

MDN - 優(yōu)先級(jí)

有趣：256個(gè)class選擇器可以干掉1個(gè)id選擇器

CSS哪些屬性可以繼承

繼承就是指子節(jié)點(diǎn)默認(rèn)使用父節(jié)點(diǎn)的樣式屬性。

可繼承的屬性大概有顏色、文字、字體間距、行高、對(duì)齊方式、列表的樣式。

1. 所有元素可繼承：元素可見性（visibility）、光標(biāo)屬性（cursor）；
2. 內(nèi)聯(lián)元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction；
3. 塊狀元素可繼承：text-indent、text-align；
4. 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image；

如何清除浮動(dòng)

方法一

為float后的元素添加clear屬性

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

.a,
.b {
  width: 100px;
  height: 100px;
  border: 5px solid red;
}
.b {
  float: right;
}
.a {
  float: left;
}
.c {
  border: 5px solid blue;
  height: 100px;
  clear: both;
}

示例代碼 - 方法一

方法二

給父容器添加clearfix的class，用偽元素clearfix::after設(shè)置樣式，清除浮動(dòng)。

<div class="parent clearfix">
    <div class="a">a</div>
    <div class="b">b</div>
</div>

.parent {
  border: 5px solid red;
}
.a,
.b {
  width: 100px;
  height: 100px;
  border: 5px solid blue;
}
.a {
  float: left;
}
.b {
  float: right;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

示例代碼 - 方法二

方法三

給父容器添加overflow:hidden或者auto。

<div class="parent">
    <div class="a">a</div>
    <div class="b">b</div>
</div>

.parent {
  border: 5px solid red;
  overflow: auto;
}
.a,
.b {
  width: 100px;
  height: 100px;
  border: 5px solid blue;
}
.a {
  float: left;
}
.b {
  float: right;
}

示例代碼 - 方法三

em與rem

傳送門 - 動(dòng)態(tài)REM

CSS3有哪些新特性

1. 新增各種css選擇器，例如：:root、:last-child、:first-of-type、:last-of-type等等
2. 三個(gè)動(dòng)畫相關(guān)特性：過渡（transition）、2D或3D轉(zhuǎn)換（transform）、動(dòng)畫（animation）
3. 三個(gè)邊框?qū)傩裕簣A角邊框（border-radius）、添加陰影（box-shadow）、使用圖片來繪制邊框（border-image）
4. 背景屬性：確定背景畫區(qū)（background-clip）、確定背景的位置（background-origin）、調(diào)整背景圖片的大小（background-size）
5. 文字效果：強(qiáng)制換行（word-wrap）、當(dāng)文本溢出包含它的元素該如何顯示（text-overflow）、文本陰影（text-shadow）、規(guī)定添加到文本的修飾（text-decoration）
6. 漸變：線性漸變（linear-gradient）、徑向漸變（radial-gradient）
7. 多列布局
8. 媒體查詢：@media
9. 字體：@font-face

去除inline-block元素間間隙的方法

傳送門 - 去除inline-block元素間間隙的幾種方法

如何適配各種移動(dòng)設(shè)備

白樹 - 移動(dòng)web資源整理

流云諸葛 - 從網(wǎng)易與淘寶的font-size思考前端設(shè)計(jì)稿與工作流

如何添加代碼使得圖片寬度為300px

<img src="#.png" style="width:500px!important;">

使用 CSS 有如下三種方法：

// 1. 最簡(jiǎn)單的就是直接在后面添加寬度并設(shè)置 !important 來覆蓋掉
<img src="#.png" style="width:500px!important; width:300px!important;">

// 2. 設(shè)置最大寬度
<img src="#.png" style="width:500px!important; max-width:300px;">

// 3. 使用 transform 來縮小
<img src="#.png" style="width:500px!important; transform:scale(0.6,0.6);">

使用 JS 的方法：

// 使用 setAttribute 來屬性
let img = document.querySelector("img")
img.setAttribute("style", "width:300px;")

示例代碼

用純CSS創(chuàng)建一個(gè)三角形

CSS代碼如下：

.triangle {
  width: 0;
  height: 0;
  border-width: 40px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

點(diǎn)擊預(yù)覽