??說一下 css 盒模型

盒模型分為IE盒模型和W3C標準盒模型。盒子的寬度和高度的計算方式由box-sizing屬性控制.

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

1. W3C 標準盒模型：

屬性width,height只包含內容content，不包含border和padding。

width = 內容的寬度

height = 內容的高度

2. IE 盒模型：

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

width = border + padding + 內容的寬度

height = border + padding + 內容的高度

---

??畫一條 0.5px 的線

方法一、border-width: 0.5px

直接通過樣式來設置0.5px的邊框。當然這個方案是非常理想的方案，但是事實總是殘酷的，它只在 iOS 8+ 上支持，對于 Android 無法支持。

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

當然對于這種兼容性問題我們可以通過 JavaScript 來做降級處理，我們將默認邊框設置為1px，分辨出來是 iOS 并且版本為 8 以上，就可以將邊框設置為0.5px；

方法二、移動端，采用meta viewport的方式

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

這樣子就能縮放到原來的0.5倍，如果是1px那么就會變成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>

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

方法五、使用background-image結合SVG的方式

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

這樣在Chrome能很好的顯示，但在firefox掛了，究其原因是因為firefox的background-image如果是svg的話只支持命名的顏色，如"black"、"red"等，如果把上面代碼的svg里面的#000改成black的話就可以顯示出來，但是這樣就很不靈活了。因此，只能把svg轉成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來使得支持firefoxbackground: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg=="); }

畫一條0.5px 線的方法 - 騰訊云開發者社區-騰訊云

---

??link 標簽和 @import 標簽的區別

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

link 屬于 html 標簽，而@import 是 css 提供的
頁面被加載時，link 會同時被加載，而@import 引用的 css 會等到頁面加載結束后加
載。
link 是 html 標簽，因此沒有兼容性，而@import 只有 IE5 以上才能識別。
link 方式樣式的權重高于@import 的。

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

---

??transition 和 animation 的區別

一、transition（過渡、轉變的意思）

transition 屬性是一個簡寫屬性，用于設置四個過渡屬性：

1. transition-property：設置過渡效果的屬性名稱（默認值是all）；

2. transition-duration：設置過渡完成所需要的時間（默認值是0）；

3. transition-timing-function：設置過渡速度效果曲線（默認值是ease）；

4. transition-delay：設置過渡的開始時間（默認值是0）；

語法：transition: property duration timing-function delay;

注意：這里transition-duration是必須要填的，不填默認為是0，沒有過渡效果。

二、animation（動畫、活力的意思）

animation 屬性也是一個簡寫屬性，用于設置六個動畫屬性：

1. animation-name：設置綁定到選擇器的@keyframem名稱（默認值是none）；

2. animation-duration：設置完成動畫所花費的時間（默認值是0）；

3. animation-timing-function：設置動畫的速度曲線（默認值是ease）；

4. animation-delay：設置動畫延遲幾秒開始（默認值是0）；

5. animation-iteration-count：設置動畫播放的次數（默認值是1）；

6. animation-direction：設置時候輪流反向播放動畫（默認值是normal）；

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

注意：這里animation-duration是必須要填的，不填默認是0，就不會播放動畫了。

三、相同點

Animation 和 transition 大部分屬性是相同的，他們都是隨時間改變元素的屬性值。

四、區別

1. transition是一個過渡的效果，沒有中間狀態，需要設置觸發事件（如hover等）才能執行；transition 為 2 幀，從 from .... to

2. animation是一個動畫的效果，有多個中間幀，可以在任意一個中間幀設置狀態，不需要設置觸發事件就能執行。animation 可以一幀一幀的。

---

??Flex 布局

什么是Flex布局

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

適用范圍

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

.wrap{display:flex; }

行內元素也可以使用Flex布局。

.box{display: inline-flex; }

Webkit內核的瀏覽器，必須加上-webkit前綴。

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

flex布局中的一些基本概念

容器和項目

什么叫容器
采用flex布局的元素被稱作容器。

什么叫項目
在flex布局中的子元素被稱作項目。

即父級元素采用flex布局，則父級元素為容器，全部子元素自動成為項目。

容器的一些屬性

有六個常用屬性設置在容器上，分別為：

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

flex-direction

設置容器主軸的方向，橫的還是豎的

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

包含四個屬性值：

row: 默認值，表示沿水平方向，由左到右

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

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

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

flex-wrap

設置是否換行

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

