CSS
介紹CSS的盒子模型？
（1）有兩種，IE 盒子模型、標(biāo)準(zhǔn)W3C 盒子模型；IE的content部分包含了border 和pading;
（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).
CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先權(quán)演算法如何計(jì)算？ CSS3新增偽類有那些？
* ? 1.id選擇器（ # myid）
? ?2.類別選擇器（.myclassname）
? ?3.標(biāo)籤選擇器（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 ;
* ? 優(yōu)先權(quán)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
* ? 載入樣式以最後載入的定位為準(zhǔn);
優(yōu)先權(quán)為:
? !important > ?id > class > tag ?
? !important > ?id > class > tag ?
CSS3新增偽類別範(fàn)例：
p:first-of-type 選擇屬於其父元素的首個(gè)<p>元素的每個(gè)<p> 元素。
p:last-of-type ?選擇屬於其父元素的最後 <p> 元素的每個(gè) <p> 元素。
p:only-of-type ?選擇屬於其父元素唯一的 <p> 元素的每個(gè) <p> 元素。
p:only-child ? ?選擇屬於其父元素的唯一子元素的每個(gè) <p> 元素。
p:nth-child(2) ?選擇屬於其父元素的第二個(gè)子元素的每個(gè) <p> 元素。
:enabled ?:disabled 控製表單控制項(xiàng)的停用狀態(tài)。
如何居中div？如何居中一個(gè)浮動(dòng)元素？
為div設(shè)定一個(gè)寬度，然後新增margin:0 auto屬性
div{
? ?width:200px;
? ?margin:0 auto;
# } ?
#####居中一個(gè)浮動(dòng)元素###
?確定容器的寬高寬500 高300 的層
?設(shè)定層的外邊距
.div {
?Width:500px ; height:300px;//高度可以不設(shè)
?Margin: -150px 0 0 -250px;
?position:relative;相對(duì)定位
?background-color:pink;//方便看效果
?left:50%;
?top:50%;
}
?1. ?
?block 象塊類型元素一樣顯示。
?none 預(yù)設(shè)值。象行內(nèi)元素類型一樣顯示。
?inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。
?list-item 象塊類型元素一樣顯示，並新增樣式清單標(biāo)記。
?2.
?*absolute
? ? ? ?產(chǎn)生絕對(duì)定位的元素，相對(duì)於 static 定位以外的第一個(gè)父元素進(jìn)行定位。
?*fixed （舊IE不支援）
? ? ? ?產(chǎn)生絕對(duì)定位的元素，相對(duì)於瀏覽器視窗進(jìn)行定位。
?*relative
? ? ? ?產(chǎn)生相對(duì)定位的元素，相對(duì)於其正常位置進(jìn)行定位。
?* static ?預(yù)設(shè)值。沒有定位，元素出現(xiàn)在正常的流中
?*（忽略 top, bottom, left, right z-index 宣告）。
?* inherit 規(guī)定從父元素繼承 position 屬性的值。
?CSS3實(shí)作圓角（border-radius:8px），陰影（box-shadow:10px），
?對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform )
?transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
?增加了更多的CSS選擇器?多背景rgba
- 因?yàn)闉g覽器的相容問題，不同瀏覽器對(duì)有些標(biāo)籤的預(yù)設(shè)值是不同的，如果沒有對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
- 當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
*最簡(jiǎn)單的初始化方法就是： * {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; }
#absolute的containing block計(jì)算方式跟正常流有什麼不同？
position跟display、margin collapse、overflow、float這些特性相互疊加後會(huì)怎麼樣？
對(duì)BFC規(guī)範(fàn)的理解？
（W3C CSS 2.1 規(guī)範(fàn)中的一個(gè)概念,它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)係和相互作用。）
css定義的權(quán)重
以下是權(quán)重的規(guī)則：標(biāo)籤的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是示範(fàn)各種定義的權(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{
}
如果權(quán)重相同，則最後定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn)
解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧
用過媒體查詢，針對(duì)行動(dòng)端的佈局嗎？
使用 CSS 預(yù)處理器嗎？喜歡那個(gè)？
SASS
1
0
0
歡迎選擇我的課程，讓我們一起見證您的進(jìn)步~~
