1.css盒子模型

css3 引入了box-sizing屬性，有三個值，border-box（IE盒子模型）、content-box（標準盒子模型）、padding-box。

W3C標準盒子模型：

• 設置width指的是content的寬度。
• 盒子寬度：border+padding+width

IE盒子模型：

• 設置width就是盒子寬度

注意： box-sizing：padding-box

• 寬度width指的是padding+width。
• 盒子寬度：border+width。

2.畫一條0.5px的直線

height:1px; transform:scale(0.5);

3、link和import標簽的區別

• link屬于html標簽，頁面被加載時，link會同時被加載。沒有兼容性問題。
• @import是css提供的，會在頁面加載完畢后再加載，只有IE5以上才能識別。
• 注意： link方式引入的樣式的權重高于@import。

4、transition和animation的區別

兩者都是隨時間改變元素的屬性值
區別：

• transition需要觸發一個事件才能改變屬性.為兩幀，from…to…
• animation不需要觸發任何事件隨著時間改變屬性值，是一幀一幀的。

5、BFC（塊級格式化上下文，用于清除浮動，防止margin重疊）

獨立的渲染區域，有一定的布局規則，子元素不會影響到外面。
生成BFC的條件：

• 根元素
• float不為none的元素
• position為fixed和adsolute的元素
• overflow不為visible的元素(auto,scroll,hidden)
• display為inline-block、table-cell、flex、inline-flex、table-caption的元素

6、清楚浮動

• 父級 div 定義偽類：after 和 zoom (推薦使用，建議定義公共類，以減少 CSS 代碼)

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

• 在結尾處添加空 div 標簽 clear:both

<div class="parent"><div class="left">Left</div><div class="right">Right</div><div class="clearfloat"></div> </div> <style>.left {float:left}.clearfloat{clear:both} </style>

• 父級 div 定義 height
• 父級 div 定義 overflow:auto
• 父級 div 定義 overflow:hidden
• 父級 div 也一起浮動
• 父級 div 定義 display:table
• 結尾處加 br 標簽 clear:both

7、如何垂直居中一個元素

• 絕對定位。通過與父元素的絕對定位來讓自身實現垂直居中。
• 如果居中的是行內元素，可以設置父級 height 與 line-height 相等
• 設置 margin/padding 居中
• 相對位置偏移居中
• flex 居中 設置 align-items:center 即可

8、position定位

• static 默認 不定位
• relative 相對定位 相對于原來正常文檔流的自己定位
• absolute 絕對定位
  當父元素無定位，相對于瀏覽器定位
  當父元素有定位，相對于離自己最近的有定位的包含框定位
• fixed 固定定位 始終相對于瀏覽器定位

9、使用CSS實現隱藏元素的方式有幾種 ？

• Opacity:設置一個元素的透明度 .hide{opacity:0;}
• Visibility .hide{visibility:hidden}
• Display:確保元素不可見并且連盒模型也不生成 .hide{display:none}
• Position .hide{position:absolute; top:-9999px; left:-9999px;}
• Clip-path .hide{clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px};

10、27. CSS 中的長度單位有哪些

絕對長度單位：

• PX 實際上是一個按角度度量的單位，是一個像素單位
• Em 是一個相對單位，相對本身字體大小
• Rem rem和em一樣也是一個相對單位，但是和em不同的是rem總是相對于根元素

可視區百分比長度單位：

• Vw 是可視區寬度單位，1vw等于可視區寬度的百分之一，vw單位跟百分比很相似

11、28. CSS中選擇器的優先級關系？

！Important>行內樣式>ID選擇器>類選擇器>標簽>通配符>繼承>瀏覽器默認屬性

總結

以上是生活随笔為你收集整理的前端常见面试题-css篇的全部內容，希望文章能夠幫你解決所遇到的問題。

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