包含三個屬性值：

nowrap：表示不換行，說明：設置的項目的寬度就失效了，強行在一行顯示

wrap：正常換行，第一個位于第一行的第一個

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

flex-flow

flex-flow屬性是flex-deriction和flex-wrap屬性的簡寫，默認值為[row nowrap]

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

第一個屬性值為flex-direction的屬性值

第二個屬性值為flex-wrap的屬性值

justify-content

設置項目在容器中的左右對齊方式

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

該屬性主要要五個屬性值：

flex-start：默認值，左對齊

flex-end：右對齊

center：居中對齊

space-between：兩端對齊

space-around：每個項目兩側的間距相等

align-items?

項目在交叉軸上是如何對齊顯示的

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

flex-start:交叉軸的起點對齊

flex-end 交叉軸的終點對齊

center 交叉軸居中對齊

baseline 項目的第一行文字的基線對齊
stretch：默認值：如果項目未設置高度或者高度為auto，將占滿整個容器的高度

align-content

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

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

該屬性可能取6個值。

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

項目的一些屬性

order
order屬性設置項目排序的位置，默認值為0，數值越小越靠前

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

flex-grow?

flex-group屬性用來控制當前項目是否放大顯示。默認值為0，表示即使容器有剩余空間也不放大顯示。如果設置為1，則平均分攤后放大顯示。

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

flex-shrink?

flex-shrink屬性表示元素的縮小比例。默認值為1，如果空間不夠用時所有的項目同比縮小。如果一個項目的該屬性設置為0，則空間不足時該項目也不縮小。

flex-basis

flex-basis屬性表示表示項目占據主軸空間的值。默認為auto，表示項目當前默認的大小。如果設置為一個固定的值，則該項目在容器中占據固定的大小。

flex屬性

flex屬性是 flex-grow屬性、flex-shrink屬性、flex-basis屬性的簡寫。默認值為：0 1 auto；

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

align-self?

align-self屬性表示當前項目可以和其他項目擁有不一樣的對齊方式。它有六個可能的值。默認值為auto
auto：和父元素align-self的值一致

flex-start：頂端對齊

flex-end：底部對齊

center：豎直方向上居中對齊

baseline：item第一行文字的底部對齊

stretch：當item未設置高度時，item將和容器等高對齊

---

??BFC（塊級格式化上下文，用于清楚浮動，防止 margin 重疊等）

是什么？

一塊區域，一塊擁有著自己的渲染規則的區域。只要為一個普通的元素添加BFC的特征屬性（下面會講BFC特征屬性有哪些），就可以讓其變為一個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可以被看做是一個“隔離了的”獨立容器，容器內的元素在布局上不會影響到外面的元素。因此，其作用主要有3個：

BFC 區域不會與 float box 重疊
BFC 是頁面上的一個獨立容器，子元素不會影響到外面
計算 BFC 的高度時，浮動元素也會參與計算

1. 避免外邊距重疊

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

做法：將兩個div分別包裹在兩個容器中，為這兩個容器添加BFC特征屬性，讓這兩個容器均變為BFC，那么在每個BFC中，div的margin屬性均會顯露出來，也就不會重合了

2. 清除浮動：

父元素father中嵌套一個子元素son，為子元素添加float：left屬性。這個時候，父元素就會出現高度塌陷，視覺效果就是父元素變成了一條線，子元素跑到了父元素的外部，并沒有被包裹在這個父元素中，即浮動導致的脫離文檔流。

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

3. 阻止元素被浮動元素覆蓋

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

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

鏈接：?BFC（塊級格式化上下文，用于清楚浮動，防止ma__牛客網
來源：牛客網

---

? 8種垂直居中的方法

1、display：flex

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

2、使用css-table實現?

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

?????vertical-align: middle;

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

vertical-align 屬性設置一個元素的垂直對齊方式。
該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

//父盒子 .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

父子都要設置行高line-height

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

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

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

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

.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、使用網格布局grid+align-self+justify-self實現

注意：這種方式父元素要沒有其他的子元素或者是內容

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

8種垂直居中的方法_「已注銷」的博客-CSDN博客

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

---

??關于 JS 動畫和 css3 動畫的差異性

JS動畫（逐幀動畫）:

首先，在js動畫是逐幀動畫，是在時間幀上逐幀繪制幀內容，由于是一幀一幀的話，所以其可操作性很高，幾乎可以完成任何想要的動畫形式。但是由于逐幀動畫的幀序列內容不一樣，會增加制作負擔，且資源占有比較大。

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

