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.通配符選擇器( * )
8.屬性選擇器(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?如何居中一個浮動元素?如何讓絕對定位的div居中?
給div設置一個寬度,然後添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
居中一個浮動元素
確定容器的寬高 寬500 高 300 的層
設置層的外邊距
.div {
width:500px ;
height:300px;//高度可以不設
margin: -150px 0 0 -250px;
position:relative; //相對定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}
讓絕對定位的div居中
div{
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
6,display有哪些值?說明他們的作用。
block 象塊類型元素一樣顯示。none 缺省值。象行內元素類型一樣顯示。
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,用純CSS創建一個三角形的原理是什麼?
把上、左、右三條邊隱藏掉(顏色設爲 transparent)
demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
10,一個滿屏 品 字佈局 如何設計?
簡單的方式:上面的div寬100%,
下面的兩個div分別寬50%,
然後用float或者inline使其不換行即可
11,li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?
行框的排列會受到中間空白(回車\空格)等的影響,因爲空格也屬於字符,這些空白也會被應用樣式,佔據空間,所以會有間隔,把字符大小設爲0,就沒有空格了。
12,爲什麼要初始化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; }
13,absolute的containing block(容器塊)計算方式跟正常流有什麼不同?
無論屬於哪種,都要先找到其祖先元素中最近的 position 值不爲 static 的元素,然後再判斷:1、若此元素爲 inline 元素,則 containing block 爲能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形;
2、否則,則由這個祖先元素的 padding box 構成。
如果都找不到,則爲 initial containing block。
補充:
1. static(默認的)/relative:簡單說就是它的父元素的內容框(即去掉padding的部分)
2. absolute: 向上找最近的定位爲absolute/relative的元素
3. fixed: 它的containing block一律爲根元素(html/body),根元素也是initial containing block
14,對BFC規範(塊級格式化上下文:block formatting context)的理解?
(W3C CSS 2.1 規範中的一個概念,它是一個獨立容器,決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。)一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
不同類型的 Box,會參與不同的 Formatting Context(決定如何渲染文檔的容器),因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
創建規則:
根元素
浮動元素(float不是none)
絕對定位元素(position取值爲absolute或fixed)
display取值爲inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
作用:
可以包含浮動元素
不被浮動元素覆蓋
阻止父子元素的margin摺疊
15,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{}
如果權重相同,則最後定義的樣式會起作用,但是應該避免這種情況出現