上下的垂直外邊距margin在同時(shí)存在時(shí)會發(fā)生外邊距折疊。
這意味著當(dāng)一個(gè)元素的下邊緣接觸到另一個(gè)元素的上邊緣時(shí)侈净，只會保留兩個(gè)margin值中較大的那個(gè);
.top {
width: 100px;
margin-bottom:40px;
}
.bottom {
width: 100px;
margin-top:20px;
}
-----------------------------------
<div class="top">上</div>
<div class="bottom">下</div>
塊級元素只使用一個(gè)方向的margin
css命名為何不推薦使用下劃線_
- 用下劃線命名也是一種_hack膜赃，如使用"style"這樣的命名,可以讓IE外的大部分瀏覽器忽略這個(gè)樣式的定義,所以使用""作為命名時(shí)的分隔符號是不規(guī)范的,在做css檢查時(shí)會出現(xiàn)錯(cuò)誤提示,因此避免使用下劃線命名
document.getElementById("a").className="try-b";;
分別用了“~”险胰、“$”捌臊、“`”豁鲤、“&”和“－”去代替或链，結(jié)果只有“－”號是可以使用的惫恼，而且對JS的支持也正常 - 在CSS定義里，經(jīng)常會用到ID選擇符澳盐，如果在頁面中的ID命名中使用了“”祈纯，就免不了在CSS樣式里出現(xiàn)下劃線“”了令宿，所以在此還得注意在ID的命名上也要避免使用下劃線。
CSS屬性的值都是從DOM樹中向上一級的元素繼承的盆繁，因此才被命名為級聯(lián)樣式表,CSS中并不是所有的屬性都是可繼承的;
使用text-transform轉(zhuǎn)換字母為大寫
大搜車的面試筆試題見過
- 無繼承性的屬性
- display: 規(guī)定元素應(yīng)該生成的框的類型;
- 文本屬性:
vertical-align,text-decoration,text-shadow,white-space,unicode-bidi:設(shè)置文本的方向 - 盒子模型的屬性:
width掀淘、height、margin油昂、margin-top革娄、margin-right、margin-bottom冕碟、margin-left拦惋、border、border-style安寺、border-top-style厕妖、border-right-style、border-bottom-style挑庶、border-left-style言秸、border-width、border-top-width迎捺、border-right-right举畸、border-bottom-width、border-left-width凳枝、border-color抄沮、border-top-color、border-right-color岖瑰、border-bottom-color叛买、border-left-color、border-top蹋订、border-right率挣、border-bottom、border-left露戒、padding难礼、padding-top、padding-right玫锋、padding-bottom、padding-left
4讼呢、 背景屬性:
background撩鹿、background-color、background-image悦屏、background-repeat节沦、background-position键思、background-attachment
5、 定位屬性: float甫贯、clear吼鳞、position、top叫搁、right赔桌、bottom、left渴逻、min-width疾党、min-height、max-width惨奕、max-height雪位、overflow、clip梨撞、z-index
6雹洗、生成內(nèi)容屬性：content、counter-reset卧波、counter-increment
7时肿、輪廓樣式屬性：outline-style、outline-width幽勒、outline-color嗜侮、outline
8、頁面樣式屬性：size啥容、page-break-before锈颗、page-break-after
9、聲音樣式屬性：pause-before咪惠、pause-after击吱、pause、cue-before遥昧、cue-after覆醇、cue、play-during
- 有繼承性的屬性
- 字體系列屬性
font,font-family,font-weight,font-size,font-style,font-variant,font-stretech,
font-size-adjust - 文本系列屬性
text-indent,text-align,line-height,word-spacing,word-spacing,letter-spacing,text-transform,direction,color - 元素可見性
visibility - 表格布局屬性
caption-side炭臭、border-collapse永脓、border-spacing、empty-cells鞋仍、table-layout
5常摧、列表布局屬性：list-style-type、list-style-image、list-style-position落午、list-style
6谎懦、生成內(nèi)容屬性：quotes
7、光標(biāo)屬性：cursor
8溃斋、頁面樣式屬性：page界拦、page-break-inside、windows梗劫、orphans
9享甸、聲音樣式屬性：speak、speak-punctuation在跳、speak-numeral枪萄、speak-header、speech-rate猫妙、volume瓷翻、voice-family、pitch割坠、pitch-range齐帚、stress、richness彼哼、对妄、azimuth、elevation
- 所有元素可以繼承的屬性
1敢朱、元素可見性：visibility
2剪菱、光標(biāo)屬性：cursor - 內(nèi)聯(lián)元素可以繼承的屬性
1、字體系列屬性
2拴签、除text-indent孝常、text-align之外的文本系列屬性 - 塊級元素可以繼承的屬性
1、text-indent蚓哩、text-align
用transform()函數(shù)來創(chuàng)建元素的位移或大小動畫
transform發(fā)生在Composite Layer這一步构灸，它所引起的paint也只是發(fā)生在單獨(dú)的GraphicsLayer中，并不會引起整個(gè)頁面的回流重繪岸梨。(有興趣可以看看瀏覽器的渲染過程)
選擇器的盡量低權(quán)重, 行內(nèi)的權(quán)重最重喜颁，內(nèi)部的權(quán)重次之，寫在外部css文件里面的樣式權(quán)重最低
- ID (#id) > Class (.class) > Type (例如 header)>行內(nèi),權(quán)重也會疊加曹阔，于是a#button.active的權(quán)重要比a#button的高半开。一開始就使用高權(quán)重的選擇器會導(dǎo)致你在后面的維護(hù)中不斷的使用更高權(quán)重的選擇器，最終選擇使用!important
- 盡量不要使用!important ,導(dǎo)致大量的重寫赃份，唯一使用的!important的地方是當(dāng)您想要覆蓋HTML中的內(nèi)聯(lián)樣式,當(dāng)然也盡量避免內(nèi)聯(lián)樣式;
使用AutoPrefixer達(dá)到更好的兼容性,適配更多的瀏覽器廠商
驗(yàn)證就像壓縮和Autoprefixer一樣稿茉，有免費(fèi)的工具可以利用：
在線工具：W3 Validator, CSS Lint
文本編輯器插件：Sublime Text, Atom
代碼庫：stylelint (Node.js, PostCSS), css-validator (Node.js)
css3新特性總結(jié)
- 圓角邊框
border-radius: 5px;
- 多背景圖
background: url(1.png) right bottom no-repeat, url(2.gif) left top repeat;
- 顏色識別透明度
background: rgba(0,0,0,.6)
- 列布局和彈性盒模型
display: grid;
display: flex;
- 盒子的變換(2d,3d)
transform: translate(50px,100px);//移動
transform: rotate();//旋轉(zhuǎn)
transform: scale();//縮放
transform: skew();//傾斜
- 過渡和動畫
transition: width 1s linear 2s;
@keyframes animation{
0%{}
100%{}
}
加強(qiáng)版的過渡效果，通過animation指定動畫名和動畫參數(shù)，@keyframes定義動畫內(nèi)容漓库，根據(jù)參數(shù)自動觸發(fā)。
- web字體
@font-face - 媒體查詢
- 陰影
