面試題整理—CSS部分
HTML與css面試題梳理
使用css使元素上下居中的方法
不脫離文檔流方式
1.左右居中：加寬度，使用margin：0 auto；
上下居中：子元素的line-height與父元素height相等javascript
2.左右居中：加寬度，使用margin：0 auto；
上下居中：給子元素加margin-bottom（避免使用margin-top，存在margin-top傳遞問題，若是使用，須要給父元素加overflow：hidden）css
3.若是子元素內是文字直接使用text-align：center與line-height=height
4.水平居中：子元素margin:0 auto
垂直居中：給父元素加display: table-cell; vertical-align:java
脫離文檔流方式
5.絕對定位。
父級元素position：relative； 子級元素position: absolute; top: 50%; left: 50%; margin-top:-1/2子級高度； margin-left：-1/2子級寬度；jquery
6.絕對定位。
父元素position:relative; 子元素position：absolute； top:50%; left:50%; transform: translate(-50%,-50%);（指定元素在x軸y軸的平移）css3
7.彈性盒模型。
給父元素加display:flex;justify-content:center(實現水平居中效果),align-items:center(實現垂直居中效果)web
css選擇器有哪些？
1.標籤選擇器 div{ }
2.類選擇器 .class{ }
3.ID選擇器 #id{ }
4.通配符選擇器 *{ }
5.後代選擇器 ul li { }
6.子代選擇器 ul>li{ }（必須是緊鄰的父子關係）
7.屬性選擇器 （不經常使用） [標籤屬性名]{ }
8.分組選擇器 h1,div,p,a{ }
9.交集選擇器 div.div1{ }
div[title]{ }
10.僞類選擇器 ：link 默認的狀態
：hover 鼠標通過的狀態
：active 點擊時的狀態
：visited 點擊後的狀態
奇偶行 奇數：odd li:nth-child(2n+1)
偶數：even li:nth-child(2n)
第一和最後 :last-child :first-child
同類型中第n個兄弟 :nth-of-type(n)面試
css3新增僞類有哪些？
請給出【Sausage】的字體顏色值
<ul class='shopping-list' id='shop'>
<li><span>Milk</span></li>
<li class='favorite' id='must-buy'>
<span class='highlight'>Sausage</span></li>
</ul>
<style>
body{ color:grey;}
#shop .favorite:not(#shop).highlight{ color:red;}
#shop .highlight:nth-of-type(1):nth-last-of-type(1){ color:blue;}
</style>
複製代碼
爲何要遵循標籤語義化：
利於SEO優化（也就是搜索引擎的抓取，搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重）； 在樣式丟失的時候，仍是能夠比較好的呈現結構； 更好的支持各類終端，例如無障礙閱讀和有聲小說等； 利於團隊開發和維護，W3C給咱們定了一個標準，那麼團隊中都遵循這個標準，那麼代碼的差別就會縮小， 在開發和維護的時候就能夠提升效率； 平常工做中怎樣遵循標籤語義化：儘可能減小使用無心義標籤，例如span和div； 儘可能不使用標籤自己的css屬性，例如b、font、s等標籤，若是須要這些樣式，那麼使用css樣式來進行添加； 在須要強調的部分，使用strong、em，可是樣式儘可能使用css樣式來描述； 表格搭建時，使用表格頭部 表格身體 表格尾部； 列表搭建時，使用<ul>無序列表</ul> <ol>有序列表</ol> <dl>定義列表 ；canvas
簡述對css盒子模型的理解
盒子模型示意圖
1、簡述
圖中最內部的框是元素的實際內容，也就是元素框， 緊挨着元素框外部的是內邊距padding， 其次是邊框（border）， 而後最外層是外邊距（margin），整個構成了框模型。 一般咱們設置的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。 而外邊距margin是透明的，不會遮擋周邊的其餘元素。 那麼，元素框的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度； 元素框的總高度 = 元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度。瀏覽器
合併問題
兩個上下方向相鄰的元素框垂直相遇時，
外邊距會合並， 合併後的外邊距的高度等於 兩個發生合併的外邊距中較高的那個邊距值ruby
說說box-sizing
概念
box-sizing屬性是用戶界面屬性裏的一種，這個屬性跟盒子模型有關，並且在css reset中有可能會用到它。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默認值，可使設置的寬度和高度值應用到元素的內容框。盒子的width只包含內容
即總寬度=margin+border+padding+width
(2) border-box , 設置的width值實際上是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內容 即總寬度=margin+width
不少CSS框架，都會對盒子模型的計算方法進行簡化。
(3) inherit , 規定應從父元素繼承 box-sizing 屬性的值
關於border-box的使用：
1 一個box寬度爲100%，又想要兩邊有內間距，這時候用就比較好
2 全局設置 border-box 很好，首先它符合直覺，其次它能夠省去一次又一次的加加減減，它還有一個關鍵做用——讓有邊框的盒子正常使用百分比寬度。
如何用css繪製一個實心三角
.triangle {
width : 0;
height: 0;
border : 100px solid transparent;
border-top : 100px solid blue; /*這裏能夠設置border的top、bottom、left、right四個方向的三角*/ }
複製代碼
用css繪製空心三角
思路：繪製一個大的實心黑色三角和一個小的白色實心三角，讓小白三角覆蓋在大的黑三角上便可
用css畫對號
.duihao {position: absolute;
display: none;right:
.2rem;top: 40%;}
.duihao::before {content: '';
position: absolute;
width: 5px;
height: 15px;
color: #00CC9A;
border-bottom: 2px solid;
border-right: 2px solid;
top: 50%;
transform-origin: center;
transform: translate(-50%, -30%) rotate(45deg);
-webkit-transform: translate(-50%, -30%) rotate(45deg);}
複製代碼
如何用css畫空心圓
div{
width:100px;
height:100px;
border:2px solid #000;
border-radius:50%;
}
複製代碼
用css畫左右箭頭
.u-icon-left{position:absolute;
top:50%;
right:0px;
width:8px;
height:8px;
margin-top:-2px;
border-style:solid;
border-width:0px 0px 2px 2px;
border-color:#ababab;
-webkit-transform-origin: 75% 25%;
-webkit-transform: rotateZ(45deg);
-webkit-transition: 100ms ease-in .1s;
transition: 100ms ease-in .1s;}
.u-icon-arr{position:absolute;
top:50%;
right:0px;
width:8px;
height:8px;
margin-top:-2px;
border-style:solid;
border-width:2px 2px 0 0;
border-color:#ababab;
-webkit-transform-origin: 75% 25%;
-webkit-transform: rotateZ(45deg);
-webkit-transition: 100ms ease-in .1s;
transition: 100ms ease-in .1s;}
複製代碼
用css繪製加減號
.deleteicon{width: 2.13rem;
height: 2.13rem;
background: #fff;
border-radius: 100%;
position: absolute;
border: 1px solid #cbcbcc;}
.deleteicon:before{position: absolute;
content:'';
width:1.6rem ;
height: .15rem;
background:#cbcbcc;
transform:rotate(0deg);
top:.975rem;
left: .265rem;}
.addicon{width: 2.13rem;
height: 2.13rem;
background: #00cc9a;
border-radius: 100%;
position: absolute;}
.addicon:before{position: absolute;
content:'';
width:1.6rem;
height: 0.15rem;
background:white;
transform:rotate(0deg);
top:.975rem;left: 0.265rem;}
.addicon:after{content:'';
position: absolute;
width: 1.6rem;
height:0.15rem;
background:white;
transform:rotate(-90deg);
top: 0.975rem;
left: .265rem;}
複製代碼
用css繪製叉號
.info-close {position: fixed;
right: calc(50% - 10px);
width: 30px;
height: 30px;
background:#000;
opacity:.6;
border-radius: 25px;
cursor: pointer;
z-index: 2002;}
.info-close:before {position: absolute;
content:'';
width: 20px;
height: 2px;
background: white;
transform: rotate(45deg);
top: 14px;
left: 5px;}
.info-close:after{content: '';
position: absolute;
width: 20px;
height: 2px;
background: white;
transform: rotate(-45deg);
top: 14px;left: 5px;}
複製代碼
何時須要清除浮動，清除浮動都有哪些方法？
浮動引發了父級元素高度塌陷。
張鑫旭大神觀點：撇開浮動的「破壞性」，浮動就是個帶有方位的display:inline-block屬性。 若是咱們給方塊設置display:inline-block也能達到讓它們並排顯示的效果。而且父元素的高度也不會塌陷。只不過沒法控制是居左仍是居右，display:inline-block只能從左往右。
清除浮動的方法：
1.給父級元素添加高度（不經常使用）
2.給父級元素添加overflow：hidden 屬性 把元素拉回文檔流
3.在一組浮動元素的最後一個浮動元素後面加一段代碼
4.利用僞元素 給全部使用浮動的元素加一個clear類名
.cklear:after{
display:block;
content:"";
clear:both;}
複製代碼
讓元素在一行顯示有幾種方式?
1.float：left（或right）
2.display：inline（或inline-block） 3.定位 不管是float浮動仍是display實現並排顯示，要想並排顯示首先總寬度要小於或等於對象上級寬度，這樣才能並排顯示實現橫向排列排版佈局。
讓元素隱藏有幾種方法，及display:none 和 visibility: hidden區別 ?
這個問題引用了其餘大神的文章，原連接不記得了，如需刪掉請告知。 1.display:none
設置元素的display爲none是最經常使用的隱藏元素的方法。 將元素設置爲display:none後，元素在頁面上將完全消失，元素原本佔有的空間就會被其餘元素佔有，也就是說它會致使瀏覽器的重排和重繪。
2.visibility:hidden
設置元素的visibility爲hidden也是一種經常使用的隱藏元素的方法，和display:none的區別在於，元素在頁面消失後，其佔據的空間依舊會保留着，因此它只會致使瀏覽器重繪而不會重排。 visibility:hidden適用於那些元素隱藏後不但願頁面佈局會發生變化的場景
3.opacity:0
opacity屬性我相信你們都知道表示元素的透明度，而將元素的透明度設置爲0後，在咱們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。
這種方法和visibility:hidden的一個共同點是元素隱藏後依舊佔據着空間，但咱們都知道，設置透明度爲0後，元素只是隱身了，它依舊存在頁面中。
4.設置height，width等盒模型屬性及font-size爲0
這是我總結的一種比較奇葩的技巧，簡單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0， 若是元素內有子元素或內容，還應該設置其overflow:hidden來隱藏其子元素，這算是一種奇技淫巧。 這種方式既不實用，也可能存在着着一些問題。但平時咱們用到的一些頁面效果可能就是採用這種方式來完成的，好比jquery的slideUp動畫， 它就是設置元素的overflow:hidden後，接着經過定時器，不斷地設置元素的height，margin-top，margin-bottom，border-top， border-bottom，padding-top，padding-bottom爲0，從而達到slideUp的效果。
H5新增標籤
canvas 新元素
canvas標籤訂義圖形，好比圖表和其餘圖像。該標籤基於 JavaScript 的繪圖 API
新多媒體元素
audio定義音頻內容
video定義視頻（video 或者 movie）
source定義多媒體資源 video和 audio
embed定義嵌入的內容，好比插件
track爲諸如 video 和 audio 元素之類的媒介規定外部文本軌道。
新表單元素
datalist 定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
keygen 規定用於表單的密鑰對生成器字段。
output 定義不一樣類型的輸出，好比腳本的輸出。
新的語義和結構元素
header 定義了文檔的頭部區域
footer 定義 section 或 document 的頁腳。
nav 定義導航連接的部分。
section 定義文檔中的節（section、區段）。
article 定義頁面獨立的內容區域。
figure 規定獨立的流內容（圖像、圖表、照片、代碼等等）。
figcaption 定義figure元素的標題
aside 定義頁面的側邊欄內容。
time 定義日期或時間。
command 定義命令按鈕，好比單選按鈕、複選框或按鈕
details 用於描述文檔或文檔某個部分的細節
dialog 定義對話框，好比提示框
summary 標籤包含 details 元素的標題
mark 定義帶有記號的文本。
meter 定義度量衡。僅用於已知最大和最小值的度量。
progress 定義任何類型的任務的進度。
bdi 容許您設置一段文本，使其脫離其父元素的文本方向設置。
ruby 定義 ruby 註釋（中文註音或字符）。
rt 定義字符（中文註音或字符）的解釋或發音。
rp 在 ruby 註釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。
wbr 規定在文本中的何處適合添加換行符。
css3新增屬性
border-radius 圓角
border-shadow 盒子陰影
background-size 背景尺寸
background-clip 背景裁剪
background-origin 背景顯示原點
text-shadow 文字陰影
text-overflow 文字隱藏的方式 裁剪/省略號
box-sizing
transform 變換 轉換
animation 動畫
transition 過渡動畫
媒體查詢 @media
px，em，rem的區別？
px像素（Pixel）。
相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。(引自CSS2.0手冊)
PX特色
- IE沒法調整那些使用px做爲單位的字體大小；
- 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位；
- Firefox可以調整px和em，rem。
em是相對長度單位。
相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)
任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合: 1em=16px。
那麼12px=0.75em,10px=0.625em。爲了簡化font-size的換算，須要在css中的body選擇器中聲明Font-size=62.5%，
這就使em值變爲 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em,
也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了。
em特色
- em的值並非固定的；
- em會繼承父級元素的字體大小。 因此咱們在寫CSS的時候，須要注意兩點：
- body選擇器中聲明Font-size=62.5%；
- 將你的原來的px數值除以10，而後換上em做爲單位；
- 從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。 也就是避免1.2 * 1.2= 1.44的現象。好比說你在#content中聲明瞭字體大小爲1.2em， 那麼在聲明p的字體大小時就只能是1em，而不是1.2em, 由於此em非彼em， 它因繼承#content的字體高而變爲了1em=12px。
rem特色
rem是CSS3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。
這個單位與em的區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。
這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。
目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。
對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。
這些瀏覽器會忽略用rem設定的字體大小。
display：inline-block何時會出現間隙？及解決辦法。
出現狀況
<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<div class="box">
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
</div>
</body>
複製代碼
換行形成的空白符致使的
解決辦法
方法一： 元素之間不換行，代碼以下：
常見的瀏覽器及其內核
咱們把瀏覽器中識別代碼繪製頁面的東西稱爲瀏覽器的內核或者渲染引擎。
谷歌 chorme：webkit(v8引擎)國內大部分，安卓和IOS等等 火狐 firfow：Gecke 歐朋 Opera：presto 14代改成webkit IE：tirdent 瀏覽器兼容： 1.W3C發佈的規範都是開發者們不斷嘗試總結下來的產物 2.每一個瀏覽器爲了彰顯本身的不同，不按照標準來，可是把標準中規定的效果用另一種方式實現了。（寫同一個效果寫兩套代碼）
========================================================= 歡迎批評指正！
- 1. CSS面試題整理
- 2. 前端部分面試題目整理
- 3. 前端面試題整理——javaScript部分
- 4. python 部分面試題整理（1）
- 5. JavaSE部分面試題整理
- 6. JavaWeb部分面試題整理
- 7. ios 面試部分整理
- 8. CSS基礎部分問題整理
- 9. 前端面試題整理—HTML/CSS篇
- 10. 前端面試題目整理——css篇
- 更多相關文章...
- • Git 分支管理 - Git 教程
- • ionic 頭部與底部 - ionic 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker 清理命令
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS面試題整理
- 2. 前端部分面試題目整理
- 3. 前端面試題整理——javaScript部分
- 4. python 部分面試題整理（1）
- 5. JavaSE部分面試題整理
- 6. JavaWeb部分面試題整理
- 7. ios 面試部分整理
- 8. CSS基礎部分問題整理
- 9. 前端面試題整理—HTML/CSS篇
- 10. 前端面試題目整理——css篇