缺點：

• js是單線程的腳本語言，當js在瀏覽器主線程運行時，主線程還有其他需要運行的js腳本、樣式、計算、布局、交互等一系列任務，對其干擾線程可能出現阻塞，造成丟幀的情況。
• 其次，js在做動畫的時候，其復雜度是高于css3的，需要考慮一些計算，操作等方便問題。

優點：

• JavaScript動畫控制能力很強，可以控制動畫在播放過程中：開始、暫停、播放、終止、取消都可以完成。
• 因為它相似與電影播放模式，很適合于表演很細膩的動畫，如3D效果、人物或動物急劇轉身等等效果。
• 功能涵蓋面，JS 比 CSS 大。
• 動畫效果比CSS3動畫更豐富，一些動畫效果，如曲線運動、沖擊閃爍、視差滾動等效果，只有JavaScript動畫才能完成。
• CSS3有兼容性問題，而JS大多數時候沒有兼容性問題。

css3（補間動畫） :

?css3動畫的制作方法簡單方便。只需確定第一幀和最后一幀的關鍵位置即可，兩個關鍵幀之間幀的內容由Composite線程自動生成，不需要人為處理。當然也可以多次添加關鍵幀的位置。

? ? ? ?因為只設置幾個關鍵幀的位置，所以在進行動畫控制的時候時比較弱的。不能夠在半路暫停動畫，或者在動畫過程中不能對其進行一些操作等。

? ? ? ?css3在實現一些簡單的滑動，翻轉等特效的時候會很方便，但是想要做到一些酷炫的效果的時候，其操作往往可能會比js操作有更多的冗余。

? ? ? ?css3在做動畫的時候，瀏覽器可以對其進行一些優化，會比js使用更少的占用cpu資源，但是效果足夠流暢。

優點：

（1）瀏覽器可以優化動畫。

（2）代碼相對簡單，并且性能調整方向是固定的。

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

缺點：

1.運行過程的控制較弱，不可能附加事件綁定回調函數。 CSS動畫只能暫停，無法在動畫中找到特定的時間點，不能中途反轉動畫，無法更改時間比例，無法添加回調函數或將播放事件綁定到特定位置，并且沒有進度報告

2。 代碼冗長。 如果您想使用CSS來實現稍微復雜一點的動畫，那么CSS代碼最終將變得非常繁瑣。

總結：

如果動畫只是簡單的狀態切換，不需要中間過程控制，在這種情況下，css動畫是優選方案。

如果你在設計很復雜的富客戶端界面或者在開發一個有著復雜UI狀態的 APP。那么你應該使用js動畫，這樣你的動畫可以保持高效，并且你的工作流也更可控。

js動畫與css3動畫的區別_js逐幀動畫_Sco_Jing1031的博客-CSDN博客

---

??說一下塊元素和行元素

塊元素：獨占一行，并且有自動填滿父元素，可以設置 margin 和 pading 以及高度和寬度。
行元素：不會獨占一行，width 和 height 會失效，并且在垂直方向的 padding 和margin 會失效。

---

??CSS3 中對溢出的處理

overflow：

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

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

---

? 單、多行元素的文本省略號

單行

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

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

? ? ? ? 3、text-overflow:?ellipsis;?文本超出容器最大寬度時顯示三個點。

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

?多行

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

? ? ? ? 2、text-overflow:ellipsis;? 溢出文本顯示省略號。

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

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

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

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

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

---

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

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

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

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

結構

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

繼承

display: none不會被子元素繼承，畢竟子類也不會被渲染。
visibility: hidden：會被子元素繼承，子元素可以通過設置 visibility: visible; 來取消隱藏。
opacity: 0：會被子元素繼承,且，子元素并不能通過 opacity: 1 來取消隱藏。

性能

display none :?動態改變此屬性時會引起重排，性能較差。
visibility:hidden:?動態改變此屬性時會引起重繪，性能較高。
opacity: 0：?提升為合成層，不會觸發重繪，性能較高。

事件監聽

display none :?無法進行 DOM 事件監聽。
visibility:hidden:?無法進行 DOM 事件監聽。
opacity: 0：可以進行 DOM 事件監聽。

transition

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

---

??雙邊距重疊問題（外邊距折疊）

