??說(shuō)一下 css 盒模型

盒模型分為IE盒模型和W3C標(biāo)準(zhǔn)盒模型。盒子的寬度和高度的計(jì)算方式由box-sizing屬性控制.

box-sizing屬性值
content-box：默認(rèn)值，content內(nèi)容的寬高就是盒子width和height。
border-box：為元素設(shè)定的width和height屬性決定了元素的邊框盒。就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去 邊框 和 內(nèi)邊距 才能得到內(nèi)容的寬度和高度。
inherit：規(guī)定應(yīng)從父元素繼承box-sizing屬性的值

1. W3C 標(biāo)準(zhǔn)盒模型：

屬性width,height只包含內(nèi)容content，不包含border和padding。

width = 內(nèi)容的寬度

height = 內(nèi)容的高度

2. IE 盒模型：

屬性width,height包含border和padding，指的是content+padding+border。

width = border + padding + 內(nèi)容的寬度

height = border + padding + 內(nèi)容的高度

---

??畫(huà)一條 0.5px 的線

方法一、border-width: 0.5px

直接通過(guò)樣式來(lái)設(shè)置0.5px的邊框。當(dāng)然這個(gè)方案是非常理想的方案，但是事實(shí)總是殘酷的，它只在 iOS 8+ 上支持，對(duì)于 Android 無(wú)法支持。

.border {border: 1px #000 solid;}@media(min-device-pixel-ratio: 2) {border-width: 0.5px; }

當(dāng)然對(duì)于這種兼容性問(wèn)題我們可以通過(guò) JavaScript 來(lái)做降級(jí)處理，我們將默認(rèn)邊框設(shè)置為1px，分辨出來(lái)是 iOS 并且版本為 8 以上，就可以將邊框設(shè)置為0.5px；

方法二、移動(dòng)端，采用meta viewport的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

這樣子就能縮放到原來(lái)的0.5倍，如果是1px那么就會(huì)變成0.5px。

方法三、采用 transform: scale()的方式

transform: scale(0.5,0.5);

方法四、使用boxshadow

<style> .boxshadow {height: 1px;background: none;box-shadow: 0 0.5px 0 #000; } </style> <p>box-shadow: 0 0.5px 0 #000</p><div class="boxshadow"></div>

設(shè)置box-shadow的第二個(gè)參數(shù)為0.5px，表示陰影垂直方向的偏移為0.5px。

方法五、使用background-image結(jié)合SVG的方式

使用svg的line元素畫(huà)線，stroke表示描邊顏色，默認(rèn)描邊寬度stroke-width=“1”，由于svg的描邊等屬性的1px是物理像素的1px，相當(dāng)于高清屏的0.5px，

這樣在Chrome能很好的顯示，但在firefox掛了，究其原因是因?yàn)閒irefox的background-image如果是svg的話只支持命名的顏色，如"black"、"red"等，如果把上面代碼的svg里面的#000改成black的話就可以顯示出來(lái)，但是這樣就很不靈活了。因此，只能把svg轉(zhuǎn)成base64的形式，

最終如下：

.hr.svg {background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");//使用base64來(lái)使得支持firefoxbackground: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg=="); }

畫(huà)一條0.5px 線的方法 - 騰訊云開(kāi)發(fā)者社區(qū)-騰訊云

---

??link 標(biāo)簽和 @import 標(biāo)簽的區(qū)別

	link(鏈接式)	@import（導(dǎo)入式）
從屬關(guān)系	是HTML提供的標(biāo)簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等	CSS 提供的語(yǔ)法規(guī)則，只有導(dǎo)入樣式表的作用
加載順序	和頁(yè)面同時(shí)加載	頁(yè)面加載完畢后加載
兼容性	無(wú)兼容問(wèn)題	?IE5+
DOM可控性	可以通過(guò) JS 操作 DOM ，插入link標(biāo)簽來(lái)改變樣式	由于 DOM 方法是基于文檔的，無(wú)法使用@import的方式插入樣式
權(quán)重	大	小

link 屬于 html 標(biāo)簽，而@import 是 css 提供的
頁(yè)面被加載時(shí)，link 會(huì)同時(shí)被加載，而@import 引用的 css 會(huì)等到頁(yè)面加載結(jié)束后加
載。
link 是 html 標(biāo)簽，因此沒(méi)有兼容性，而@import 只有 IE5 以上才能識(shí)別。
link 方式樣式的權(quán)重高于@import 的。

https://www.cnblogs.com/my--sunshine/p/6872224.html

---

??transition 和 animation 的區(qū)別

一、transition（過(guò)渡、轉(zhuǎn)變的意思）

transition 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置四個(gè)過(guò)渡屬性：

1. transition-property：設(shè)置過(guò)渡效果的屬性名稱(chēng)（默認(rèn)值是all）；

2. transition-duration：設(shè)置過(guò)渡完成所需要的時(shí)間（默認(rèn)值是0）；

3. transition-timing-function：設(shè)置過(guò)渡速度效果曲線（默認(rèn)值是ease）；

4. transition-delay：設(shè)置過(guò)渡的開(kāi)始時(shí)間（默認(rèn)值是0）；

語(yǔ)法：transition: property duration timing-function delay;

注意：這里transition-duration是必須要填的，不填默認(rèn)為是0，沒(méi)有過(guò)渡效果。

二、animation（動(dòng)畫(huà)、活力的意思）

animation 屬性也是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置六個(gè)動(dòng)畫(huà)屬性：

1. animation-name：設(shè)置綁定到選擇器的@keyframem名稱(chēng)（默認(rèn)值是none）；

2. animation-duration：設(shè)置完成動(dòng)畫(huà)所花費(fèi)的時(shí)間（默認(rèn)值是0）；

3. animation-timing-function：設(shè)置動(dòng)畫(huà)的速度曲線（默認(rèn)值是ease）；

4. animation-delay：設(shè)置動(dòng)畫(huà)延遲幾秒開(kāi)始（默認(rèn)值是0）；

5. animation-iteration-count：設(shè)置動(dòng)畫(huà)播放的次數(shù)（默認(rèn)值是1）；

6. animation-direction：設(shè)置時(shí)候輪流反向播放動(dòng)畫(huà)（默認(rèn)值是normal）；

語(yǔ)法：animation: name duration timing-function delay iteration-count direction;

注意：這里animation-duration是必須要填的，不填默認(rèn)是0，就不會(huì)播放動(dòng)畫(huà)了。

三、相同點(diǎn)

Animation 和 transition 大部分屬性是相同的，他們都是隨時(shí)間改變?cè)氐膶傩灾怠?/p>

四、區(qū)別

1. transition是一個(gè)過(guò)渡的效果，沒(méi)有中間狀態(tài)，需要設(shè)置觸發(fā)事件（如hover等）才能執(zhí)行；transition 為 2 幀，從 from .... to

2. animation是一個(gè)動(dòng)畫(huà)的效果，有多個(gè)中間幀，可以在任意一個(gè)中間幀設(shè)置狀態(tài)，不需要設(shè)置觸發(fā)事件就能執(zhí)行。animation 可以一幀一幀的。

---

??Flex 布局

什么是Flex布局

Flex是Flexible?Box的縮寫(xiě) flex布局表示彈性布局，可以為盒狀模型提供最大的靈活性。

適用范圍

任何一種元素都可以指定為flex布局

.wrap{display:flex; }

行內(nèi)元素也可以使用Flex布局。

.box{display: inline-flex; }

Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。

.box{display: -webkit-flex; /* Safari */display: flex; }

flex布局中的一些基本概念

容器和項(xiàng)目

什么叫容器
采用flex布局的元素被稱(chēng)作容器。

什么叫項(xiàng)目
在flex布局中的子元素被稱(chēng)作項(xiàng)目。

即父級(jí)元素采用flex布局，則父級(jí)元素為容器，全部子元素自動(dòng)成為項(xiàng)目。

容器的一些屬性

有六個(gè)常用屬性設(shè)置在容器上，分別為：

• flex-direction （水平方向）
• flex-wrap （是否換行）
• flew-flow （flex-deriction和flex-wrap屬性的簡(jiǎn)寫(xiě)）
• justify-content （對(duì)齊方式）
• align-items （垂直方向）
• align-content （多根軸線的對(duì)齊方式）

flex-direction

設(shè)置容器主軸的方向，橫的還是豎的

.wrap{flex-direction:row | row-reverse | column | column=reverse; }

包含四個(gè)屬性值：

row: 默認(rèn)值，表示沿水平方向，由左到右

row-reverse ：表示沿水平方向，由右到左

column：表示垂直方向，由上到下

column-reverse:表示垂直方向，由下到上

flex-wrap

設(shè)置是否換行

.wrap{flex-wrap:nowrap | wrap | wrap-reverse; }

包含三個(gè)屬性值：

