1.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區 別： IE的content部分把 border 和 padding計算了進去;
2.CSS選擇符有哪些？哪些屬性可以繼承？
- 選擇符
（1）id選擇器（ # myid）
（2）類選擇器（.myclassname）
（3）標簽選擇器（div, h1, p）
（4）相鄰選擇器（h1 + p）
（5）子選擇器（ul > li）
（6）后代選擇器（li a）
（7）通配符選擇器（ * ）
（7）屬性選擇器（a[rel = "external"]）
（9）偽類選擇器（a:hover, li:nth-child） - 可繼承的樣式： font-size font-family color, ul li dl dd dt
- 不可繼承的樣式：border padding margin width height
3.CSS優先級演算法如何計算？
- 優先級就近原則，同權重情況下樣式定義最近者為準；
- 載入樣式以最后載入的定位為準；
優先級:
同權重: 行內樣式表（標簽內部）> 嵌入樣式表（當前檔案中）>外部樣式表（外部檔案中），
!important > id > class > tag
important 比 行內優先級高
4.CSS3新增偽類有那些？
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素
::after 在元素尾部添加內容,也可以用來做清除浮動
::before 在元素頭部添加內容
:enabled 匹配每個已啟用的元素
:disabled 控制表單控制元件的禁用狀態
:checked 單選框或復選框被選中
5.如何居中div？
（1）水平居中：給div設定一個寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
（2）讓絕對定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
（3）水平垂直居中一
已知容器的寬高 寬500 高 300
設定層的 'margin'
div {
position: relative; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外邊距為自身寬高的一半 */
background-color: pink; /* 方便看效果 */
}
（4）水平垂直居中二
未知容器的寬高
利用 'transform' 屬性
div {
position: absolute; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
（5）水平垂直居中三
利用 'flex' 布局
實際使用時應考慮兼容性
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
6.display有哪些值？說明他們的作用，
- block 塊型別，默認寬度為父元素寬度，可設定寬高，換行顯示；
- none 元素不顯示，并從檔案流中移除；
- inline 行內元素型別，默認寬度為內容寬度，不可設定寬高，同行顯示；
- inline-block 默認寬度為內容寬度，可以設定寬高，同行顯示；
- list-item 象塊型別元素一樣顯示，并添加樣式串列標記；
- table 此元素會作為塊級表格來顯示；
- inherit 規定應該從父元素繼承 display 屬性的值，
7.position的值relative和absolute定位原點是？
- absolute 生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位，
- fixed （老IE不支持）生成絕對定位的元素，相對于瀏覽器視窗進行定位，
- relative 生成相對定位的元素，相對于其正常位置進行定位，
- static 默認值，沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 宣告），
- inherit 規定從父元素繼承 position 屬性的值，
8.CSS3有哪些新特性？
- 新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點）
- 圓角 （border-radius:8px）
- 多列布局 （multi-column layout）
- 陰影和反射 （Shadow\Reflect）
- 文字特效 （text-shadow、）
- 文字渲染 （Text-decoration）
- 線性漸變 （gradient）
- 旋轉 （transform）
- 縮放,定位,傾斜,影片,多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation
9.請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
- 一個用于頁面布局的全新CSS3功能，Flexbox可以把串列放在同一個方向（從上到下排列，從左到右），并讓串列能延伸到占用可用的空間，
- 較為復雜的布局還可以通過嵌套一個伸縮容器（flex container）來實作，
- 采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"，
- 它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱"專案"，
- 常規布局是基于塊和行內流方向，而Flex布局是基于flex-flow流可以很方便的用來做局中，能對不同螢屏大小自適應，
- 在布局上有了比以前更加靈活的空間，
10.用純CSS創建一個三角形的原理是什么？
原理：把上、左、右三條邊隱藏掉（顏色設為 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
11.一個滿屏 品 字布局 如何設計？
實作方式：
上面的div寬100%，
下面的兩個div分別寬50%，
然后用float或者inline使其不換行即可
12.css多列等高如何實作？
利用padding-bottom|margin-bottom正負值相抵；設定父容器設定超出隱藏（overflow:hidden），這樣子父容器的高度就還是它里面的列沒有設定padding-bottom時的高度，當它里面的任一列高度增加了，則父容器的高度被撐到里面最高那列的高度，其他比這列矮的列會用它們的padding-bottom補償這部分高度差，
13.經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？
-
png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
-
瀏覽器默認的margin和padding不同，
解決方案：
最簡單的方法，但是不建議使用，具體可以參照 第15條初始化樣式
*{
margin:0;
padding:0;
}
- IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設定的大，
浮動ie產生的雙倍距離，如：
#box{
float:left;
width:10px;
margin:0 0 0 100px;
}
這種情況之下IE會產生20px的距離
解決方案：
#box{
float:left;
_display:inline; // '_'這個符號只有ie6會識別
width:10px;
margin:0 0 0 100px;
}
漸進識別的方式，從總體中逐漸排除區域，
首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來，
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別，
.bb{
background-color:red; /*所有識別*/
background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff; /*IE6、7識別*/
_background-color:#1e0bd1; /*IE6識別*/
}
- IE下,可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；
Firefox下，只能使用getAttribute()獲取自定義屬性，
解決方案： 統一通過getAttribute()獲取自定義屬性，
- IE下，even物件有x，y屬性,但是沒有pageX，pageY屬性；
Firefox下，event物件有pageX，pageY屬性，但是沒有x，y屬性，
解決方案： （條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數，
- Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示
解決方法： 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決，
- 超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不在具有hover和active了
解決方案：
改變CSS屬性的排列順序: L-V-H-A
a:link {} a:visited {} a:hover {} a:active {}
14.li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了，
15.為什么要初始化CSS樣式，
-
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異，
-
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化，
-
最簡單的初始化方法： （強烈不建議）
* {
padding: 0;
margin: 0;
}
淘寶的樣式初始化代碼：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin:0; padding:0;
}
body, button, input, select, textarea {
font:12px/1.5tahoma, arial, \5b8b\4f53;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
}
address, cite, dfn, em, var {
font-style:normal;
}
code, kbd, pre, samp {
font-family:couriernew,
courier, monospace;
}
small{
font-size:12px;
}
ul, ol {
list-style:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
sup {
vertical-align:text-top;
}
sub{
vertical-align:text-bottom;
}
legend {
color:#000;
}
fieldset, img {
border:0;
}
button, input, select, textarea {
font-size:100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}
16.css定義的權重
以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100
/* 權重為1 */
div{ }
/* 權重為10 */
.class1{ }
/* 權重為100 */
#id1{ }
/* 權重為100+1=101 */
#id1 div{ }
/* 權重為10+1=11 */
.class1 div{ }
/* 權重為10+10+1=21 */
.class1 .class2 div{ }
如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現
17.請解釋一下為什么需要清除浮動？清除浮動的方式
why? 清除浮動是為了清除使用浮動元素產生的影響，浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示，
方式：
（1）父級div定義height；（要求能夠詳細計算出實際高度，否則容易布局混亂，不推薦使用，）
（2）父級div 也一起浮動；（與父元素相鄰的元素的布局會受到影響，如果全部浮動的話，太麻煩也不利于后期維護，不推薦使用，）
（3）父級div定義 overflow: hidden；（無法顯示溢位部分，會觸發BFC，不推薦使用，）
（4）浮動元素的父級div定義偽類:after
div::after,div::before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
div {
*zoom: 1;
}
決議原理：
（1）display:block 使生成的元素以塊級元素顯示，占滿剩余空間；
（2）height:0 避免生成內容破壞原有布局的高度；
（3）visibility:hidden 使生成的內容不可見，并允許可能被生成內容蓋住的內容可以進行點擊和互動；
（4）通過 content:" "生成內容作為最后一個元素，至于content里面是點還是其他都是可以的，例如oocss里面就有經典的 content:""，有些版本可能content里面內容為空,一絲冰涼是不推薦這樣做的，firefox直到7.0 content:"" 仍然會產生額外的空隙；
（5）zoom：1 觸發IE hasLayout，
18.什么是外邊距合并？
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距，
合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者，
19.::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用，
- 單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素，（偽元素由雙冒號和偽元素名稱組成）
- 雙冒號是在當前規范中引入的，用于區分偽類和偽元素，不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，:before、:after等，而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法，
- 想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；
- 在代碼順序上，::after生成的內容也比::before生成的內容靠后，
- 如果按堆疊視角，::after生成的內容會在::before生成的內容之上
20.CSS優化、提高性能的方法有哪些？
- 關鍵選擇器（key selector），選擇器的最后面的部分為關鍵選擇器（即用來匹配目標元素的部分）；
- 如果規則擁有 ID 選擇器作為其關鍵選擇器，則不要為規則增加標簽，過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）；
- 提取專案的通用公有樣式，增強可復用性，按模塊撰寫組件；增強專案的協同開發性、可維護性和可擴展性；
- 使用預處理工具或構建工具（gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級），
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/275713.html
標籤：Html/Css