盒子模型:兩種
標準盒模型下盒子的大小 = content + border + padding + margin
怪異(IE)盒模型下盒子的大小=width(content + border + padding) + margin
HTML文件頭的<!DOCTYPE HTML>(Doctype文檔類型)聲明瀏覽器用標準盒子模型解析
*相鄰盒子的相鄰外邊距會重疊而不是疊加(只計算大的外邊距)
*box-sizing:border-box;指定該屬性后瀏覽器會根據(jù)設定的寬高減去內(nèi)外邊距邊框智能計算寬高钧排。content = width -?border - padding - margin
display 屬性規(guī)定元素應該生成的框的類型
塊級元素表鳍,占一行
<P>,<div,<h1>~<h6>,<ul>,<li>,<ol>,<dl>,<dt>,<dl>等
行內(nèi)元素(內(nèi)聯(lián)元素)薄坏,在一行顯示,占滿一行才會在下行顯示
<span>,<em>,<a>等
*替換元素绅这,瀏覽器根據(jù)其標簽的元素與屬性來判斷顯示的具體內(nèi)容
<img>,<input.<textarea>等
背景樣式
background-color: ; background-image: ; 包含內(nèi)邊距和邊框赔桌,不包含外邊距瓢剿;背景圖片覆蓋背景顏色
*邊框顏色默認和內(nèi)容字體顏色一樣
background-position 設置背景圖像的起始位置(根據(jù)所在容器)悍手,第一個個值水平位置帘睦,第二個值垂直位置,只寫一個第二個默認居中(可寫百分比谓苟、具體數(shù)值官脓、top协怒,right涝焙,left,bottom孕暇,center)
background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動? ? ? fixed固定? scroll滾動
background 簡寫仑撞,后面的屬性不分先后順序,用空格分隔
列表樣式
list-style-type 列表項目標記類型(圓點妖滔,正方形...)
list-style-position?列表項目標的位置隧哮;inside第二行文本縮進 |? outside第二行文本不相對項目標記縮進
list-style-image 用圖片設置列表項目標記
list-style 簡寫,后面的屬性不分先后順序座舍,用空格分隔沮翔;list-style-image覆蓋list-style-type