nowrap：表示不換行，說(shuō)明：設(shè)置的項(xiàng)目的寬度就失效了，強(qiáng)行在一行顯示

wrap：正常換行，第一個(gè)位于第一行的第一個(gè)

wrap-reverse：向上換行，第一行位于下方

flex-flow

flex-flow屬性是flex-deriction和flex-wrap屬性的簡(jiǎn)寫(xiě)，默認(rèn)值為[row nowrap]

.box {flex-flow: row-reverse wrap; }

第一個(gè)屬性值為flex-direction的屬性值

第二個(gè)屬性值為flex-wrap的屬性值

justify-content

設(shè)置項(xiàng)目在容器中的左右對(duì)齊方式

.wrap{justify-content: flex-start | flex-end | center |space-between | space-around }

該屬性主要要五個(gè)屬性值：

flex-start：默認(rèn)值，左對(duì)齊

flex-end：右對(duì)齊

center：居中對(duì)齊

space-between：兩端對(duì)齊

space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間距相等

align-items?

項(xiàng)目在交叉軸上是如何對(duì)齊顯示的

該屬性主要有五個(gè)屬性值：（以交叉軸從上向下為例）

flex-start:交叉軸的起點(diǎn)對(duì)齊

flex-end 交叉軸的終點(diǎn)對(duì)齊

center 交叉軸居中對(duì)齊

baseline 項(xiàng)目的第一行文字的基線對(duì)齊
stretch：默認(rèn)值：如果項(xiàng)目未設(shè)置高度或者高度為auto，將占滿(mǎn)整個(gè)容器的高度

align-content

align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

該屬性可能取6個(gè)值。

flex-start：與交叉軸的起點(diǎn)對(duì)齊。
flex-end：與交叉軸的終點(diǎn)對(duì)齊。
center：與交叉軸的中點(diǎn)對(duì)齊。
space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認(rèn)值）：軸線占滿(mǎn)整個(gè)交叉軸。

項(xiàng)目的一些屬性

order
order屬性設(shè)置項(xiàng)目排序的位置，默認(rèn)值為0，數(shù)值越小越靠前

.item{order:<Integer>; }.green-item{order:-1; }

flex-grow?

flex-group屬性用來(lái)控制當(dāng)前項(xiàng)目是否放大顯示。默認(rèn)值為0，表示即使容器有剩余空間也不放大顯示。如果設(shè)置為1，則平均分?jǐn)偤蠓糯箫@示。

.green-item{order:-1;flex-grow:2; }

flex-shrink?

flex-shrink屬性表示元素的縮小比例。默認(rèn)值為1，如果空間不夠用時(shí)所有的項(xiàng)目同比縮小。如果一個(gè)項(xiàng)目的該屬性設(shè)置為0，則空間不足時(shí)該項(xiàng)目也不縮小。

flex-basis

flex-basis屬性表示表示項(xiàng)目占據(jù)主軸空間的值。默認(rèn)為auto，表示項(xiàng)目當(dāng)前默認(rèn)的大小。如果設(shè)置為一個(gè)固定的值，則該項(xiàng)目在容器中占據(jù)固定的大小。

flex屬性

flex屬性是 flex-grow屬性、flex-shrink屬性、flex-basis屬性的簡(jiǎn)寫(xiě)。默認(rèn)值為：0 1 auto；

.item{flex:(0 1 auto) | auto(1 1 auto) | none (0 0 auto) }

align-self?

align-self屬性表示當(dāng)前項(xiàng)目可以和其他項(xiàng)目擁有不一樣的對(duì)齊方式。它有六個(gè)可能的值。默認(rèn)值為auto
auto：和父元素align-self的值一致

flex-start：頂端對(duì)齊

flex-end：底部對(duì)齊

center：豎直方向上居中對(duì)齊

baseline：item第一行文字的底部對(duì)齊

stretch：當(dāng)item未設(shè)置高度時(shí)，item將和容器等高對(duì)齊

---

??BFC（塊級(jí)格式化上下文，用于清楚浮動(dòng)，防止 margin 重疊等）

是什么？

一塊區(qū)域，一塊擁有著自己的渲染規(guī)則的區(qū)域。只要為一個(gè)普通的元素添加BFC的特征屬性（下面會(huì)講BFC特征屬性有哪些），就可以讓其變?yōu)橐粋€(gè)BFC。

BFC特征屬性：

1. 根元素：<html/>

2. float：left、right

3. position：absolute、fixed

4. display：inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex、inline-flex、grid、inline-grid

5. overflow：hidden、auto、scroll

6. contain：layout、content、paint

7. 多列容器（元素的column-count/column-width不為auto，包括column-count為1）

有什么作用？

BFC可以被看做是一個(gè)“隔離了的”獨(dú)立容器，容器內(nèi)的元素在布局上不會(huì)影響到外面的元素。因此，其作用主要有3個(gè)：

BFC 區(qū)域不會(huì)與 float box 重疊
BFC 是頁(yè)面上的一個(gè)獨(dú)立容器，子元素不會(huì)影響到外面
計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算

1. 避免外邊距重疊

舉例：兩個(gè)擁有margin屬性的div縱向排列時(shí)，二者border之間的距離為：兩個(gè)div的margin屬性較大的那個(gè)值，也就是較小的margin屬性會(huì)被覆蓋在下面。但是如果我們的目的就是讓兩個(gè)margin屬性都顯示，不被覆蓋，這個(gè)時(shí)候就可以用到BFC。

做法：將兩個(gè)div分別包裹在兩個(gè)容器中，為這兩個(gè)容器添加BFC特征屬性，讓這兩個(gè)容器均變?yōu)锽FC，那么在每個(gè)BFC中，div的margin屬性均會(huì)顯露出來(lái)，也就不會(huì)重合了

2. 清除浮動(dòng)：

父元素father中嵌套一個(gè)子元素son，為子元素添加float：left屬性。這個(gè)時(shí)候，父元素就會(huì)出現(xiàn)高度塌陷，視覺(jué)效果就是父元素變成了一條線，子元素跑到了父元素的外部，并沒(méi)有被包裹在這個(gè)父元素中，即浮動(dòng)導(dǎo)致的脫離文檔流。

做法：為father添加BFC屬性，就可以讓son再次回到文檔流

3. 阻止元素被浮動(dòng)元素覆蓋

兩個(gè)相鄰div：brother1和brother2，為brother1添加float：left屬性。這個(gè)時(shí)候，brother1會(huì)覆蓋在brother2上面，如果想讓brother1位于brother左側(cè)

做法：為brother2添加BFC特征屬性，以觸發(fā)正常元素的BFC屬性

鏈接：?BFC（塊級(jí)格式化上下文，用于清楚浮動(dòng)，防止ma__?？途W(wǎng)
來(lái)源：牛客網(wǎng)

---

? 8種垂直居中的方法

1、display：flex

//父盒子 .box {display: flex;align-item: center; }

2、使用css-table實(shí)現(xiàn)?

??????display:?table-cell;?

?????vertical-align: middle;

注意：這種方式其實(shí)是父元素要固定寬高

vertical-align 屬性設(shè)置一個(gè)元素的垂直對(duì)齊方式。
該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。允許指定負(fù)長(zhǎng)度值和百分比值。這會(huì)使元素降低而不是升高。在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。

//父盒子 .box {display: table-cell;vertical-align: middle; }

3、?margin，transform配合

