1.flex布局

彈性布局忘渔，子元素的float、clear和vertical-align屬性將失效辈讶，為盒裝模型提供最大的靈活性仍劈。分水平的主軸和垂直的交叉軸

容器的六個(gè)屬性：

<1>flex-direction:

主軸的方向装悲，即項(xiàng)目的排列方向：row? row-reverse? column? column-reverse

<2>flex-wrap:

如果一條軸線排不下如何換行：nowrap? wrap wrap-reverse（換行昏鹃，第一行在下面）

<3>flex-flow

是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap

<4>justify-content

定義了項(xiàng)目在主軸上的對(duì)齊方式：

（1）flex-start（默認(rèn)值）：左對(duì)齊

（2）flex-end：右對(duì)齊

（3）center： 居中

（4）space-between：兩端對(duì)齊诀诊，項(xiàng)目之間的間隔都相等洞渤。

（5）space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以属瓣，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍载迄。

<5>align-items屬性

定義項(xiàng)目在交叉軸上如何對(duì)齊:

（1）flex-start：交叉軸的起點(diǎn)對(duì)齊。

（2）flex-end：交叉軸的終點(diǎn)對(duì)齊抡蛙。

（3）center：交叉軸的中點(diǎn)對(duì)齊护昧。

（4）baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。

（5）stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto粗截，將占滿整個(gè)容器的高度惋耙。

<6>align-content屬性

定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線熊昌，該屬性不起作用绽榛。

flex-start | flex-end | center | space-between | space-around | stretch

項(xiàng)目的屬性：

（1）order屬性：

定義項(xiàng)目的排列順序，數(shù)值越小婿屹，排列越靠前灭美，默認(rèn)為0

（2）flex-grow屬性：

項(xiàng)目的放大比例，默認(rèn)為0

（3）flex-shrink屬性：

項(xiàng)目縮小的比例昂利，默認(rèn)為1

（4）flex-basis屬性：

定義了在分配多余空間之前届腐，項(xiàng)目占據(jù)的主軸空間，默認(rèn)值為auto

（5）flex屬性

是flex-grow蜂奸、flex-shrink梯捕、flex-basis的簡(jiǎn)寫

（6）align-self屬性

允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性窝撵。默認(rèn)值為auto傀顾，繼承父元素的align-items屬性，如果沒有父元素碌奉，值為stretch

2.CSS3新增屬性

屬性選擇器：[att^="value"] 屬性的值以指定的值開始

? ? ? ? ? ? ? ? ? ? ? [att$="value"] 屬性的值以指定的值結(jié)束

? ? ? ? ? ? ? ? ? ? ? [att*="value"]? 屬性的值包含指定的值

兄弟選擇器（同級(jí)）~

RBGA:r g b a(透明度)? 與Opacity的區(qū)別：前者只會(huì)應(yīng)用到指定的元素上短曾，后者會(huì)影響指定的元素及其子元素

多背景圖片：background-image寒砖、background-repeat、background-size嫉拐、background-position哩都、background-origin、background-positon相對(duì)于什么位置來定位婉徘。background-clip：將背景圖片裁剪到什么位置border-box漠嵌、padding-box、content-box

字符串溢出：word-wrap:normal和break-word

塊陰影與圓角陰影：box-shadow盖呼、text-shadow

-webkit-box-shadow:2px 2px 20px #06C

圓角：border-radius

-webkit-border-top-right-radius:20px;

邊框圖片：border-image

-webkit-border-image:url("images/b.jpg") 124;

形變：rotate實(shí)現(xiàn)旋轉(zhuǎn)? scale實(shí)現(xiàn)伸縮? skew實(shí)現(xiàn)傾斜

都寫在-webkit-transform后面

rotate(5deg) 角度? ?scale(1.00,1.50)矢量? ? ?skew(5deg,8deg)

3.將css引入到html文件中

行間樣式（內(nèi)聯(lián)樣式）

<style></style>內(nèi)嵌樣式表

<link/>外聯(lián)樣式表

@import 導(dǎo)入樣式表

4.清除浮動(dòng)方法

（1）在浮動(dòng)元素后使用一個(gè)空元素如<div class="clear"></div>儒鹿，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動(dòng)。

