本篇文章將給大家總結分享75道前端面試CSS中的高頻考點,幫助同學們力闖秋招,趕快收藏起來學習啦!
前端(vue)入門到精通課程:進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具:點擊使用
理論篇
1. box-sizing 屬性值有什么作用?
用來控制元素的盒子模型的解析模式,默認為content-box
-
context-box
:W3C 的標準盒子模型,設置元素的 height/width 屬性指的是 content 部分的高/寬 -
border-box
:IE 傳統(tǒng)盒子模型。設置元素的 height/width 屬性指的是 border + padding + content部分的高/寬
【學習視頻分享:css視頻教程、web前端】
2. absolute 絕對定位,是相對于誰的定位?
CSS position屬性用于指定一個元素在文檔中的定位方式。
absolute 的元素會被移出正常文檔流,并不為元素預留空間,通過指定元素相對于最近的非 static 定位祖先元素進行定位,確定元素位置。絕對定位的元素可以設置外邊距,且不會與其他邊距合并。
3. 行內(nèi)元素和塊級元素有什么區(qū)別?
行內(nèi)元素:一個行內(nèi)元素只占據(jù)它對應標簽的邊框所包含的空間。
塊級元素:塊級元素占據(jù)其父元素(容器)的整個空間,因此創(chuàng)建了一個“塊”。
區(qū)別:
-
是否另起一行:認情況下,行內(nèi)元素不會以新的一行開始,而塊級元素會新起一行。
-
是否可設置寬高:塊級元素可以設置 width, height屬性,注意:塊級元素即使設置了寬度,仍然是獨占一行的。 而行內(nèi)元素設置 width, height 無效。
-
是否可設置內(nèi)外邊距:塊級元素都可,行內(nèi)元素的水平方向的 padding-left/right, margin-left/right 都產(chǎn)生邊距效果,但是豎直方向的 padding-top/bottom, margin-top/bottom 都不會產(chǎn)生邊距效果。(也就是水平方向有效,豎直方向無效)
-
是否包含對方:塊級元素可以包含行內(nèi)元素和塊級元素。行內(nèi)元素不能包含塊級元素
4. 常見的行內(nèi)元素和塊級元素有哪些?
1、常見的行內(nèi)元素
<span>、<a>、<lable>、<strong>、<b>、<small>、<abbr>、<button>、<input>、<textarea>、<select>、<img>
2、常見的塊級元素
<div>、<p>、<li>、<h1> ~ <h6>、<form>、<header>、<hr>、<ol>、<ul>、<article>、<aside>、<dd>、<dl>
5. 如何檢測瀏覽器所支持的最小字體大?。?/strong>
可以使用 JS 設置 DOM 的字體為某一個值,然后再取出來,如果值設置成功,就說明支持。
6. CSS中的 "flex:1;" 是什么意思?
flex 是 flex-grow, flex-shrink 和 flex-basis的簡寫。
除了auto (1 1 auto) 和 none (0 0 auto)這兩個快捷值外,還有以下設置方式:
- 當 flex 取值為一個非負數(shù)字,則該數(shù)字為 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下是等同的:
.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }
登錄后復制 - 當 flex 取值為 0 時,對應的三個值分別為 0 1 0%
.item {flex: 0;} .item { flex-grow: 0; flex-shrink: 1; flex-basis: 0%; }
登錄后復制