.box {overflow: hidden; //防止塌陷.box1 {margin:50% auto;transform: translateY(-50%); } }

4、inline-block+vertical-aligin

父子都要設(shè)置行高line-height

.box {line-height: 300px;.box1 {line-height:100px;display: inline-block;vertical-align: middle;} }

5、absolute+負(fù)margin 子絕父相，子top50% ,margin:? - 高度 / 2

.box {position: relative;.box1 {position: absolute;top: 50%;margin-top: -50px;} }

6、absolute+margin:auto （寬高未知時(shí)使用）

.box {position: relative;.box1 {position: absolute;top: 0;bottom: 0;margin: auto;} }

7、absolute+transform

.box {position: relative;.box1 {position: absolute;top: 50%;transform: translateY(-50%);} }

8、使用網(wǎng)格布局grid+align-self+justify-self實(shí)現(xiàn)

注意：這種方式父元素要沒(méi)有其他的子元素或者是內(nèi)容

.box {display: grid;.box1 {align-self: center; //垂直居中justify-self: center; //水平居中} }

8種垂直居中的方法_「已注銷(xiāo)」的博客-CSDN博客

css垂直居中的6種方式_KinHKin(五年前端)的博客-CSDN博客

---

??關(guān)于 JS 動(dòng)畫(huà)和 css3 動(dòng)畫(huà)的差異性

JS動(dòng)畫(huà)（逐幀動(dòng)畫(huà)）:

首先，在js動(dòng)畫(huà)是逐幀動(dòng)畫(huà)，是在時(shí)間幀上逐幀繪制幀內(nèi)容，由于是一幀一幀的話，所以其可操作性很高，幾乎可以完成任何想要的動(dòng)畫(huà)形式。但是由于逐幀動(dòng)畫(huà)的幀序列內(nèi)容不一樣，會(huì)增加制作負(fù)擔(dān)，且資源占有比較大。

但是，如果幀速率太低，則從一個(gè)幀到另一個(gè)幀的過(guò)渡很可能是不自然且不一致的。

缺點(diǎn)：

• js是單線程的腳本語(yǔ)言，當(dāng)js在瀏覽器主線程運(yùn)行時(shí)，主線程還有其他需要運(yùn)行的js腳本、樣式、計(jì)算、布局、交互等一系列任務(wù)，對(duì)其干擾線程可能出現(xiàn)阻塞，造成丟幀的情況。
• 其次，js在做動(dòng)畫(huà)的時(shí)候，其復(fù)雜度是高于css3的，需要考慮一些計(jì)算，操作等方便問(wèn)題。

優(yōu)點(diǎn)：

• JavaScript動(dòng)畫(huà)控制能力很強(qiáng)，可以控制動(dòng)畫(huà)在播放過(guò)程中：開(kāi)始、暫停、播放、終止、取消都可以完成。
• 因?yàn)樗嗨婆c電影播放模式，很適合于表演很細(xì)膩的動(dòng)畫(huà)，如3D效果、人物或動(dòng)物急劇轉(zhuǎn)身等等效果。
• 功能涵蓋面，JS 比 CSS 大。
• 動(dòng)畫(huà)效果比CSS3動(dòng)畫(huà)更豐富，一些動(dòng)畫(huà)效果，如曲線運(yùn)動(dòng)、沖擊閃爍、視差滾動(dòng)等效果，只有JavaScript動(dòng)畫(huà)才能完成。
• CSS3有兼容性問(wèn)題，而JS大多數(shù)時(shí)候沒(méi)有兼容性問(wèn)題。

css3（補(bǔ)間動(dòng)畫(huà)） :

?css3動(dòng)畫(huà)的制作方法簡(jiǎn)單方便。只需確定第一幀和最后一幀的關(guān)鍵位置即可，兩個(gè)關(guān)鍵幀之間幀的內(nèi)容由Composite線程自動(dòng)生成，不需要人為處理。當(dāng)然也可以多次添加關(guān)鍵幀的位置。

? ? ? ?因?yàn)橹辉O(shè)置幾個(gè)關(guān)鍵幀的位置，所以在進(jìn)行動(dòng)畫(huà)控制的時(shí)候時(shí)比較弱的。不能夠在半路暫停動(dòng)畫(huà)，或者在動(dòng)畫(huà)過(guò)程中不能對(duì)其進(jìn)行一些操作等。

? ? ? ?css3在實(shí)現(xiàn)一些簡(jiǎn)單的滑動(dòng)，翻轉(zhuǎn)等特效的時(shí)候會(huì)很方便，但是想要做到一些酷炫的效果的時(shí)候，其操作往往可能會(huì)比js操作有更多的冗余。

? ? ? ?css3在做動(dòng)畫(huà)的時(shí)候，瀏覽器可以對(duì)其進(jìn)行一些優(yōu)化，會(huì)比js使用更少的占用cpu資源，但是效果足夠流暢。

優(yōu)點(diǎn)：

（1）瀏覽器可以?xún)?yōu)化動(dòng)畫(huà)。

（2）代碼相對(duì)簡(jiǎn)單，并且性能調(diào)整方向是固定的。

（3）對(duì)于幀速率性能較差的低版本瀏覽器，CSS3可以自然降級(jí)，而JS需要編寫(xiě)其他代碼。

缺點(diǎn)：

1.運(yùn)行過(guò)程的控制較弱，不可能附加事件綁定回調(diào)函數(shù)。 CSS動(dòng)畫(huà)只能暫停，無(wú)法在動(dòng)畫(huà)中找到特定的時(shí)間點(diǎn)，不能中途反轉(zhuǎn)動(dòng)畫(huà)，無(wú)法更改時(shí)間比例，無(wú)法添加回調(diào)函數(shù)或?qū)⒉シ攀录壎ǖ教囟ㄎ恢?#xff0c;并且沒(méi)有進(jìn)度報(bào)告

2。 代碼冗長(zhǎng)。 如果您想使用CSS來(lái)實(shí)現(xiàn)稍微復(fù)雜一點(diǎn)的動(dòng)畫(huà)，那么CSS代碼最終將變得非常繁瑣。

總結(jié)：

如果動(dòng)畫(huà)只是簡(jiǎn)單的狀態(tài)切換，不需要中間過(guò)程控制，在這種情況下，css動(dòng)畫(huà)是優(yōu)選方案。

如果你在設(shè)計(jì)很復(fù)雜的富客戶(hù)端界面或者在開(kāi)發(fā)一個(gè)有著復(fù)雜UI狀態(tài)的 APP。那么你應(yīng)該使用js動(dòng)畫(huà)，這樣你的動(dòng)畫(huà)可以保持高效，并且你的工作流也更可控。

js動(dòng)畫(huà)與css3動(dòng)畫(huà)的區(qū)別_js逐幀動(dòng)畫(huà)_Sco_Jing1031的博客-CSDN博客

---

??說(shuō)一下塊元素和行元素

塊元素：獨(dú)占一行，并且有自動(dòng)填滿(mǎn)父元素，可以設(shè)置 margin 和 pading 以及高度和寬度。
行元素：不會(huì)獨(dú)占一行，width 和 height 會(huì)失效，并且在垂直方向的 padding 和margin 會(huì)失效。

---

??CSS3 中對(duì)溢出的處理

overflow：

• visible：默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素將之外。
• hidden:??內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。
• scroll：內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)提供滾動(dòng)條以便于查看其他內(nèi)容。
• auto：文本溢出則顯示滾動(dòng)條，不溢出則不顯示。
• inherited：規(guī)定應(yīng)該從父元素繼承overflow的屬性值
• x軸、y軸：overflow-x、overflow-y針對(duì)兩個(gè)軸分別設(shè)置

overflow: visible | hidden | scroll | auto | inherit;overflow-x: visible | hidden | scroll | auto | inherit;overflow-y: visible | hidden | scroll | auto | inherit;

---

? 單、多行元素的文本省略號(hào)

單行

????????1、white-space:?nowrap;?文本超過(guò)容器最大寬度不換行(若文本自動(dòng)顯示在一行則不需要這個(gè)屬性)? 。

? ? ? ? 2、overflow:?hidden; 文本超出容器最大寬度的部分不顯示。

? ? ? ? 3、text-overflow:?ellipsis;?文本超出容器最大寬度時(shí)顯示三個(gè)點(diǎn)。

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

?多行

????????1、width：xxpx；（容器寬度：（必須要有寬度）px、%，都可以）；

? ? ? ? 2、text-overflow:ellipsis;? 溢出文本顯示省略號(hào)。

? ? ? ? 3、display: -webkit-box 主要是控制父容器里面子元素的排列方式 ，讓容器變成一個(gè)彈性伸縮盒子。

? ? ? ? 4、-webkit-line-clamp: 2; 最大顯示的文本行數(shù)。

? ? ? ? 5、-webkit-box-orient: vertical;? 設(shè)置或檢索伸縮盒對(duì)象的子元素縱向排列。

? ? ? ? 6、overflow : hidden;文本溢出隱藏。

p {width: 100px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden; }

---

??三種隱藏方式的區(qū)別：visibility=hidden, opacity=0，display:none

1、display:none隱藏 display:black 顯示

2、visibility: hidden 隱藏 visibility: visible 顯示

3、 opacity: 0 隱藏 opacity：1 顯示

結(jié)構(gòu)

display:none:?瀏覽器不會(huì)渲染 display 屬性為 none 的元素，不占據(jù)空間。
visibility: hidden:元素被隱藏，但是會(huì)被渲染不會(huì)消失，占據(jù)空間。
opacity: 0:?透明度為 100%，元素隱藏，占據(jù)空間。

繼承

display: none不會(huì)被子元素繼承，畢竟子類(lèi)也不會(huì)被渲染。
visibility: hidden：會(huì)被子元素繼承，子元素可以通過(guò)設(shè)置 visibility: visible; 來(lái)取消隱藏。
opacity: 0：會(huì)被子元素繼承,且，子元素并不能通過(guò) opacity: 1 來(lái)取消隱藏。

性能

display none :?動(dòng)態(tài)改變此屬性時(shí)會(huì)引起重排，性能較差。
visibility:hidden:?動(dòng)態(tài)改變此屬性時(shí)會(huì)引起重繪，性能較高。
opacity: 0：?提升為合成層，不會(huì)觸發(fā)重繪，性能較高。