（2）使用CSS的overflow屬性：給浮動(dòng)元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動(dòng)

（3）給浮動(dòng)元素的容器也添加上浮動(dòng)屬性即可清除內(nèi)部浮動(dòng)几晤，但是這樣會(huì)使其整體浮動(dòng)约炎，影響布局，不推薦使用蟹瘾。

（4）結(jié)合 :after 偽元素（注意這不是偽類圾浅，而是偽元素，代表一個(gè)元素之后最近的元素）和 IEhack 憾朴，可以完美兼容當(dāng)前主流的各大瀏覽器狸捕，這里的 IEhack 指的是觸發(fā) hasLayout。給浮動(dòng)元素的容器添加一個(gè)clearfix的class众雷，然后給這個(gè)class添加一個(gè):after偽元素實(shí)現(xiàn)元素末尾添加一個(gè)看不見的塊元素（Block element）清理浮動(dòng)灸拍。

.clearfix:after{

?content: "\20";

?display: block;

?height: 0;

?clear: both;

?visibility: hidden;?

? }

.clearfix {

? /*觸發(fā)hasLayout*/

?zoom: 1;

? }

5.屬性繼承

不可繼承的：display、margin报腔、border株搔、padding、background纯蛾、height纤房、min-height、max- height翻诉、width炮姨、min-width、max-width碰煌、overflow舒岸、position、left芦圾、right蛾派、top、 bottom、z-index洪乍、float眯杏、clear、table-layout壳澳、vertical-align岂贩、page-break-after、 page-bread-before和unicode-bidi巷波。

?所有元素可繼承：visibility和cursor萎津。?

內(nèi)聯(lián)元素可繼承：letter-spacing、word-spacing抹镊、white-space锉屈、line-height、color髓考、font部念、font-family弃酌、font-size氨菇、font-style、font-variant妓湘、font-weight查蓉、text- decoration、text-transform榜贴、direction豌研。

?塊狀元素可繼承：text-indent和text-align。?

列表元素可繼承：list-style唬党、list-style-type鹃共、list-style-position、list-style-image驶拱。?

表格元素可繼承：border-collapse霜浴。?

6.BFC塊級(jí)格式化上下文

(Block Fromatting Context)是按照塊級(jí)盒子布局的，是一個(gè)獨(dú)立的渲染區(qū)域蓝纲，

布局規(guī)則：

（1）內(nèi)部的Box會(huì)在垂直方向阴孟，一個(gè)接一個(gè)地放置。

（2）Box垂直方向的距離由margin決定税迷。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

（3）每個(gè)元素的margin box的左邊永丝， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)箭养。即使存在浮動(dòng)也是如 此慕嚷。

（4）BFC的區(qū)域不會(huì)與float box重疊。

（5）BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素喝检。反之也如此砂心。

（6）計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

一個(gè)HTML元素要?jiǎng)?chuàng)建BFC蛇耀，則滿足下列的任意一個(gè)或多個(gè)條件即可：

（1）float的值不是none辩诞。

（2）position的值不是static或者relative。

（3）display的值是inline-block纺涤、table-cell译暂、flex、table-caption或者inline-flex

（4）overflow的值不是visible

（5）根元素

BFC作用及原理

（1）自適應(yīng)兩欄布局

.main{

? ? float: left;

? ? width: 100px;

? ? height: 100px;

? ? background-color: pink;

}

.aside{

height: 150px;

background-color: blue;

overflow: hidden;//使aside區(qū)域?yàn)锽FC

}

原理：BFC的區(qū)域不會(huì)與float box重疊撩炊。

（2）清除內(nèi)部浮動(dòng)

.par{

? ? border: 5px solid red;

? ? overflow: hidden;

}

.child{

? ? border:5px solid green;

? ? width: 100px;

? ? height: 100px;

? ? float: left;

}

原理：計(jì)算BFC的高度時(shí)外永，浮動(dòng)元素也參與計(jì)算

（3）防止margin重疊

.t{

? ? width: 100px;

? ? height: 100px;

? ? margin:100px;

? ? background-color: pink;

}

.wrap{

? ? overflow: hidden;

}

原理：Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

7.css布局的屬性有哪些

（1）顯示類屬性

display：none 隱藏元素拧咳，不占空間

