div套路
一腌歉、? ? 主體：body{margin0 px瓶盛； padding 0 px}
二、? ? 塊級劃分<div></div>
三昔汉、? ? 再在塊級里面具體劃分
注意：要分清塊元素和行元素
文檔流
行級元素：內(nèi)容大小決定占據(jù)的面積大小督赤，沒有寬度和高度
塊級元素：默認占據(jù)一行嘁灯，有高度和寬度
行級元素轉塊級元素 display:block
反之：display:inline;
行內(nèi)元素和塊級元素
2013-01-05 11:40 by greenal, 41601 閱讀, 2 評論, 收藏, 編輯
1 塊級元素：div? , p? , form,? ul,? li ,? ol, dl,? ? form,? address,? fieldset,? hr, menu,? table
? 行內(nèi)元素：span,? strong,? em,? br,? img ,? input,? label,? select,? textarea,? cite,?
? ? ? ? ? ? ? ? ?
塊元素(block element)?
?
* address - 地址?
* blockquote - 塊引用?
* center - 舉中對齊塊?
* dir - 目錄列表?
* div - 常用塊級容易，也是css layout的主要標簽?
* dl - 定義列表?
* fieldset - form控制組?
* form - 交互表單?
* h1 - 大標題?
* h2 - 副標題?
* h3 - 3級標題?
* h4 - 4級標題?
* h5 - 5級標題?
* h6 - 6級標題?
* hr - 水平分隔線?
* isindex - input prompt?
* menu - 菜單列表?
* noframes - frames可選內(nèi)容躲舌，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容?
* noscript - 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）?
* ol - 排序表單?
* p - 段落?
* pre - 格式化文本?
* table - 表格?
* ul - 非排序列表?
內(nèi)聯(lián)元素(inline element)?
* a - 錨點?
* abbr - 縮寫?
* acronym - 首字?
* b - 粗體(不推薦)?
* bdo - bidi override?
* big - 大字體?
* br - 換行?
* cite - 引用?
* code - 計算機代碼(在引用源碼的時候需要)?
* dfn - 定義字段?
* em - 強調(diào)?
* font - 字體設定(不推薦)?
* i - 斜體?
* img - 圖片?
* input - 輸入框?
* kbd - 定義鍵盤文本?
* label - 表格標簽?
* q - 短引用?
* s - 中劃線(不推薦)?
* samp - 定義范例計算機代碼?
* select - 項目選擇?
* small - 小字體文本?
* span - 常用內(nèi)聯(lián)容器丑婿，定義文本內(nèi)區(qū)塊?
* strike - 中劃線?
* strong - 粗體強調(diào)?
* sub - 下標?
* sup - 上標?
* textarea - 多行文本輸入框?
* tt - 電傳文本?
* u - 下劃線?
* var - 定義變量?
?
可變元素?
?
可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。?
* applet - java applet?
* button - 按鈕?
* del - 刪除文本?
* iframe - inline frame?
* ins - 插入的文本?
* map - 圖片區(qū)塊(map)?
* object - object對象?
* script - 客戶端腳本?
2? 區(qū)別：
? 1）塊級元素會獨占一行没卸，其寬度自動填滿其父元素寬度
? ? ? ? 行內(nèi)元素不會獨占一行羹奉，相鄰的行內(nèi)元素會排列在同一行里，知道一行排不下约计，才會換行尘奏，其寬度隨元素的內(nèi)容? ? ? ? 而變化
? 2） 塊級元素可以設置 width, height屬性，行內(nèi)元素設置width,? height無效
? ? ? ? 【注意：塊級元素即使設置了寬度病蛉，仍然是獨占一行的】
? 3) 塊級元素可以設置margin 和 padding.? 行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果炫加，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產(chǎn)生邊距效果。（水平方向有效铺然，豎直方向無效）
一.選擇器
優(yōu)先級（id行內(nèi)樣式>class頁內(nèi)樣式>外部樣式）
權重（#pdav? p有權重優(yōu)先俗孝，否則離標簽最近就哪個）
1、標簽選擇器(優(yōu)先級最低)
選擇器的名字和標簽的名字一致魄健，樣式會作用于所有同名標簽
body{
? ? ? background: url(../image/5.jpg);
}
2赋铝、類選擇器(優(yōu)先級次之)
.選擇器名字
<divclass="title"><img src="image/bg_bang.gif"alt="title" /></div>
在html標簽中使用class引用類選擇名
3、id選擇器(優(yōu)先級最高)
#選擇器名字（一般用#hd? .choose）
在html標簽中使用id引用id選擇名
#hd{
? ? ? font: 14px "MicrosoftYaHei","宋體","Arial";
? ? color: #797979;
? ? min-width: 1200px;
? ? height: 50px;
? ? background-color:#f4f4f4;
}
二沽瘦、css樣式寫的位置
1革骨、行內(nèi)樣式
標簽的style屬性
2、頁內(nèi)樣式
<style></style>之間
3析恋、外部樣式
獨立的后綴名為css的文件中
在html中使用<link href=”css樣式文件的位置”>
三良哲、常用樣式
1、字體（font顏色助隧，字體筑凫，粗細，大小….）
2、文本（text-decoration）
3巍实、背景（background）
4滓技、列表
四、? ? ? CSS列表中ul和div（行級元素和塊元素轉化）
1.? ? Ul和div一樣是塊級元素無需放到div中
2.? ? 塊級元素
特點：1.每個塊級元素都是獨自占一行棚潦，其后的元素也只能另起一行令漂，并不能兩個元素共用一行。
2.元素的高度丸边、寬度洗显、行高和頂?shù)走吘喽际强梢栽O置的≡罚
3.元素的寬度如果不設置的話挠唆，默認為父元素的寬度。
常見的塊級元素：<div>嘱吗、<p>玄组、<h1>...<h6>、<ol>谒麦、<ul>俄讹、<dl>、<table>绕德、<address>患膛、<blockquote> 、<form>
3.? ? 行級元素
特點：1.可以和其他元素處于一行耻蛇，不用必須另起一行踪蹬。
2.元素的高度、寬度及頂部和底部邊距不可設置臣咖。
3.元素的寬度就是它包含的文字跃捣、圖片的寬度，不可改變夺蛇。
4.? ? 塊級元素和行級元素轉換
如果想將塊級元素與行級元素相互轉換疚漆，該怎么辦呢？
? ? ? ? 可以在css樣式中用display:inline將塊級元素設為行級元素
? ? ? ? 同樣刁赦，也可以用display:block將行級元素設為塊級元素
五娶聘、? ? ? 常見問題：（對齊，表格豎直變水平甚脉，垂直居中丸升，絕對定位）
1.? ? 讓ul沿著底邊對齊29（margin-top）+25（height）+1（border）
2.? ? 讓ul中列表豎直變水平：ul（float：right）li（float：left）
3.? ? 讓ul? li中文字垂直居中，就是在文字所在標簽的樣式中宦焦，設置line-height（行高）发钝，它的值就是父容器（div）的高度；
4.? ?
div
絕對定位設置div容器內(nèi)的圖片標簽準確定位
ul
li:? ? (先找父容器)
position: absolute;
left: 0px;
top:-15px;
六波闹、? ? ? 盒子模型
邊距：
? ? ? 內(nèi)邊距：padding? 內(nèi)容和邊框的距離
? ? ? 外邊距：margin? 邊框與周邊元素的距離
邊距的設置：上右下左
邊框：border屬性：粗細酝豪，樣式，顏色
盒子模型大小的計算：內(nèi)容大小+內(nèi)邊距+外邊距+邊框
定位：
1精堕、 浮動
float:左浮動孵淘，右浮動
跳出文檔流，和父元素的邊框對齊歹篓。其余的元素上移瘫证，占據(jù)空白區(qū)域
如果要消除之前元素的浮動效果，另起一行：clear:left庄撮，right背捌，both
2、 position
static默認洞斯，按照文檔流的形式進行定位
relative:相對于static的位置進行偏移毡庆，left<0向左偏移
absolute：跳出文檔流布局，按照具體的坐標烙如，來定位它在父元素中的位置
fixed：和父元素么抗，保持一個固定的邊距
平鋪（圖片，表格亚铁，或表單）：
background-repeat : repeat | no-repeat | repeat-x | repeat-y?
repeat : 背景圖像在縱向和橫向上平鋪
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