事件監(jiān)聽(tīng)

display none :?無(wú)法進(jìn)行 DOM 事件監(jiān)聽(tīng)。
visibility:hidden:?無(wú)法進(jìn)行 DOM 事件監(jiān)聽(tīng)。
opacity: 0：可以進(jìn)行 DOM 事件監(jiān)聽(tīng)。

transition

display none :?transition 不支持 display。
visibility:hidden:?transition 不支持 display。
opacity: 0：transition 不支持 opacity。

---

??雙邊距重疊問(wèn)題（外邊距折疊）

多個(gè)相鄰（兄弟或者父子關(guān)系）普通流的塊元素垂直方向marigin會(huì)重疊

折疊的結(jié)果為：

兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。

---

??position 屬性 比較

1、固定定位fixed：

元素的位置相對(duì)于瀏覽器窗口是固定位置，即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)。Fixed定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。 Fixed定位的元素和其他元素重疊。

2、相對(duì)定位relative：

如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。 在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。

3、絕對(duì)定位absolute：

絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒(méi)有已定位的父元素，那么它的位置相對(duì)于<html>。 absolute 定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。 absolute 定位的元素和其他元素重疊。

4、粘性定位sticky：

元素先按照普通文檔流定位，然后相對(duì)于該元素在流中的flow root（BFC）和 containing block（最近的塊級(jí)祖先元素）定位。而后，元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位，之后為固定定位。

5、默認(rèn)定位Static：

默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略top, bottom, left, right 或者 z-index 聲明）。

6、inherit:

規(guī)定應(yīng)該從父元素繼承position 屬性的值。

---

清除浮動(dòng)的方法（最常用的4種）

一、 額外標(biāo)簽法：?

1.給父元素的內(nèi)部加入一個(gè)塊級(jí)元素

2.該塊級(jí)元素添加一個(gè)clear:both的屬性

優(yōu)點(diǎn)：?通俗易懂，書(shū)寫(xiě)方便。（不推薦使用）
缺點(diǎn)：?添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)化比較差。

<div class="fahter"><div class="big">big</div><div class="small">small</div><div class="clear">額外標(biāo)簽法</div> </div> .clear{clear:both; }

二、 父級(jí)添加overflow方法： 可以通過(guò)觸發(fā)BFC的方式，實(shí)現(xiàn)清楚浮動(dòng)效果。必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度

優(yōu)點(diǎn)： 簡(jiǎn)單、代碼少、瀏覽器支持好

缺點(diǎn)： 內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素。不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。

注意：?別加錯(cuò)位置，是給父親加（并不是所有的浮動(dòng)都需要清除，誰(shuí)影響布局，才清除誰(shuí)。）

.fahter{width: 400px;border: 1px solid deeppink;overflow: hidden; }

三、單偽標(biāo)簽法?：由偽元素代替額外標(biāo)簽，是空元素的升級(jí)版，因?yàn)轭~外元素會(huì)讓html結(jié)構(gòu)變得復(fù)雜，好處是不用單獨(dú)加標(biāo)簽了。IE8以上和非IE瀏覽器才支持:after，，zoom(IE專(zhuān)有屬性)可解決ie6,ie7浮動(dòng)問(wèn)題（較常用推薦）

優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想，結(jié)構(gòu)語(yǔ)義化正確，不容易出現(xiàn)怪問(wèn)題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

缺點(diǎn)： 由于IE6-7不支持：after，使用zoom：1

.clearfix::after{/*偽元素是行內(nèi)元素 正常瀏覽器清除浮動(dòng)方法*/content: "";display: block;height: 0;clear:both;visibility: hidden;}.clearfix{*zoom: 1;/*ie6清除浮動(dòng)的方式 *號(hào)只有IE6-IE7執(zhí)行，其他瀏覽器不執(zhí)行*/}<body><div class="father clearfix"><div class="big">big</div><div class="small">small</div><!--<div class="clear">額外標(biāo)簽法</div>--></div><div class="footer"></div> </body>

四、雙偽標(biāo)簽法：（較常用推薦）

這種方法不僅可以清除浮動(dòng)還可以防止塌陷，塌陷的條件是父子元素都為塊級(jí)元素，且嵌套

優(yōu)點(diǎn)：?代碼更簡(jiǎn)潔

<style>.father{border: 1px solid black;*zoom: 1;}.clearfix:after,.clearfix:before{content: "";display: block;clear: both;}.big ,.small{width: 200px;height: 200px;float: left;}.big{background-color: red;}.small{background-color: blue;}</style><div class="father clearfix"><div class="big">big</div><div class="small">small</div></div><div class="footer"></div></div>

五、父級(jí)div定義 height：?父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題。

優(yōu)點(diǎn)：?簡(jiǎn)單、代碼少、容易掌握

缺點(diǎn)：?只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問(wèn)題

清除浮動(dòng)的幾種方法_小阿哈的博客-CSDN博客

清除浮動(dòng)的4種方式_star@星空的博客-CSDN博客

---

??css3 新特性

CSS3的新特性有：

1、CSS3選擇器

2、CSS3圓角與邊框（盒陰影）border-radius，box-shadow 等

3、CSS背景與漸變,?background-size，background-origin 等；

4、CSS3過(guò)渡；

5、CSS3變換,?2D，3D 轉(zhuǎn)換如 transform 等

6、CSS3動(dòng)畫(huà)如animation 等。

https://www.cnblogs.com/tiyou/p/16172145.html

【css】CSS3有哪些新特性_css3新特性_光明山頂?shù)牟┛?CSDN博客

??CSS 選擇器有哪些，優(yōu)先級(jí)呢

• 選擇器優(yōu)先級(jí)由高到低分別為：
  css優(yōu)先級(jí): !important>行間樣式> ID選擇器>屬性選擇器&&偽類(lèi)選擇器&&類(lèi)選擇器>元素選擇器
  具體：
  a:行內(nèi)樣式:優(yōu)先級(jí)1000
  b:ID選擇器:優(yōu)先級(jí)100
  c:類(lèi)選擇器:優(yōu)先級(jí)10 (偽類(lèi)屬性?xún)?yōu)先級(jí)10 ）
  d:元素選擇器:優(yōu)先級(jí)1
  注意：! important:優(yōu)先級(jí)最大10000 (用了后就不能修改慎用)

具體例子：
span 優(yōu)先級(jí)1
div span 優(yōu)先級(jí)1+1
div:first-child == 1+10
.p1 span 優(yōu)先級(jí)10+1.
#divI span 優(yōu)先級(jí)100+1

• 當(dāng)比較多個(gè)相同級(jí)別的CSS選擇器優(yōu)先級(jí)時(shí)，它們定義的位置將決定一切。下面從位置上將CSS優(yōu)先級(jí)由高到低分為六級(jí)：
  1、位于<head/>標(biāo)簽里的<style/>中所定義的CSS擁有最高級(jí)的優(yōu)先權(quán)。
  2、第二級(jí)的優(yōu)先屬性由位于 <style/>標(biāo)簽中的 @import 引入樣式表所定義。
  3、第三級(jí)的優(yōu)先屬性由<link/>標(biāo)簽所引入的樣式表定義。
  4、第四級(jí)的優(yōu)先屬性由<link/>標(biāo)簽所引入的樣式表內(nèi)的 @import 導(dǎo)入樣式表定義。
  5、第五級(jí)優(yōu)先的樣式有用戶(hù)設(shè)定。
  6、最低級(jí)的優(yōu)先權(quán)由瀏覽器默認(rèn)。

• CSS基礎(chǔ)知識(shí)-選擇器的種類(lèi)及優(yōu)先級(jí) - 簡(jiǎn)書(shū)

  ---

  ??css 動(dòng)畫(huà)如何實(shí)現(xiàn)

css實(shí)現(xiàn)動(dòng)畫(huà)主要有3種方式：

①、transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)，

②、transform轉(zhuǎn)變動(dòng)畫(huà)，

③、animation實(shí)現(xiàn)自定義動(dòng)畫(huà)。

一、transition過(guò)渡動(dòng)畫(huà)

.box {transition: property duration timing-function delay; }

1、 transition: 屬性是個(gè)復(fù)合屬性

transition-property： 規(guī)定設(shè)置過(guò)渡效果的 css 屬性名稱(chēng)
transition-duration： 規(guī)定完成過(guò)渡效果需要多少秒或毫秒
transition-timing-function：指定過(guò)渡函數(shù), 規(guī)定速度效果的速度曲線
transition-delay： 指定開(kāi)始出現(xiàn)的延遲時(shí)間
2、默認(rèn)值為：transition: all 0 ease 0;
3、單個(gè) css 屬性的過(guò)渡效果時(shí)：

.box {transition: background 0.8s ease-in 0.3s; }

