css常見問題
1. CSS 中 inline 元素可以設置 padding 和 margin 嗎?
行內元素設置width,height無效。但是設置margin和padding是有效的。
行內非替換元素的外邊距不會改變一個元素的行高
div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dlspan, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code
2. CSS box-sizing 的值有哪些?
允許您以特定的方式定義匹配某個區域的特定元素。
box-sizing: content-box|border-box|inherit;
一般在做自適應的網頁設計的時候用,用這個屬性網頁結構纔不會被破壞。
常用的值:
content-box,border和padding不計算入width之內
padding-box,padding計算入width內
border-box,border和padding計算入width之內,其實就是怪異模式了~
兼容性
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
3. CSS BFC 原理?
BFC(block formatting context)塊級格式化上下文。是一個html盒子,裏面的元素左對齊
定義:
float的值不爲none
position的值不爲static或者relative
display的值爲 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個
overflow的值不爲visible
毗鄰塊盒子的垂直外邊距摺疊只有他們是在同一BFC時纔會發生。如果他們屬於不同的BFC,他們之間的外邊距將不會摺疊
BFC的作用
1、 清除內部浮動
我們在佈局時經常會遇到這個問題:對子元素設置浮動後,父元素會發生高度塌陷,也就是父元素的高度變爲0。解決這個問題,只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設置overflow:hidden。
2、 垂直margin合併
在CSS當中,相鄰的兩個盒子的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊,並且因而所結合成的外邊距稱爲摺疊外邊距。
摺疊的結果:
兩個相鄰的外邊距都是正數時,摺疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時,摺疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時,摺疊結果是兩者的相加的和。
這個同樣可以利用BFC解決。關於原理在前文已經講過了。
3、 創建自適應兩欄佈局
在很多網站中,我們常看到這樣的一種結構,左圖片+右文字的兩欄結構。
在圖片和文字的樣式中都加入overflow:hidden使他變爲塊級格式化上下文。
3. HTML5 和 CSS3 新特性?
html5:語義化標籤;增強型表單;視頻和音頻;canvas;svg繪圖;地理定位;拖放api;webworker;storage(sessionStorage和localStorage);webSocket;
HTML5的十大新特性
css3:
(1) CSS3實現圓角(border-radius),陰影(box-shadow),邊框圖片border-image
(2) 對文字加特效(text-shadow、),強制文本換行(word-wrap),線性漸變(linear-gradient)
(3)旋轉,縮放,定位,傾斜:transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
(4) 增加了更多的CSS選擇器、多背景、rgba();
(5)在CSS3中唯一引入的僞元素是 ::selection ;
(6) 媒體查詢(@media),多欄佈局(flex)
CSS 清除浮動的方法?
也就是防止元素高度塌陷
1、父元素變爲BFC塊級格式化上下文overflow:hidden;
缺點:元素溢出無法控制顯示,不要用
2、clear:{
clear:both;
}
3、僞元素after和before,clear:both
IE6-7不支持:after,使用 zoom:1觸發 hasLayout
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .clearfix { display: inline-block;
} /* for IE/Mac */
鑑於 IE/Mac的市場佔有率極低,我們直接忽略掉,最後精簡的代碼如下:
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}
1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;
2) height:0 避免生成內容破壞原有佈局的高度。
3) visibility:hidden 使生成的內容不可見,並允許可能被生成內容蓋住的內容可以進行點擊和交互;
4)通過 content:"."生成內容作爲最後一個元素,至於content裏面是點還是其他都是可以的,,有些版本可能content 裏面內容爲空,不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙;after在元素之後插入content的內容。
5)zoom:1 觸發IE hasLayout。
通過分析發現,除了clear:both用來閉合浮動的,其他代碼無非都是爲了隱藏掉content生成的內容,這也就是其他版本的閉合浮動爲什麼會有font-size:0,line-height:0。
4、CSS 實現左右垂直居中的方法?
CSS水平垂直居中常見方法總結
1、元素在文檔流裏是緊密佈局的,不能直接使用top left直接移動元素,容易造成混亂。
使用position:relative;元素在文檔流中位置不浮動來改變元素的居中。
content{
margin-top:-50% of height;
position:relative;
top:50%;}
2、彈性佈局flex
body {
display: flex;
align-items: center; /*定義body的元素垂直居中*/
justify-content: center; /*定義body的裏的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}
3、將父容器設置爲display:table
然後將子元素也就是要垂直居中顯示的元素設置爲 display:table-cell 。
但是,這是不值得推薦的,因爲會破壞整體的佈局
用過哪種 CSS 預處理器,簡單介紹一下?
談談CSS預處理器
目前最主流的CSS預處理器是LESS、SASS和Stylus
5、介紹幾種 CSS 僞類?
添加一些選擇器的特殊效果。
格式是:選擇器:僞類
after 元素後插入內容
before 元素之前插入內容
empty 元素內空的子元素
6、 CSS 選擇器優先級?
精華帖CSS選擇器優先級總結
id > 類選擇器 > 標籤選擇器>
7、 使用過的 CSS 佈局方式?
聖盃佈局、雙飛翼佈局、Flex佈局和絕對定位佈局
8、 CSS display 屬性的值及作用?
display 屬性規定元素應該生成的框的類型。
其中常用的的有none、inline、block、inline-block。分別的意思是:
1) none: 元素不會顯示,而且改元素現實的空間也不會保留。但有另外一個 visibility: hidden, 是保留元素的空間的。
2) inline: display的默認屬性。將元素顯示爲內聯元素,元素前後沒有換行符。我們知道內聯元素是無法設置寬高的,所以一旦將元素的display 屬性設爲 inline, 設置屬性height和width是沒有用的。此時影響它的高度一般是內部元素的高度(font-size)和padding。
3) block: 將元素將顯示爲塊級元素,元素前後會帶有換行符。設置爲block後,元素可以設置width和height了。元素獨佔一行。
4) inline-block:行內塊元素。這個屬性值融合了inline 和 block 的特性,即是它既是內聯元素,又可以設置width和height。
9、 CSS單位 rem 和 em 的區別?
px是固定的像素,一旦設置了就無法因爲適應頁面大小而改變。
em和rem相對於px更具有靈活性,他們是相對長度單位,意思是長度不是定死了的,更適用於響應式佈局。
對於em和rem的區別一句話概括:em相對於父元素,rem相對於根元素。
10、 標準盒子模型和css盒子模型的區別。
(1)有兩種, IE 盒子模型、W3C 盒子模型;
(2)盒模型: 內容(content)、填充(padding)、邊界(margin)、 邊框(border);
(3)區 別: IE的content部分把 border 和 padding計算了進去;
原文:https://segmentfault.com/a/1190000016002922