分組選擇器
h1,h2,p{color:green;}
嵌套選擇器
.marked p{color:white;}/*為所有 class="marked" 元素內(nèi)的 p 元素指定一個(gè)樣式。*/
p.marked{text-decoration:underline;}/*為所有 class="marked" 的 p 元素指定一個(gè)樣式*/
height,width
- height
- line-height行高
- max-height設(shè)置元素的最大高度
- max-width設(shè)置元素的最大寬度
- min-height設(shè)置元素的最小高度
- min-width設(shè)置元素的最小寬度
- width設(shè)置元素的寬度
隱藏元素 - display:none或visibility:hidden
Display - 塊和內(nèi)聯(lián)元素
- 塊級(jí)元素(block)特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開始辫秧，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)被丧、內(nèi)邊距(padding)和外邊距(margin)都可控制; - 內(nèi)聯(lián)元素(inline)特性
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)盟戏、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變晚碾，就是里面文字或圖片的大小; - 塊級(jí)元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li - 內(nèi)聯(lián)元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var - 可變元素(根據(jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素)：
applet ,button ,del ,iframe , ins ,map ,object , script - display:block -- 顯示為塊級(jí)元素
- display:inline -- 顯示為內(nèi)聯(lián)元素
- display:inline-block -- 顯示為內(nèi)聯(lián)塊元素抓半，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性
我們常將所有<li>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了格嘁。
position
- static
- relative相對定位元素的定位是相對其正常位置笛求。
h2.pos_left
{
position:relative;
left:-20px;
}
- fixed
元素的位置相對于瀏覽器窗口是固定位置。即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
tips： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed定位使元素的位置與文檔流無關(guān)不占據(jù)空間探入。Fixed定位的元素和其他元素重疊狡孔。
- absolute絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素蜂嗽，那么它的位置相對于<html>:
- sticky
- z-index指定了一個(gè)元素的堆疊順序