? ? ? ? ? ? ? ?block塊級(jí)元素

? ? ? ? ? ? ? ? inline-block 內(nèi)聯(lián)塊級(jí)元素

? ? ? ? ? ? ? ? inline內(nèi)聯(lián)元素

????????????????table塊級(jí)表格

? ? ? ? ? ? ? ? table-cell表格單元格

? ? ? ? ? ? ? ?visibility:visible 可見

? ? ? ? ? ? ? ?hidden 不可見伯顶，但占據(jù)空間

（2）控制浮動(dòng)類

float：left

? ? ? ? ? right

? ? ? ? ? none

clear：none

? ? ? ? ? ? both

? ? ? ? ? ?left

? ? ? ? ? ?right

（3）控制溢出類

? ? overflow：hidden

? ? ? ? ? ? ? ? ? ? ?visible?

? ? ? ? ? ? ? ? ? ? ?scroll

? ? ? ? ? ? ? ? ? ? auto

8.說一下position的幾個(gè)屬性吧。

static：可以認(rèn)為靜態(tài)的骆膝，默認(rèn)元素都是靜態(tài)的定位祭衩，此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用，也就是使用left阅签、right掐暮、bottom、top將不會(huì)生效政钟。

relative：相對(duì)定位路克，參照自己在常規(guī)流中的位置

absolute：絕對(duì)定位，參照的是離自己最近的定位祖先元素养交。

fixed：其偏移定位是以窗口為參考

sticky：粘性定位精算，該定位基于用戶滾動(dòng)的位置。它的行為就像 position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)碎连，它的表現(xiàn)就像 position:fixed;灰羽，它會(huì)固定在目標(biāo)位置。

center：其偏移定位是以定位祖先元素的中心點(diǎn)為參考,盒子在其包含容器垂直水平居中破花。

page：與absolute一致谦趣。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊座每，否則取決于每個(gè)absolute模式前鹅。

9.css3了解多少，說到了漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng)：一開始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面峭梳，完成基本的功能舰绘，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果蹂喻、交互、追加功能達(dá)到更好的體驗(yàn)捂寿。相當(dāng)于向上兼容口四，該觀點(diǎn)認(rèn)為應(yīng)該關(guān)注于內(nèi)容本身。

優(yōu)雅降級(jí):一開始就構(gòu)建站點(diǎn)的完整功能秦陋，然后針對(duì)瀏覽器測(cè)試和修復(fù)蔓彩。比如一開始使用 CSS3 的特性構(gòu)建了一個(gè)應(yīng)用，然后逐步針對(duì)各大瀏覽器進(jìn)行 hack 使其可以在低版本瀏覽器上正常瀏覽驳概。相當(dāng)于向下兼容赤嚼，該觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來設(shè)計(jì)網(wǎng)站顺又。

10.實(shí)現(xiàn)水平豎直居中的幾種方法（高度和寬度不確定）

（1）/*元素水平垂直居中absolute元素已知寬度*/

.box4{

? ? position: relative;

? ? width: 300px;

? ? height: 300px;

? ? background-color: pink;

}

.main1{

? ? position: absolute;

? ? width: 100px;

? ? height: 100px;

? ? background-color: red;

? ? top: 50%;

? ? left: 50%;

? ? margin:-50px 0 0 -50px;

}

（2）/*元素水平垂直居中absolute元素未知寬度*/

.box5{

? ? position: relative;

? ? width: 300px;

? ? height: 300px;

? ? background-color: pink;

}

.main2{

? ? position: absolute;

? ? width: 100px;

? ? height: 100px;

? ? background-color: red;

? ? top: 50%;

? ? left: 50%;

? ? transform:translate(-50%,-50%);

}

（3）/*元素水平垂直居中flex*/

.box6{

? ? width: 300px;

? ? height: 300px;

? ? background-color: pink;

? ? display: flex;

? ? justify-content: center;

? ? align-items: center;

}

.main3{

? ? background-color: red;

? ? width: 100px;

? ? height: 100px;

}

（4）/*元素水平垂直居中table-cell*/

.box7{

? ? width: 300px;

? ? height: 300px;

? ? background-color: black;

? ? display: table;

}

.main4{

? ? background-color: pink;

? ? display: table-cell;

? ? vertical-align: middle;

? ? text-align: center;

}

