持續(xù)更新......
1. 標準的CSS的盒子模型缸剪？低版本IE的盒子模型有什么不同的？
- 盒模型： 內(nèi)容(content)溉瓶、填充(padding)照皆、邊界(margin)重绷、 邊框(border)；
- IE的content部分把 border 和 padding計算了進去;
無論是哪種盒子模型膜毁，子元素相對于父元素content定位昭卓。
改變盒子模型的屬性為 box-sizing: border-box/content-box;。
2. CSS選擇符有哪些爽茴？哪些屬性可以繼承葬凳？
- id選擇器（ # myid）
- 類選擇器（.myclassname）
- 標簽選擇器（div, h1, p）
- 相鄰選擇器（h1 + p）
- 子選擇器（ul > li）
- 后代選擇器（li a）
- 通配符選擇器（ * ）
- 屬性選擇器（a[rel = "external"]）
- 偽類選擇器（a:hover, li:nth-child）
可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border
3. CSS選擇器優(yōu)先級算法如何計算？
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高
4. CSS選擇器的權(quán)重
/*權(quán)重為1*/ div{ }
/*權(quán)重為10*/ .class1{ }
/*權(quán)重為100*/ #id1{ }
/*權(quán)重為100+1=101*/ #id1 div{ }
/*權(quán)重為10+1=11*/ .class1 div{ }
/*權(quán)重為10+10+1=21*/ .class1 .class2 div{ }
5.display有哪些值
| 屬性 | 說明 |
|---|---|
| block | 像塊類型元素一樣顯示 |
| none | 隱藏元素室奏，并且不占位 |
| inline-block | 像行內(nèi)元素一樣顯示火焰，但其內(nèi)容象塊類型元素一樣顯示 |
| list-item | 像塊類型元素一樣顯示，并添加樣式列表標記 |
| table | 此元素會作為塊級表格來顯示 |
| inherit | 從父元素繼承 display 屬性的值 |
6. position屬性值
-
absolute
生成絕對定位的元素胧沫，相對于值不為 static的第一個父元素進行定位昌简。 -
fixed
（老IE不支持） 生成絕對定位的元素，相對于瀏覽器窗口進行定位绒怨。 -
relative
生成相對定位的元素纯赎，相對于其正常位置進行定位。 -
static
默認值南蹂。沒有定位犬金，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）。 -
inherit
規(guī)定從父元素繼承 position 屬性的值
7. CSS3有哪些新特性？
新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （Shadow\Reflect）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉(zhuǎn) （transform）
增加了旋轉(zhuǎn),縮放,定位,傾斜,動畫晚顷，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation
8. 如何用CSS創(chuàng)建一個三角形峰伙？
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
9. 塊元素水平垂直居中
<div id="container">
<div id="box">
元素水平居中
</div>
</div>
<style>
/* 利用transform */
#container {
position: relative;
width: 500px;
height: 500px;
background: #0099cc;
}
#box {
width: 100px;
height: 200px;
border: 2px solid blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 或者利用flex*/
#container {
position: relative;
width: 500px;
height: 500px;
background: #0099cc;
display: flex;
justify-content: center;
align-items: center;
}
#box {
width: 100px;
height: 200px;
border: 2px solid blue;
}
</style>
10. px，em和rem的區(qū)別
- px像素是相對于屏幕分辨率的相對長度單位该默。比較精準
- em是相對文本字體尺寸的相對單位（
1em = 16px）瞳氓。當改變?yōu)g覽器設(shè)置里的字體大小時，em值也會相應(yīng)改變栓袖。
em會繼承父級元素的大小匣摘，類似百分比。所以裹刮，它的值并不固定音榜。 - rem（font size of the root element）是相對HTML根元素的相對單位，和px之間的轉(zhuǎn)換規(guī)則和rem一樣必指。它的優(yōu)勢在于不會繼承父級元素囊咏，所以值固定。
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
在根元素<html>中定義了一個基本字體大小為62.5%（也就是10px塔橡。設(shè)置這個值主要方便計算，如果沒有設(shè)置霜第，將是以“16px”為基準 ）葛家。從上面的計算結(jié)果，使用“rem”就像使用“px”一樣的方便泌类，而且同時解決了“px”和“em”兩者不同之處癞谒。
11. 如何清除浮動
最常用的兩種方法如下（應(yīng)用在父元素上面）：
<div id="box" class="clear">
<div id="child">a float box</div>
</div>
<style>
body {
padding: 100px;
}
#box {
border: 2px solid red;
}
#child {
float: left;
width: 100px;
height: 100px;
border: 2px solid green;
}
/*方法一*/
.clear {
overflow: hidden;
}
/*方法二*/
.clear:after {
display: block;
content: '';
clear: both;
}
</style>
微信公眾號：