有多個(gè) css 屬性的過(guò)渡效果時(shí)：

.box {transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s; }

二、transform 變形動(dòng)畫(huà)

可以利用 transform 功能來(lái)實(shí)現(xiàn)文字或圖像的 旋轉(zhuǎn)、縮放、傾斜、移動(dòng) 這四種類(lèi)型的變形處理

.box {transform: rotate(45deg);transform: scale(0.5);transform: skew(30deg);transform: translate(100px); }

1、旋轉(zhuǎn) rotate

1.1、 用法: 主要分為2D旋轉(zhuǎn)和3D旋轉(zhuǎn)。

2D 旋轉(zhuǎn)

transform: rotate(45deg); // 順時(shí)針旋轉(zhuǎn)45度

3D旋轉(zhuǎn)：圍繞原地到(x,y,z)的直線進(jìn)行3D旋轉(zhuǎn)

transform: rotate(x,y,z,angle);

x,y,z：分別表示 X、Y 和 Z 軸方向，都不能省略；
angle：設(shè)置對(duì)象設(shè)置對(duì)象的旋轉(zhuǎn)角度，不能省略；
rotateX(angle)，沿著X軸進(jìn)行3D旋轉(zhuǎn)；rotateY(angle)，沿著Y軸進(jìn)行3D旋轉(zhuǎn)；rotateZ(angle)，沿著Z軸進(jìn)行3D旋轉(zhuǎn)；
一個(gè)參數(shù) “角度”，單位 deg 為度的意思，正數(shù)為順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn)。

2、縮放 scale

2.1、主要分為2D縮放和3D縮放

2D縮放

transform: scale(0.5); transform: scale(0.5, 2);

• 一個(gè)參數(shù)時(shí)： 表示水平和垂直同時(shí)縮放該倍率；
• 兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)指定水平方向的縮放倍率，第二個(gè)參數(shù)指定垂直方向的縮放倍率 。

3D縮放

transform: scale3d(x, y, z); transform: scaleX(x); transform: scaleY(y); transform: scaleZ(z);

• x、y、z為收縮比例

3. 傾斜 skew

transform: skew(30deg) ; transform: skew(30deg, 30deg);

• 一個(gè)參數(shù)時(shí)：表示水平方向的傾斜角度 ；
• 兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)表示水平方向的傾斜角度，第二個(gè)參數(shù)表示垂直方向的傾斜角度 。
• skew 的默認(rèn)原點(diǎn) transform-origin 是這個(gè)物件的中心點(diǎn)

4. 移動(dòng) translate

4.1、2D移動(dòng)

transform: translate(45px); transform: translate(45px, 150px); //沿著X軸和Y軸同時(shí)移動(dòng)

• 一個(gè)參數(shù)時(shí)：表示水平方向的移動(dòng)距離；
• 兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)表示水平方向的移動(dòng)距離，第二個(gè)參數(shù)表示垂直方向的移動(dòng)距離 。

4.2、3D移動(dòng)

transform: translateX(100px); //僅僅是在X軸上移動(dòng) transform: translateY(100px); //僅僅是在Y軸上移動(dòng) transform: translateZ(100px); //僅僅是在Z軸上移動(dòng)（注意：translateZ一般都是用px單位） transform: translate3d(x,y,z); //在x，y，z軸上都移動(dòng)

transformZ的直觀表現(xiàn)形式就是大小變化，實(shí)質(zhì)是XY平面相對(duì)于視點(diǎn)的遠(yuǎn)近變化（說(shuō)遠(yuǎn)近就一定會(huì)說(shuō)到離什么參照物遠(yuǎn)或近，在這里參照物就是perspective屬性）。比如設(shè)置了perspective為200px;那么transformZ的值越接近200，就是離的越近，看上去也就越大，超過(guò)200就看不到了，因?yàn)橄喈?dāng)于跑到后腦勺去了，我相信你正常情況下，是看不到自己的后腦勺的。
x和y可以是長(zhǎng)度值，也可以是百分比，百分比是相對(duì)于其本身元素水平方向的寬度和垂直方向的高度；z只能設(shè)置長(zhǎng)度值。

5. 基準(zhǔn)點(diǎn) transform-origin

在使用 transform 方法進(jìn)行文字或圖像的變形時(shí)，是以元素的中心點(diǎn)為基準(zhǔn)點(diǎn)進(jìn)行的 。 使用 transform-origin 屬性，可以改變變形的基準(zhǔn)點(diǎn) 。
用法: transform-origin: 10px 10px;
表示相對(duì)左上角原點(diǎn)的距離，單位 px，第一個(gè)參數(shù)表示相對(duì)左上角原點(diǎn)水平方向的距離，第二個(gè)參數(shù)表示相對(duì)左上角原點(diǎn)垂直方向的距離；
兩個(gè)參數(shù)除了可以設(shè)置為具體的像素值，其中第一個(gè)參數(shù)可以指定為 left、center、right，第二個(gè)參數(shù)可以指定為 top、center、bottom。

6. 多方法組合變形

這四種變形方法順序可以隨意， 但不同的順序?qū)е伦冃谓Y(jié)果不同， 原因是變形的順序是從左到右依次進(jìn)行。

transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

三、 animation 關(guān)鍵幀動(dòng)畫(huà)

1. 在 CSS3 中創(chuàng)建動(dòng)畫(huà), 您需要學(xué)習(xí) @keyframes 規(guī)則 。
???2. @keyframes 規(guī)則用于創(chuàng)建動(dòng)畫(huà) 。 在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式, 就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫(huà)效果 。
???3. 必須定義動(dòng)畫(huà)的名稱(chēng)和時(shí)長(zhǎng) 。 如果忽略時(shí)長(zhǎng), 則動(dòng)畫(huà)不會(huì)允許, 因?yàn)槟J(rèn)值是 0。
???4. 請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間, 或用關(guān)鍵詞 “from” 和 “to”, 等同于 0% 和 100% 。

5. 語(yǔ)法
?????

animation: name duration timing-function delay iteration-count direction;

??????1. animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱(chēng)
??????2. animation-duration 規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。
??????3. animation-timing-function 規(guī)定動(dòng)畫(huà)的速度曲線。 默認(rèn)是 “ease”。
??????4. animation-delay 規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始 。 默認(rèn)是 0。
??????5. animation-iteration-count 規(guī)定動(dòng)畫(huà)被播放的次數(shù) 。 默認(rèn)是 1。
??????6. animation-direction 規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放 。 默認(rèn)是 “normal”; alternate (輪流),。

.box3 {width: 100px;height: 100px;background: green;animation: myfirst 2s ease 0.5s infinite alternate; }@keyframes myfirst {from {background:green;}to {background:yellow;} }

alternate (輪流): 動(dòng)畫(huà)播放在第偶數(shù)次向前播放, 第奇數(shù)次向反方向播放 (animation-iteration-count 取值大于1時(shí)設(shè)置有效
???2. 語(yǔ)法: animation-direction: alternate;

animation-play-state 規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停 。 默認(rèn)是 “running” 播放; paused 暫停播放 。
???1. 語(yǔ)法: animation-play-state: paused;

animation-fill-mode 屬性規(guī)定動(dòng)畫(huà)在播放之前或之后, 其動(dòng)畫(huà)效果是否可見(jiàn); 規(guī)定對(duì)象動(dòng)畫(huà)時(shí)間之外的狀態(tài); none | forwards | backwards | both 。
???1. none: 不改變默認(rèn)行為 (默認(rèn), 回到動(dòng)畫(huà)沒(méi)開(kāi)始時(shí)的狀態(tài)) 。
???2. forwards: 當(dāng)動(dòng)畫(huà)完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義) (動(dòng)畫(huà)結(jié)束后動(dòng)畫(huà)停留在結(jié)束狀態(tài)) 。
???3. backwards: 在 animation-delay 所指定的一段時(shí)間內(nèi), 在動(dòng)畫(huà)顯示之前, 應(yīng)用開(kāi)始屬性值 (在第一個(gè)關(guān)鍵幀中定義) （動(dòng)畫(huà)回到第一幀的狀態(tài)）。
???4. both: 向前和向后填充模式都被應(yīng)用 （根據(jù) animation-direction 輪流應(yīng)用 forwards 和 backwords 規(guī)則）。
???5. 語(yǔ)法: animation-fill-mode: forwards
??????1. 0% 是動(dòng)畫(huà)的開(kāi)始, 100% 是動(dòng)畫(huà)的完成。

【css】css動(dòng)畫(huà)實(shí)現(xiàn)的3種方式_光明山頂?shù)牟┛?CSDN博客

• css3 transform, transition, animation區(qū)別和使用場(chǎng)景

CSS3 有3種和動(dòng)畫(huà)相關(guān)的屬性：transform, transition, animation。

其中 transform 描述了元素靜態(tài)樣式。而transition 和 animation 卻都能實(shí)現(xiàn)動(dòng)畫(huà)效果。