多個相鄰（兄弟或者父子關系）普通流的塊元素垂直方向marigin會重疊

折疊的結果為：

兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。

---

??position 屬性 比較

1、固定定位fixed：

元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動。Fixed定位使元素的位置與文檔流無關，因此不占據空間。 Fixed定位的元素和其他元素重疊。

2、相對定位relative：

如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。 在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。

3、絕對定位absolute：

絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>。 absolute 定位使元素的位置與文檔流無關，因此不占據空間。 absolute 定位的元素和其他元素重疊。

4、粘性定位sticky：

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

5、默認定位Static：

默認值。沒有定位，元素出現在正常的流中（忽略top, bottom, left, right 或者 z-index 聲明）。

6、inherit:

規定應該從父元素繼承position 屬性的值。

---

清除浮動的方法（最常用的4種）

一、 額外標簽法：?

1.給父元素的內部加入一個塊級元素

2.該塊級元素添加一個clear:both的屬性

優點：?通俗易懂，書寫方便。（不推薦使用）
缺點：?添加許多無意義的標簽，結構化比較差。

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

二、 父級添加overflow方法： 可以通過觸發BFC的方式，實現清楚浮動效果。必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

優點： 簡單、代碼少、瀏覽器支持好

缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。不能和position配合使用，因為超出的尺寸的會被隱藏。

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

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

三、單偽標簽法?：由偽元素代替額外標簽，是空元素的升級版，因為額外元素會讓html結構變得復雜，好處是不用單獨加標簽了。IE8以上和非IE瀏覽器才支持:after，，zoom(IE專有屬性)可解決ie6,ie7浮動問題（較常用推薦）

優點： 符合閉合浮動思想，結構語義化正確，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

缺點： 由于IE6-7不支持：after，使用zoom：1

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

四、雙偽標簽法：（較常用推薦）

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

優點：?代碼更簡潔

<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>

五、父級div定義 height：?父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優點：?簡單、代碼少、容易掌握

缺點：?只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

清除浮動的幾種方法_小阿哈的博客-CSDN博客

清除浮動的4種方式_star@星空的博客-CSDN博客

---

??css3 新特性

CSS3的新特性有：

1、CSS3選擇器

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

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

4、CSS3過渡；

5、CSS3變換,?2D，3D 轉換如 transform 等

6、CSS3動畫如animation 等。

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

【css】CSS3有哪些新特性_css3新特性_光明山頂的博客-CSDN博客

??CSS 選擇器有哪些，優先級呢

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

具體例子：
span 優先級1
div span 優先級1+1
div:first-child == 1+10
.p1 span 優先級10+1.
#divI span 優先級100+1

• 當比較多個相同級別的CSS選擇器優先級時，它們定義的位置將決定一切。下面從位置上將CSS優先級由高到低分為六級：
  1、位于<head/>標簽里的<style/>中所定義的CSS擁有最高級的優先權。
  2、第二級的優先屬性由位于 <style/>標簽中的 @import 引入樣式表所定義。
  3、第三級的優先屬性由<link/>標簽所引入的樣式表定義。
  4、第四級的優先屬性由<link/>標簽所引入的樣式表內的 @import 導入樣式表定義。
  5、第五級優先的樣式有用戶設定。
  6、最低級的優先權由瀏覽器默認。

• CSS基礎知識-選擇器的種類及優先級 - 簡書

  ---

  ??css 動畫如何實現

css實現動畫主要有3種方式：

①、transition實現過渡動畫，

②、transform轉變動畫，

③、animation實現自定義動畫。

一、transition過渡動畫

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

1、 transition: 屬性是個復合屬性

transition-property： 規定設置過渡效果的 css 屬性名稱
transition-duration： 規定完成過渡效果需要多少秒或毫秒
transition-timing-function：指定過渡函數, 規定速度效果的速度曲線
transition-delay： 指定開始出現的延遲時間
2、默認值為：transition: all 0 ease 0;
3、單個 css 屬性的過渡效果時：

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

有多個 css 屬性的過渡效果時：

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

二、transform 變形動畫

可以利用 transform 功能來實現文字或圖像的 旋轉、縮放、傾斜、移動 這四種類型的變形處理

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

1、旋轉 rotate

1.1、 用法: 主要分為2D旋轉和3D旋轉。

2D 旋轉

transform: rotate(45deg); // 順時針旋轉45度

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

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

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

2、縮放 scale

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

2D縮放

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

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

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);

