1.盒模型
每一個(gè)盒子有四條邊界:外邊距邊界margin, 邊框邊界border, 內(nèi)邊距邊界padding與內(nèi)容邊界content乾蓬。
IE盒模型和W3C盒模型在計(jì)算總寬度存在一些差異
在W3C模型中: 總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
在IE模型中: 總寬度 = margin-left + width + margin-right
在CSS3中引入了box-sizing屬性, 它可以允許改變默認(rèn)的CSS盒模型對(duì)元素寬高的計(jì)算方式.
共包括兩個(gè)選項(xiàng):
content-box:標(biāo)準(zhǔn)盒模型陕习,CSS定義的寬高只包含content的寬高
border-box:IE盒模型瘫辩,CSS定義的寬高包括了content帐要,padding和border
2. 定位機(jī)制
標(biāo)準(zhǔn)文檔流
從左到右府喳,從上向下针姿,輸出文檔內(nèi)容
由塊級(jí)元素(從左到右撐滿頁面窗声,獨(dú)占一行相恃,觸碰到頁面邊緣時(shí)自動(dòng)換行的元素, 如div, ul, li, dl, dt, p)和行級(jí)元素組成(能在同一行內(nèi)顯示并且不會(huì)改變HTML文檔結(jié)構(gòu),如span, input)
浮動(dòng)
設(shè)置為浮動(dòng)的元素將會(huì)往左(float:left)或者往右(float:right)漂移, 直到遇到阻擋 - 其他浮動(dòng)元素或者父元素的邊框笨觅。浮動(dòng)元素不在標(biāo)準(zhǔn)文檔流中占據(jù)空間,但會(huì)對(duì)其后的浮動(dòng)元素造成影響拦耐。
絕對(duì)定位
設(shè)置為絕對(duì)定位的元素(posistion:absolute)將從標(biāo)準(zhǔn)文檔流中刪除,其所占據(jù)的標(biāo)準(zhǔn)流空間也不存在见剩。然后通過top,left,right,bottom屬性對(duì)其相對(duì)父元素進(jìn)行定位杀糯。
3. Flex布局
Flexbox又叫彈性盒模型。它可以簡(jiǎn)單使用一個(gè)元素居中(包括水平垂直居中)苍苞,可以讓擴(kuò)大和收縮元素來填充容器的可利用空間固翰,可以改變?cè)创a順序獨(dú)立布局,以及還有其他的一些功能羹呵。
Flex布局是我最喜歡的布局骂际,合理使用它能夠大大減少布局方面的工作, 例如以上列舉的三列布局也可以使用flex輕松實(shí)現(xiàn)。此外在移動(dòng)端使用flex也比較常見冈欢。
4.?響應(yīng)式布局(Responsive Web Design)
響應(yīng)式布局是指方援,網(wǎng)頁可以自動(dòng)識(shí)別設(shè)備屏幕寬度,根據(jù)不同的寬度采用不同的CSS的樣式涛癌,從而達(dá)到兼容各種設(shè)備的效果犯戏。
響應(yīng)式布局使用媒體查詢(CSS3 Media Queries), 根據(jù)不同屏幕分辨率采用不同CSS規(guī)則, 使用方式如下:
@mediascreenand(max-width:1024px) {/* 視窗寬度小于1024px時(shí) */....}
5.?哪些屬性可以繼承送火?
Css中可以繼承的屬性如下:
文本相關(guān)屬性:font-family、font-size先匪、font-style种吸、font-variant、font-weight呀非、font?坚俗、letter-spacing、line-height岸裙、text-align猖败、?text-indent、?text-transform?降允、word-spacing?恩闻、color;
列表相關(guān)屬性:list-style-image剧董、list-style-position幢尚、list-style-type、list-style翅楼;
表格相關(guān)屬性:border-collapse尉剩、border-spacing、caption-side毅臊、table-layoute理茎;
其他屬性:Cursor、visibility