所以三者之中transform 常常配合后兩者使用，在頁(yè)面實(shí)現(xiàn)酷炫的五毛（或五元）特效。

不同點(diǎn)：

1. ?觸發(fā)條件不同。transition通常和hover等事件配合使用，由事件觸發(fā)。animation則和gif動(dòng)態(tài)圖差不多，立即播放。

2. 循環(huán)。 animation可以設(shè)定循環(huán)次數(shù)。

3. 精確性。 animation可以設(shè)定每一幀的樣式和時(shí)間。tranistion 只能設(shè)定頭尾。 animation中可以設(shè)置每一幀需要單獨(dú)變化的樣式屬性， transition中所有樣式屬性都要一起變化。

4. 與javascript的交互。animation與js的交互不是很緊密。tranistion和js的結(jié)合更強(qiáng)大。js設(shè)定要變化的樣式，transition負(fù)責(zé)動(dòng)畫(huà)效果，天作之合，比之前只能用js時(shí)爽太多。

結(jié)論：

1. 如果要靈活定制多個(gè)幀以及循環(huán)，用animation.

2. 如果要簡(jiǎn)單的from to 效果，用 transition.

3. 如果要使用js靈活設(shè)定動(dòng)畫(huà)屬性，用transition.

css3 transform, transition, animation區(qū)別和使用場(chǎng)景_transform和animation_jdk137的博客-CSDN博客

---

??如何實(shí)現(xiàn)圖片在某個(gè)容器中居中的？

1.絕對(duì)定位+直接計(jì)算法：
當(dāng)父元素固定寬高時(shí)，利用定位，和margin。
例如：父元素400px正方形 子元素200px正方形 css代碼：

.father {position:relative; }.child {position:absolute;margin:100px; }

2.定位+平移

.father {position:relative; }.child {position:absolute; left: 50%; top: 50%;transform: translate(-50%,-50%); }

3.table法

父元素table布局，子元素設(shè)置vertical-align:center;

vertical-align: middle；實(shí)現(xiàn)塊級(jí)元素垂直居中

.father {display:table;text-align: center; }.child {display:table-cell;vertical-align:middle; }

4.彈性布局 flex

.father {display:flex;justify-content:center;align-items:center; }.child { }

??float 的元素，display 是什么

答案： blcok

一個(gè)元素其display屬性不論是inline、inline-block還是block，在設(shè)置了float屬性后都變成了block,就是說(shuō)浮動(dòng)之后會(huì)變成塊級(jí)元素。

浮動(dòng)元素float

css布局的三種機(jī)制
分別是普通流（標(biāo)準(zhǔn)流）、浮動(dòng)和定位

1.標(biāo)準(zhǔn)流

塊級(jí)元素會(huì)獨(dú)占一行從上向下排列。
行內(nèi)元素會(huì)按照順序排列，從左往右排碰到父級(jí)元素則會(huì)自動(dòng)換行

2.浮動(dòng)

讓盒子從普通流中浮起來(lái)，主要讓多個(gè)塊級(jí)盒子一行顯示

3.定位

將盒子定在瀏覽器的某個(gè)位置

為什么需要浮動(dòng)？

它可以實(shí)現(xiàn)多個(gè)元素一行顯示，而之前學(xué)的行內(nèi)塊（inline-block）也可以實(shí)現(xiàn)但會(huì)有空白間隙，也不可以實(shí)現(xiàn)空盒子左右對(duì)齊

---

??隱藏頁(yè)面中某個(gè)元素的方法

display:none;

visibility:hidden;

opacity: 0;

position 移到外部；

z-index 涂層遮蓋等等

1、完全隱藏：元素從渲染樹(shù)中消失，不占據(jù)空間。

(1) display 屬性

display:none;

(2) hidden 屬性 HTML5 新增屬性，相當(dāng)于 display: none

<div hidden></div>

2、視覺(jué)上的隱藏：屏幕中不可見(jiàn)，占據(jù)空間。

(1) 設(shè)置 posoition 為 absolute 或 fixed，通過(guò)設(shè)置 top、left 等值，將其移出可視區(qū)域。

position: absolute; left: -99999px;

(2)設(shè)置 position 為 relative，通過(guò)設(shè)置 top、left 等值，將其移出可視區(qū)域。

position: relative; left: -99999px;

(3)設(shè)置 margin 值，將其移出可視區(qū)域范圍(可視區(qū)域占位)。

margin-left: -99999px;

(4)將元素隱藏，但是在網(wǎng)頁(yè)中該占的位置還是占著。

visibility: hidden;

(5)透明度設(shè)置成0，占據(jù)空間。

opacity: 0;

3、語(yǔ)義上的隱藏：讀屏軟件不可讀，但正常占據(jù)空間。

<div aria-hidden="true"></div>

visibility:hidden和display:none的區(qū)別

visibility屬性指定一個(gè)元素是否是可見(jiàn)的。

display這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類(lèi)型。

---

??三欄布局的實(shí)現(xiàn)方式

三欄布局：兩邊固定，中間自適應(yīng)

一.流體布局（float布局）

1.首先繪制左右兩欄，左欄左浮動(dòng)，右欄右浮動(dòng)

2.再繪制中間一欄，留出左右兩欄距離與間距

缺點(diǎn)：主要內(nèi)容無(wú)法最先加載 ，當(dāng)主要內(nèi)容過(guò)多時(shí)影響用戶(hù)體驗(yàn)

二、BFC布局

我們先把左右兩欄元素浮動(dòng)，中間欄不做其他屬性，發(fā)現(xiàn)中間欄默認(rèn)撐滿(mǎn)全屏，這時(shí)候我們就可以利用BFC不會(huì)和浮動(dòng)元素重疊的規(guī)則，把中間元素改成一個(gè)BFC，使用overflow:hidden或者display: flex達(dá)到中間欄自適應(yīng)

缺點(diǎn)：主要內(nèi)容無(wú)法最先加載 ，當(dāng)主要內(nèi)容過(guò)多時(shí)影響用戶(hù)體驗(yàn)

三、flex布局

flex屬性的完整寫(xiě)法是:flex-grow項(xiàng)目放大比例、flex-shrink項(xiàng)目縮小比例 、flex-basis項(xiàng)目占據(jù)屬性

1.項(xiàng)目繪制按照左中右排列

2.父元素使用flex屬性

3.(1)左右兩欄固定寬度
賦值給元素width屬性
賦值給元素flex屬性：flex: 0 1 200px(放大比例0，縮小比例1，項(xiàng)目寬度200px）
(2)中間使用flex:1占據(jù)剩余空間

缺點(diǎn)：無(wú)法兼容所有瀏覽器

四、position定位

1.父元素使用相對(duì)定位
2.兩側(cè)子元素使用絕對(duì)定位
3.中間元素不做定位處理，只留出空間就好

優(yōu)點(diǎn)：主要內(nèi)容可以?xún)?yōu)先加載，兼容性比較好

五、Table布局

1.先設(shè)置外邊盒子采用表格布局
2.設(shè)置子元素為表格單元格格式
3.左右兩欄設(shè)置寬度，中間無(wú)需設(shè)置

缺點(diǎn)：無(wú)法設(shè)置欄間距

六、圣杯布局

圣杯布局的核心是浮動(dòng)、負(fù)邊距、相對(duì)定位、不添加額外標(biāo)簽
左、中、右 三欄都使用float進(jìn)行浮動(dòng)，然后通過(guò)負(fù)值margin進(jìn)行調(diào)整

1.三欄都使用float進(jìn)行浮動(dòng)，左右定寬，中間寬度100%
2.因?yàn)橹虚g100%所以布局變成這樣

七、雙飛翼布局

雙飛翼布局前兩步和圣杯布局一樣，只是處理中間欄部分內(nèi)容被遮擋的問(wèn)題解決方案不同：
在mian內(nèi)部添加一個(gè)content，通過(guò)設(shè)置左右margin（左右兩欄的寬度+間距margin）來(lái)避開(kāi)遮擋

七種方式實(shí)現(xiàn)三欄布局_仙女愛(ài)吃魚(yú)的博客-CSDN博客

浮動(dòng)布局時(shí)，三個(gè) div 的生成順序有沒(méi)有影響

有影響，浮動(dòng)布局時(shí)會(huì)因?yàn)閐iv塊的先后順序而產(chǎn)生不同的效果。
這種情況下，把左右兩欄div放在中間欄div之前。這樣，才能讓左右兩個(gè)邊欄浮動(dòng)到它們應(yīng)該的位置上，以此來(lái)使得中欄能夠進(jìn)入中間的空間，并自適應(yīng)布局。若是瀏覽器在一個(gè)或者兩個(gè)邊欄div之前發(fā)現(xiàn)中欄，那么中欄會(huì)先占據(jù)一側(cè)或者兩側(cè)位置，這樣浮動(dòng)的部分就會(huì)跑到中欄的下面。