.inner{

? ? background-color: red;

? ? display: inline-block;

? ? width: 20%;

? ? height: 20%;

}

11.CSS3中的動(dòng)畫

animation中可以取哪些值 （所有動(dòng)畫屬性的簡(jiǎn)寫屬性更卒，除了animation-play-state屬性）

animation-name規(guī)定@keyframes動(dòng)畫名稱

animation-duration規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒和毫秒

animation-timing-function規(guī)定動(dòng)畫的速度曲線，默認(rèn)是“ease”

animation-delay規(guī)定動(dòng)畫何時(shí)開始稚照，默認(rèn)為0

animation-iteration-count規(guī)定動(dòng)畫播放次數(shù)默認(rèn)是1

animation-direction規(guī)定動(dòng)畫是否在下一周期逆向播放蹂空，默認(rèn)值是“normal”

animation-play-state規(guī)定動(dòng)畫是否正在運(yùn)行或暫停，默認(rèn)是“running”

要運(yùn)用css3動(dòng)畫果录，需要運(yùn)用@keyframes規(guī)則和animation屬性

12.CSS中的單位有哪些分別說一說 （提到了ex）

px絕對(duì)單位 精確像素上枕，相對(duì)于屏幕分辨率

em相對(duì)單位? 基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小，如果自身定義了font-size按自身來計(jì)算

rem：相對(duì)單位雕憔，可理解為”root em”,?相對(duì)根節(jié)點(diǎn)html的字體大小來計(jì)算

vw：viewpoint width姿骏，視窗寬度糖声，1vw等于視窗寬度的1%

vh：viewpoint height斤彼，視窗高度，1vh等于視窗高度的1%蘸泻。

vmin：vw和vh中較小的那個(gè)

vmax：vw和vh中較大的那個(gè)琉苇。

%:百分比

in:寸

cm:厘米

mm:毫米

pt:point，大約1/72寸

pc:pica悦施，大約6pt并扇，1/6寸

ex：取當(dāng)前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計(jì)算

ch:以節(jié)點(diǎn)所使用字體中數(shù)字“0”字符寬度為基準(zhǔn)抡诞，找不到時(shí)為0.5em

13.響應(yīng)式布局

flex彈性布局：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

width=device-width視口為設(shè)備寬度（就是人設(shè)置的一個(gè)寬度）//不設(shè)置的話默認(rèn)為980px

initial-scale=1.0 初始化視口大小是1.0倍

maximum-scale=1.0最大的倍數(shù)是1.0倍

user-scalable=0 不允許縮放視口

img {

max-width: 100%;

}

讓圖片隨容器寬度自動(dòng)縮放

手機(jī)端兼容的前綴：

-ms-? ? 內(nèi)核是trident

?-moz-???內(nèi)核是?gecko

?-o-? ? ?前內(nèi)核是?Presto? ?現(xiàn)在是blink

-webkit-? ? 內(nèi)核是webkit

如果用百分比寫 width穷蛹，那么指的是父元素 width 的百分之多少。

如果用百分比寫 height昼汗，那么指的是父元素 height 的百分之多少肴熏。

如果用百分比寫 padding，那么指的是父元素 width 的百分之多少顷窒，無論是水平的 padding 還是豎直的 padding蛙吏。

如果用百分比寫 margin，那么指的是父元素 width 的百分之多少，無論是水平的 margin 還是豎直的 margin鸦做。

不能用百分比寫 border 的寬度

14.幾種常見的布局

兩列自適應(yīng)

BFC

flex布局：

.parent{

? ? display: flex;

}

.left{

? ? background-color: pink;

? ? height: 100px;

? ? width: 50px;

}

.right{

? ? flex:1;

? ? background-color: black;

}

三欄布局（中間自適應(yīng)寬度，兩邊固定寬度）

圣杯布局

<divid="container">

<divid="center"class="column"></div>

<divid="left"class="column"></div>

<divid="right"class="column"></div>

</div>

body{min-width:550px;}

#container{padding-left:200px;padding-right:150px;}

#container .column{float:left;}

#center{width:100%;}

#left{width:200px;margin-left:-100%;position:relative;right:-200px;}

#right{width:150px;margin-right:-150px;}