• 一個參數時：表示水平方向的傾斜角度 ；
• 兩個參數時：第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度 。
• skew 的默認原點 transform-origin 是這個物件的中心點

4. 移動 translate

4.1、2D移動

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

• 一個參數時：表示水平方向的移動距離；
• 兩個參數時：第一個參數表示水平方向的移動距離，第二個參數表示垂直方向的移動距離 。

4.2、3D移動

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

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

5. 基準點 transform-origin

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

6. 多方法組合變形

這四種變形方法順序可以隨意， 但不同的順序導致變形結果不同， 原因是變形的順序是從左到右依次進行。

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

三、 animation 關鍵幀動畫

1. 在 CSS3 中創建動畫, 您需要學習 @keyframes 規則 。
???2. @keyframes 規則用于創建動畫 。 在 @keyframes 中規定某項 CSS 樣式, 就能創建由當前樣式逐漸改為新樣式的動畫效果 。
???3. 必須定義動畫的名稱和時長 。 如果忽略時長, 則動畫不會允許, 因為默認值是 0。
???4. 請用百分比來規定變化發生的時間, 或用關鍵詞 “from” 和 “to”, 等同于 0% 和 100% 。

5. 語法
?????

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

??????1. animation-name 規定需要綁定到選擇器的 keyframe 名稱
??????2. animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
??????3. animation-timing-function 規定動畫的速度曲線。 默認是 “ease”。
??????4. animation-delay 規定動畫何時開始 。 默認是 0。
??????5. animation-iteration-count 規定動畫被播放的次數 。 默認是 1。
??????6. animation-direction 規定動畫是否在下一周期逆向地播放 。 默認是 “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 (輪流): 動畫播放在第偶數次向前播放, 第奇數次向反方向播放 (animation-iteration-count 取值大于1時設置有效
???2. 語法: animation-direction: alternate;

animation-play-state 規定動畫是否正在運行或暫停 。 默認是 “running” 播放; paused 暫停播放 。
???1. 語法: animation-play-state: paused;

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

【css】css動畫實現的3種方式_光明山頂的博客-CSDN博客

• css3 transform, transition, animation區別和使用場景

CSS3 有3種和動畫相關的屬性：transform, transition, animation。

其中 transform 描述了元素靜態樣式。而transition 和 animation 卻都能實現動畫效果。

所以三者之中transform 常常配合后兩者使用，在頁面實現酷炫的五毛（或五元）特效。

不同點：

1. ?觸發條件不同。transition通常和hover等事件配合使用，由事件觸發。animation則和gif動態圖差不多，立即播放。

2. 循環。 animation可以設定循環次數。

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

4. 與javascript的交互。animation與js的交互不是很緊密。tranistion和js的結合更強大。js設定要變化的樣式，transition負責動畫效果，天作之合，比之前只能用js時爽太多。

結論：

1. 如果要靈活定制多個幀以及循環，用animation.

2. 如果要簡單的from to 效果，用 transition.

3. 如果要使用js靈活設定動畫屬性，用transition.

css3 transform, transition, animation區別和使用場景_transform和animation_jdk137的博客-CSDN博客

---

??如何實現圖片在某個容器中居中的？

1.絕對定位+直接計算法：
當父元素固定寬高時，利用定位，和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布局，子元素設置vertical-align:center;

vertical-align: middle；實現塊級元素垂直居中

.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

一個元素其display屬性不論是inline、inline-block還是block，在設置了float屬性后都變成了block,就是說浮動之后會變成塊級元素。

浮動元素float

css布局的三種機制
分別是普通流（標準流）、浮動和定位

1.標準流

塊級元素會獨占一行從上向下排列。
行內元素會按照順序排列，從左往右排碰到父級元素則會自動換行

2.浮動

讓盒子從普通流中浮起來，主要讓多個塊級盒子一行顯示

3.定位

將盒子定在瀏覽器的某個位置

為什么需要浮動？

它可以實現多個元素一行顯示，而之前學的行內塊（inline-block）也可以實現但會有空白間隙，也不可以實現空盒子左右對齊

---

??隱藏頁面中某個元素的方法

display:none;

visibility:hidden;

opacity: 0;

position 移到外部；

z-index 涂層遮蓋等等

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

(1) display 屬性

display:none;

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

<div hidden></div>

2、視覺上的隱藏：屏幕中不可見，占據空間。

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

position: absolute; left: -99999px;

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

position: relative; left: -99999px;

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

margin-left: -99999px;

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

visibility: hidden;

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

opacity: 0;

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

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

visibility:hidden和display:none的區別

visibility屬性指定一個元素是否是可見的。

display這個屬性用于定義建立布局時元素生成的顯示框類型。

---

??三欄布局的實現方式

三欄布局：兩邊固定，中間自適應

一.流體布局（float布局）

1.首先繪制左右兩欄，左欄左浮動，右欄右浮動

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

缺點：主要內容無法最先加載 ，當主要內容過多時影響用戶體驗

二、BFC布局

我們先把左右兩欄元素浮動，中間欄不做其他屬性，發現中間欄默認撐滿全屏，這時候我們就可以利用BFC不會和浮動元素重疊的規則，把中間元素改成一個BFC，使用overflow:hidden或者display: flex達到中間欄自適應

缺點：主要內容無法最先加載 ，當主要內容過多時影響用戶體驗

三、flex布局

flex屬性的完整寫法是:flex-grow項目放大比例、flex-shrink項目縮小比例 、flex-basis項目占據屬性

1.項目繪制按照左中右排列

2.父元素使用flex屬性

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

缺點：無法兼容所有瀏覽器

四、position定位

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

優點：主要內容可以優先加載，兼容性比較好

五、Table布局

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

缺點：無法設置欄間距

六、圣杯布局

圣杯布局的核心是浮動、負邊距、相對定位、不添加額外標簽
左、中、右 三欄都使用float進行浮動，然后通過負值margin進行調整

1.三欄都使用float進行浮動，左右定寬，中間寬度100%
2.因為中間100%所以布局變成這樣

七、雙飛翼布局

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

七種方式實現三欄布局_仙女愛吃魚的博客-CSDN博客

浮動布局時，三個 div 的生成順序有沒有影響

有影響，浮動布局時會因為div塊的先后順序而產生不同的效果。
這種情況下，把左右兩欄div放在中間欄div之前。這樣，才能讓左右兩個邊欄浮動到它們應該的位置上，以此來使得中欄能夠進入中間的空間，并自適應布局。若是瀏覽器在一個或者兩個邊欄div之前發現中欄，那么中欄會先占據一側或者兩側位置，這樣浮動的部分就會跑到中欄的下面。

---

??calc 屬性

Calc 用戶動態計算長度值(寬度或高度)，任何長度值都可以使用 calc()函數計算，能夠自動根據不同尺寸的屏幕自動調接數值，從而很輕松的實現自適應布局展示在不同尺寸屏幕下。需要注意的是，運算符前后都需要保留一個空格。

width: calc(100% - 100px);

此元素寬度等于父級寬度下減100像素

---

??有一個 width300，height300，怎么實現在屏幕上垂直水平居中

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

---

? display：table 和本身的 table 有什么區別

參考回答：
Display:table 和本身 table 是相對應的，區別在于，display：table 的 css 聲明能
夠讓一個 html 元素和它的子節點像 table 元素一樣，使用基于表格的 css 布局，是我
們能夠輕松定義一個單元格的邊界，背景等樣式，而不會產生因為使用了 table 那樣
的制表標簽導致的語義化問題。
之所以現在逐漸淘汰了 table 系表格元素，是因為用 div+css 編寫出來的文件比用
table 邊寫出來的文件小，而且 table 必須在頁面完全加載后才顯示，div 則是逐行顯
示，table 的嵌套性太多，沒有 div 簡潔

---

? position 屬性的值有哪些及其區別

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

---

? z-index 的定位方法

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

---

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

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

---

? 對 CSS 的新屬性有了解過的嗎？

1.文本陰影屬性

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

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

2.盒子陰影

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

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

3.文本換行

(1）word-wrap?此屬性來設置是否允許瀏覽器在單詞內斷句，解決一個字符串太長瀏覽器找不到自然斷點而文本溢出的問題。

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

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

word-wrap: nomal | break-word;

（2）

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

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

4. 文本溢出

text-overflow

設置或檢索當當前行超過指定容器的邊界時如何顯示，屬性有兩個值選擇：

• clip：修剪文本
• ellipsis：顯示省略符號來代表被修剪的文本

5. text-decoration

CSS3里面開始支持對文字的更深層次的渲染，具體有三個屬性可供設置：

• text-fill-color: 設置文字內部填充顏色
• text-stroke-color: 設置文字邊界填充顏色
• text-stroke-width: 設置文字邊界寬度

6. 顏色

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

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

7. 邊框

css3新增了三個邊框屬性，分別是：

• border-radius：創建圓角邊框

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

• border-image：使用圖片來繪制邊框

8. 背景

新增了幾個關于背景的屬性，分別是background-clip、background-origin、background-size和background-break

background-clip
用于確定背景畫區，有以下幾種可能的屬性：

• background-clip: border-box; 背景從border開始顯示
• background-clip: padding-box; 背景從padding開始顯示
• background-clip: content-box; 背景顯content區域開始顯示
• background-clip: no-clip; 默認屬性，等同于border-box

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

background-origin
當我們設置背景圖片時，圖片是會以左上角對齊，但是是以border的左上角對齊還是以padding的左上角或者content的左上角對齊? border-origin正是用來設置這個的

• background-origin: border-box; 從border開始計算background-position
• background-origin: padding-box; 從padding開始計算background-position
• background-origin: content-box; 從content開始計算background-position

默認情況是padding-box，即以padding的左上角為原點

background-size
background-size屬性常用來調整背景圖片的大小，主要用于設定圖片本身。有以下可能的屬性：

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

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

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

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

---

? line-height 和 height 的區別

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

---

? 設置一個元素的背景顏色，背景顏色會填充哪些區域？

參考回答： background-color 設置的背景顏色會填充元素的 content、padding、border 區域。

---

? 知道屬性選擇器和偽類選擇器的優先級嗎

參考回答： 屬性選擇器和偽類選擇器優先級相同

---

? inline-block、inline 和 block 的區別；為什么 img 是 inline 還可以 設置寬高

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

---

• 用 css 實現一個硬幣旋轉的效果

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

---

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

參考回答： 重排： 如果改變了元素的寬高，元素的位置，就會導致瀏覽器不得不重新計算元素的幾何屬性，并重新構建渲染樹，這個過程稱為“重排”。 重繪：完成重排后，要將重新構建的渲染樹渲染到屏幕上，這個過程就是“重繪”。 引起重排重繪的原因有：

• 添加或者刪除可見的 DOM 元素，
• 元素尺寸位置的改變
• 瀏覽器頁面初始化，
• 瀏覽器窗口大小發生改變，重排一定導致重繪，重繪不一定導致重排，

減少重繪重排的方法有：

• 不在布局信息改變時做 DOM 查詢，
• 使用 csstext,className 一次性改變屬性
• 使用 fragment
• 對于多次重排的元素，比如說動畫。使用絕對定位脫離文檔流，使其不影響其他元素

---

? CSS 畫正方體，三角形

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

?? 如何畫一個三角形

參考回答：
三角形原理：邊框的均分原理 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;

要講清楚這個解決方案的原理，首先需要了解塊格式化上下文，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.翻譯過來就是塊格式化上下文是 CSS 可視化渲染的一部分，它是一塊區 域，規定了內部塊盒 的渲染方式，以及浮動相互之間的影響關系 當元素設置了 overflow 樣式且值部位 visible 時，該元素就構建了一個 BFC，BFC 在 計算高度時，內部浮動元素的高度也要計算在內，也就是說技術 BFC 區域內只有一個 浮動元素，BFC 的高度也不會發生塌縮，所以達到了清除浮動的目的。

---

? box-sizing 的語法和基本用處

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

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

●content-box：瀏覽器對盒模型的解釋遵從W3C標準，當定義width和height時，它的參數值不包括border和padding。

●border-box：當定義width和height時，border和padding的參數值被包含在width和height之內。

---

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

參考回答： margin 的外邊緣

---

? css 布局

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

---

? relative 定位規則

參考回答： 如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂 直或水平位置，讓這個元素“相對于”它的起點進行移動。 在使用相對定位時，無論 是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。

---

?? 實現一個兩列等高布局，講講思路

參考回答：

1、flex方法

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

2、Grid方法

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

3、Position：absolute；方法

????????父容器相對定位，子元素絕對定位，高度為100%時會自動適應父容器的高度。所以當右側的高度變化撐起父容器不同的高度時，左側也會保持一致。

.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(內外邊距相互抵消，再加上一個overflow:hidden即可)：

為了實現兩列等高，可以給每列加上 padding-bottom:9999px;

margin-bottom:-9999px;同時父元素設置 overflow:hidden;

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

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

---

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。