---

??calc 屬性

Calc 用戶(hù)動(dòng)態(tài)計(jì)算長(zhǎng)度值(寬度或高度)，任何長(zhǎng)度值都可以使用 calc()函數(shù)計(jì)算，能夠自動(dòng)根據(jù)不同尺寸的屏幕自動(dòng)調(diào)接數(shù)值，從而很輕松的實(shí)現(xiàn)自適應(yīng)布局展示在不同尺寸屏幕下。需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格。

width: calc(100% - 100px);

此元素寬度等于父級(jí)寬度下減100像素

---

??有一個(gè) width300，height300，怎么實(shí)現(xiàn)在屏幕上垂直水平居中

對(duì)于行內(nèi)塊級(jí)元素，
1、父級(jí)元素設(shè)置 text-alig：center，然后設(shè)置 line-height 和 vertical-align 使其
垂直居中，最后設(shè)置 font-size：0 消除近似居中的 bug
2、父級(jí)元素設(shè)置 display：table-cell，vertical-align：middle 達(dá)到水平垂直居中
3、采用絕對(duì)定位，原理是子絕父相，父元素設(shè)置 position：relative，子元素設(shè)置
position：absolute，然后通過(guò) transform 或 margin 組合使用達(dá)到垂直居中效果，設(shè)
置 top：50%，left：50%，transform：translate（
-50%，-50%）
4、絕對(duì)居中，原理是當(dāng) top,bottom 為 0 時(shí)，margin-top&bottom 設(shè)置 auto 的話會(huì)無(wú)
限延伸沾滿(mǎn)空間并平分，當(dāng) left，right 為 0 時(shí),margin-left&right 設(shè)置 auto 會(huì)無(wú)限
延伸占滿(mǎn)空間并平分，
5、采用 flex，父元素設(shè)置 display：flex，子元素設(shè)置 margin：auto
6、視窗居中，vh 為視口單位，50vh 即是視口高度的 50/100，設(shè)置 margin：50vh
auto 0，transform：translate(-50%)

---

? display：table 和本身的 table 有什么區(qū)別

參考回答：
Display:table 和本身 table 是相對(duì)應(yīng)的，區(qū)別在于，display：table 的 css 聲明能
夠讓一個(gè) html 元素和它的子節(jié)點(diǎn)像 table 元素一樣，使用基于表格的 css 布局，是我
們能夠輕松定義一個(gè)單元格的邊界，背景等樣式，而不會(huì)產(chǎn)生因?yàn)槭褂昧?table 那樣
的制表標(biāo)簽導(dǎo)致的語(yǔ)義化問(wèn)題。
之所以現(xiàn)在逐漸淘汰了 table 系表格元素，是因?yàn)橛?div+css 編寫(xiě)出來(lái)的文件比用
table 邊寫(xiě)出來(lái)的文件小，而且 table 必須在頁(yè)面完全加載后才顯示，div 則是逐行顯
示，table 的嵌套性太多，沒(méi)有 div 簡(jiǎn)潔

---

? position 屬性的值有哪些及其區(qū)別

參考回答： Position 屬性把元素放置在一個(gè)靜態(tài)的，相對(duì)的，絕對(duì)的，固定的位置中， Static：位置設(shè)置為 static 的元素，他始終處于頁(yè)面流給予的位置，static 元素會(huì)忽 略任何 top,buttom,left,right 聲明 Relative：位置設(shè)置為 relative 的元素，可將其移至相對(duì)于其正常位置的地方，因此 left：20 會(huì)將元素移至元素正常位置左邊 20 個(gè)像素的位置，不脫標(biāo) Absolute：此元素可定位于相對(duì)包含他的元素的指定坐標(biāo)，此元素可通過(guò) left，top 等屬性規(guī)定，脫標(biāo) Fixed：位置被設(shè)為 fiexd 的元素，可定為與相對(duì)瀏覽器窗口的指定坐標(biāo)，可以通過(guò) left，top，right 屬性來(lái)定位，脫標(biāo)

---

? z-index 的定位方法

參考回答： z-index 屬性設(shè)置元素的堆疊順序，擁有更好堆疊順序的元素會(huì)處于較低順序元素之 前，z-index 可以為負(fù)，且 z-index 只能在定位元素上奏效，該屬性設(shè)置一個(gè)定位元素 沿 z 軸的位置，如果為正數(shù)，離用戶(hù)越近，為負(fù)數(shù)，離用戶(hù)越遠(yuǎn)，它的屬性值有 auto，默認(rèn)，堆疊順序與父元素相等，number，inherit，從父元素繼承 z-index 屬性 的值

---

? 如果想要改變一個(gè) DOM 元素的字體顏色，不在它本身上進(jìn)行操作？

參考回答： 可以更改父元素的 color

---

? 對(duì) CSS 的新屬性有了解過(guò)的嗎？

1.文本陰影屬性

text-shadow:水平距離 垂直距離 模糊半徑(模糊程度) 陰影顏色

text-shadow: 10px 10px 5px #ccc;

2.盒子陰影

box-shadow : 水平距離(必填，可為負(fù)值) 垂直距離(必填，可為負(fù)值) 模糊距離 陰影大小 陰影顏色 陰影位置(內(nèi)側(cè)或外側(cè))

box-shadow: 10px 10px 8px 10px #999 inset;

3.文本換行

(1）word-wrap?此屬性來(lái)設(shè)置是否允許瀏覽器在單詞內(nèi)斷句，解決一個(gè)字符串太長(zhǎng)瀏覽器找不到自然斷點(diǎn)而文本溢出的問(wèn)題。

屬性值：nomal 只在允許的斷字點(diǎn)換行(瀏覽器默認(rèn)屬性)

??????????????break-word 允許長(zhǎng)單詞或者長(zhǎng)URL地址換行到下一行。

word-wrap: nomal | break-word;

（2）

word-break: break-all | keep-all;

屬性值：break-all 斷句方式非常粗暴，不是將長(zhǎng)單詞挪到下一行而是單詞內(nèi)直接斷句。 keep-all 文本不會(huì)換行只能在半角空格或連字符處換行。

4. 文本溢出

text-overflow

設(shè)置或檢索當(dāng)當(dāng)前行超過(guò)指定容器的邊界時(shí)如何顯示，屬性有兩個(gè)值選擇：

• clip：修剪文本
• ellipsis：顯示省略符號(hào)來(lái)代表被修剪的文本

5. text-decoration

CSS3里面開(kāi)始支持對(duì)文字的更深層次的渲染，具體有三個(gè)屬性可供設(shè)置：

• text-fill-color: 設(shè)置文字內(nèi)部填充顏色
• text-stroke-color: 設(shè)置文字邊界填充顏色
• text-stroke-width: 設(shè)置文字邊界寬度

6. 顏色

css3新增了新的顏色表示方式rgba與hsla

• rgba分為兩部分，rgb為顏色值，a為透明度
• hala分為四部分，h為色相，s為飽和度，l為亮度，a為透明度

7. 邊框

css3新增了三個(gè)邊框?qū)傩?#xff0c;分別是：

• border-radius：創(chuàng)建圓角邊框

• box-shadow：為元素添加陰影

• border-image：使用圖片來(lái)繪制邊框

8. 背景

新增了幾個(gè)關(guān)于背景的屬性，分別是background-clip、background-origin、background-size和background-break

background-clip
用于確定背景畫(huà)區(qū)，有以下幾種可能的屬性：

• background-clip: border-box; 背景從border開(kāi)始顯示
• background-clip: padding-box; 背景從padding開(kāi)始顯示
• background-clip: content-box; 背景顯content區(qū)域開(kāi)始顯示
• background-clip: no-clip; 默認(rèn)屬性，等同于border-box

通常情況，背景都是覆蓋整個(gè)元素的，利用這個(gè)屬性可以設(shè)定背景顏色或圖片的覆蓋范圍

background-origin
當(dāng)我們?cè)O(shè)置背景圖片時(shí)，圖片是會(huì)以左上角對(duì)齊，但是是以border的左上角對(duì)齊還是以padding的左上角或者content的左上角對(duì)齊? border-origin正是用來(lái)設(shè)置這個(gè)的

• background-origin: border-box; 從border開(kāi)始計(jì)算background-position
• background-origin: padding-box; 從padding開(kāi)始計(jì)算background-position
• background-origin: content-box; 從content開(kāi)始計(jì)算background-position

默認(rèn)情況是padding-box，即以padding的左上角為原點(diǎn)

background-size
background-size屬性常用來(lái)調(diào)整背景圖片的大小，主要用于設(shè)定圖片本身。有以下可能的屬性：