先寫中間列部分，實(shí)現(xiàn)中間列優(yōu)先加載

雙飛翼布局

<divid="container"class="column">

<divid="center"></div>

</div>

<divid="left"class="column"></div>

<divid="right"class="column"></div>

body{min-width:500px;}

#container{width:100%;}.

column{float:left;}

#center{margin-left:200px;margin-right:150px;}

#left{width:200px;margin-left:-100%;}

#right{width:150px;margin-left:-150px;}

7.說一說移動(dòng)端的布局flexible绪商。知道原理嗎咪奖，怎么自己去實(shí)現(xiàn)一個(gè)flexible。 rem布局的實(shí)現(xiàn)原理治筒。移動(dòng)端的點(diǎn)透是什么却音，有沒有了解

8.有沒有遇到過這樣的問題： 一個(gè)有border的div，里面有一個(gè)圖片矢炼，發(fā)現(xiàn)圖片和下面的border有一定的空隙（baseline）系瓢。

9.移動(dòng)端如何真機(jī)調(diào)試·????????????????????????????????

16.頁面中一個(gè)video，可能格式不支持句灌，那么前端如何判斷并給出提示夷陋？

通過比較img的onerror是一種方法， 通過服務(wù)器端也可以保存一些屬性來標(biāo)識(shí)哪些瀏覽器支持胰锌，哪些不支持

前端的表單中如何設(shè)置表單的方式骗绕，如multipart, www等，對(duì)于multipart具體是如何區(qū)分其中的不同的格式的

17.css3動(dòng)畫相關(guān)

18.?css 三列布局

CSS選擇符

通配符選擇符 *

類選擇符 .

包含選擇符? ?p strong

子選擇符 body>strong

相鄰選擇符 p+strong

屬性選擇符

ID選擇器 #

偽類與偽對(duì)象??

選擇符:偽類? a:link? a:visited a:hover a:active

偽對(duì)象：p:before? p:after

css權(quán)重：

资昧！important

html中的css樣式屬性? 在html中的樣式

作者編輯的css文件樣式屬性? css文件

用戶設(shè)置的樣式? 瀏覽器網(wǎng)頁的用戶設(shè)置的樣式

瀏覽器默認(rèn)的樣式

同一級(jí)：

style屬性1000?

ID選擇符100

類酬土、屬性選擇符 10

標(biāo)簽選擇符、偽類及偽對(duì)象 1

css引入頁面方式

標(biāo)簽元素添加屬性style中：行間樣式

將樣式寫在<style>標(biāo)簽之內(nèi)格带，通常稱為內(nèi)嵌樣式表

通過link方式撤缴，外聯(lián)樣式表

通過@important關(guān)鍵字導(dǎo)入外部css樣式文件，通常稱為導(dǎo)入樣式表

6.輪播圖叽唱，如果還要優(yōu)化屈呕，你會(huì)怎么去優(yōu)化。

3. 深入理解css盒模型

（1）基本概念：盒模型的組成由里到外content-padding-border-margin

（2）盒模型有兩種標(biāo)準(zhǔn)：標(biāo)準(zhǔn)模型棺亭、IE模型（怪異盒模型）

標(biāo)準(zhǔn)模型下盒模型的寬高只是內(nèi)容的寬高虎眨，IE模型中盒模型的寬高是內(nèi)容+填充+邊框的總寬高

（3）Css如何設(shè)置兩種模型：

標(biāo)準(zhǔn)模型

box-sizing:content-box;

IE模型

box-sizing:border-box;

（4）JS獲取寬高

dom.style.width/height

這種方式只能取到dom元素內(nèi)聯(lián)樣式所設(shè)置的寬高，取不到內(nèi)部樣式和外聯(lián)樣式所設(shè)置的dom的寬高镶摘。

dom.currentStyle.width/height

這種方式可以獲取內(nèi)聯(lián)樣式嗽桩、內(nèi)部樣式和外聯(lián)樣式所設(shè)置的dom的寬高，但這種方式只有IE瀏覽器支持凄敢。

window.getComputedStyle(dom).width/height

這種方式的原理和2是一樣的碌冶，這個(gè)可以兼容更多的瀏覽器，通用性好一些贡未。

dom.getBoundingClientRect().width/height

這種方式是根據(jù)元素在視窗中的絕對(duì)位置來獲取寬高的

*dom.offsetWidth/offsetHeight

最常用的方式种樱，兼容最好

4.每個(gè)html文件里開頭都有個(gè)很重要的東西蒙袍，Doctype，聲明位于文檔中的最前面的位置嫩挤，處于標(biāo)簽之前害幅。此標(biāo)簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范（重點(diǎn)：告訴瀏覽器按照何種規(guī)范解析頁面）

5.P91頁

7.三列布局

8.實(shí)現(xiàn)梯形

var c=document.getElementById("myCanvas5");

var context=c.getContext("2d");

context.fillStyle="red";

context.beginPath();

context.moveTo(0,0);

context.lineTo(200,0);

context.lineTo(150,100);

context.lineTo(50,100);

context.fill();

偽類與偽元素的區(qū)別

偽類，更多的定義的是狀態(tài)岂昭。常見的偽類有 :hover以现，:active，:focus约啊，:visited邑遏，:link，:not恰矩，:first-child记盒，:last-child等等。

.a鏈接偽類

a:link//未訪問鏈接

a:visited//已訪問鏈接

a:hover//鼠標(biāo)移動(dòng)到鏈接上

a:active//選定的鏈接

表單的校驗(yàn)中外傅，常會(huì)用到?:required纪吮、:valid?和?:invalid?這三個(gè)偽類

:required，指定具有 required屬性 的表單元素

:valid萎胰，指定一個(gè) 匹配指定要求 的表單元素

:invalid碾盟，指定一個(gè) 不匹配指定要求 的表單元素

:nth-of-type(n) 除了關(guān)注n之外，還需要關(guān)注最前面的類型技竟，也就是標(biāo)簽冰肴。

:nth-child(n) 它關(guān)注的是：其父元素下的第n個(gè)孩子，與類型無關(guān)榔组。

偽元素熙尉，不存在于DOM樹中的虛擬元素，它們可以像正常的html元素一樣定義css瓷患，但無法使用JavaScript獲取骡尽。常見偽元素有?

::after 已選中元素的最后一個(gè)子元素

::before 已選中元素的第一個(gè)子元素

::first-letter 選中某個(gè)款級(jí)元素的第一行的第一個(gè)字母

::first-line 匹配某個(gè)塊級(jí)元素的第一行

::selection 匹配用戶劃詞時(shí)的高亮部分

CSS3明確規(guī)定了，偽類用一個(gè)冒號(hào)(:)來表示擅编，而偽元素則用兩個(gè)冒號(hào)(::)來表示。

可以布局的方式

position箫踩、float爱态、overflow、visibility

非嚴(yán)格模式

盒模型的寬高

可以設(shè)置行內(nèi)元素的高寬

可設(shè)置百分比的高度

使用margin：0 auto設(shè)置水平居中在IE會(huì)失效境钟，可以使用text-align:center;

設(shè)置圖片的padding會(huì)失效

table字體的屬性不能繼承上層的設(shè)置

white-space:pre會(huì)失效

塊級(jí)元素锦担、行內(nèi)元素、行內(nèi)塊級(jí)元素區(qū)別

塊級(jí)元素：

總是另起一行（特立獨(dú)行）

可以設(shè)置其寬度慨削、高度洞渔，內(nèi)外邊距

在不手動(dòng)設(shè)置寬度的情況下套媚，寬度默認(rèn)為所在容器的100%（即容器寬度）

可以容納行內(nèi)元素和其他塊元素

行內(nèi)元素：

總是和相鄰的行內(nèi)元素在同一行上

設(shè)置寬高無效，水平方向的padding和margin屬性可以設(shè)置磁椒，但是垂直方向上的無效堤瘤。

默認(rèn)寬度是他自身內(nèi)容的寬度。

行內(nèi)元素只能容納其他行內(nèi)元素或者文本浆熔。

行內(nèi)塊級(jí)元素

和相鄰行內(nèi)元素在同一行本辐，但是之間會(huì)有空白縫隙。

默認(rèn)寬度是他本身內(nèi)容的寬度医增。

寬度慎皱、高度、行高叶骨、外邊距以及內(nèi)邊距都可以手動(dòng)設(shè)置茫多。