• background-size: contain; 縮小圖片以適合元素（維持像素長(zhǎng)寬比）
• background-size: cover; 擴(kuò)展元素以填補(bǔ)元素（維持像素長(zhǎng)寬比）
• background-size: 100px 100px; 縮小圖片至指定的大小
• background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對(duì)包 含元素的尺寸

background-break
元素可以被分成幾個(gè)獨(dú)立的盒子（如使內(nèi)聯(lián)元素span跨越多行），background-break 屬性用來(lái)控制背景怎樣在這些不同的盒子中顯示

• background-break: continuous; 默認(rèn)值。忽略盒之間的距離（也就是像元素沒(méi)有分成多個(gè)盒子，依然是一個(gè)整體一樣）
• background-break: bounding-box; 把盒之間的距離計(jì)算在內(nèi)；
• background-break: each-box; 為每個(gè)盒子單獨(dú)重繪背景

CSS3新增了哪些新特性？_css3新特性_distantimg的博客-CSDN博客

---

? line-height 和 height 的區(qū)別

參考回答：
line-height 一般是指布局里面一段文字上下行之間的高度，是針對(duì)字體來(lái)設(shè)置的，
height 一般是指容器的整體高度

---

? 設(shè)置一個(gè)元素的背景顏色，背景顏色會(huì)填充哪些區(qū)域？

參考回答： background-color 設(shè)置的背景顏色會(huì)填充元素的 content、padding、border 區(qū)域。

---

? 知道屬性選擇器和偽類(lèi)選擇器的優(yōu)先級(jí)嗎

參考回答： 屬性選擇器和偽類(lèi)選擇器優(yōu)先級(jí)相同

---

? inline-block、inline 和 block 的區(qū)別；為什么 img 是 inline 還可以 設(shè)置寬高

參考回答： Block 是塊級(jí)元素，其前后都會(huì)有換行符，能設(shè)置寬度，高度，margin/padding 水平 垂直方向都有效。 Inline：設(shè)置 width 和 height 無(wú)效，margin 在豎直方向上無(wú)效，padding 在水平方向 垂直方向都有效，前后無(wú)換行符 Inline-block：能設(shè)置寬度高度，margin/padding 水平垂直方向 都有效，前后無(wú)換行 符 原來(lái)這才是inline、block、inline-block - 知乎

---

• 用 css 實(shí)現(xiàn)一個(gè)硬幣旋轉(zhuǎn)的效果

.box {transform-style: preserve-3d; //旋轉(zhuǎn)保持3d效果animation: rotate 3s linear infinite; //勻速，永動(dòng) }@keyframes rotate {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);} }

---

? 了解重繪和重排嗎，知道怎么去減少重繪和重排嗎，讓文檔脫離文檔流有哪些方法

參考回答： 重排： 如果改變了元素的寬高，元素的位置，就會(huì)導(dǎo)致瀏覽器不得不重新計(jì)算元素的幾何屬性，并重新構(gòu)建渲染樹(shù)，這個(gè)過(guò)程稱(chēng)為“重排”。 重繪：完成重排后，要將重新構(gòu)建的渲染樹(shù)渲染到屏幕上，這個(gè)過(guò)程就是“重繪”。 引起重排重繪的原因有：

• 添加或者刪除可見(jiàn)的 DOM 元素，
• 元素尺寸位置的改變
• 瀏覽器頁(yè)面初始化，
• 瀏覽器窗口大小發(fā)生改變，重排一定導(dǎo)致重繪，重繪不一定導(dǎo)致重排，

減少重繪重排的方法有：

• 不在布局信息改變時(shí)做 DOM 查詢(xún)，
• 使用 csstext,className 一次性改變屬性
• 使用 fragment
• 對(duì)于多次重排的元素，比如說(shuō)動(dòng)畫(huà)。使用絕對(duì)定位脫離文檔流，使其不影響其他元素

---

? CSS 畫(huà)正方體，三角形

//三角形 .triangle {width: 0;height: 0;border-width: 100px;border-style: solid;border-color: transparent pink; }

?? 如何畫(huà)一個(gè)三角形

參考回答：
三角形原理：邊框的均分原理 div {width:0px;height:0px;border-top:10px solid red;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent; }

?

---

? overflow 的原理

參考回答： box-sizing: content-box/border-box;

要講清楚這個(gè)解決方案的原理，首先需要了解塊格式化上下文，A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.翻譯過(guò)來(lái)就是塊格式化上下文是 CSS 可視化渲染的一部分，它是一塊區(qū) 域，規(guī)定了內(nèi)部塊盒 的渲染方式，以及浮動(dòng)相互之間的影響關(guān)系 當(dāng)元素設(shè)置了 overflow 樣式且值部位 visible 時(shí)，該元素就構(gòu)建了一個(gè) BFC，BFC 在 計(jì)算高度時(shí)，內(nèi)部浮動(dòng)元素的高度也要計(jì)算在內(nèi)，也就是說(shuō)技術(shù) BFC 區(qū)域內(nèi)只有一個(gè) 浮動(dòng)元素，BFC 的高度也不會(huì)發(fā)生塌縮，所以達(dá)到了清除浮動(dòng)的目的。

---

? box-sizing 的語(yǔ)法和基本用處

box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框

box-sizing: content-box/border-box;

●content-box：瀏覽器對(duì)盒模型的解釋遵從W3C標(biāo)準(zhǔn)，當(dāng)定義width和height時(shí)，它的參數(shù)值不包括border和padding。

●border-box：當(dāng)定義width和height時(shí)，border和padding的參數(shù)值被包含在width和height之內(nèi)。

---

? 兩個(gè)嵌套的 div，position 都是 absolute，子 div 設(shè)置 top 屬性，那么這個(gè) top 是相對(duì)于父元素的哪個(gè)位置定位的。

參考回答： margin 的外邊緣

---

? css 布局

參考回答： 六種布局方式總結(jié)：圣杯布局、雙飛翼布局、Flex 布局、絕對(duì)定位布局、表格布局、 網(wǎng)格布局。 圣杯布局是指布局從上到下分為 header、container、footer，然后 container 部分定 為三欄布局。這種布局方式同樣分為 header、container、footer。圣杯布局的缺陷在 于 center 是在 container 的 padding 中的，因此寬度小的時(shí)候會(huì)出現(xiàn)混亂。 雙飛翼布局給 center 部分包裹了一個(gè) main 通過(guò)設(shè)置 margin 主動(dòng)地把頁(yè)面撐開(kāi)。 Flex 布局是由 CSS3 提供的一種方便的布局方式。 絕對(duì)定位布局是給 container 設(shè)置 position: relative 和 overflow: hidden，因?yàn)? 絕對(duì)定位的元素的參照物為第一個(gè) postion 不為 static 的祖先元素。 left 向左浮 動(dòng)，right 向右浮動(dòng)。center 使用絕對(duì)定位，通過(guò)設(shè)置 left 和 right 并把兩邊撐 開(kāi)。 center 設(shè)置 top: 0 和 bottom: 0 使其高度撐開(kāi)。 表格布局的好處是能使三欄的高度統(tǒng)一。 網(wǎng)格布局可能是最強(qiáng)大的布局方式了，使用起來(lái)極其方便，但目前而言，兼容性并不 好。網(wǎng)格布局，可以將頁(yè)面分割成多個(gè)區(qū)域，或者用來(lái)定義內(nèi)部元素的大小，位置， 圖層關(guān)系。

---

? relative 定位規(guī)則

參考回答： 如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過(guò)設(shè)置垂 直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。 在使用相對(duì)定位時(shí)，無(wú)論 是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。

---

?? 實(shí)現(xiàn)一個(gè)兩列等高布局，講講思路

參考回答：

1、flex方法

????????父盒子 display：flex;

2、Grid方法

????????父盒子 display：grid；

3、Position：absolute；方法

????????父容器相對(duì)定位，子元素絕對(duì)定位，高度為100%時(shí)會(huì)自動(dòng)適應(yīng)父容器的高度。所以當(dāng)右側(cè)的高度變化撐起父容器不同的高度時(shí)，左側(cè)也會(huì)保持一致。

.father {position: relative;.child {position: absolute;height: 100%;} }

4、Table法

.father {display: table;.child {display: table-cell;vertical-align: top;} }

5、Margin: -9999px + Pading: 9999px方法

純css(內(nèi)外邊距相互抵消，再加上一個(gè)overflow:hidden即可)：

為了實(shí)現(xiàn)兩列等高，可以給每列加上 padding-bottom:9999px;

margin-bottom:-9999px;同時(shí)父元素設(shè)置 overflow:hidden;

.father {overflow: hidden;.child {margin-bottom: -9999px;padding-bottom: 9999px;} }

https://www.cnblogs.com/jyughynj/p/15758270.html

---

總結(jié)

以上是生活随笔為你收集整理的2023高薪前端面试题（一、前端基础——css）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。