塊標簽

h div p ul li ol dl dt dd

獨占一行
支持寬高
不受換行和空格的影響
不給寬度時 寬度參照父級

行內

a span i em strong b

合并到一行
不支持寬高
受換行和空格的影響
寬高由內容撐開

行內塊

img input

合并到一行
支持寬高
受換行和空格的影響

css樣式

width 寬

height 高

color 顏色

      英文    pink
十六進制    #000000
rgb     rgb（0-255,0-255,0-255）

background 背景

    image   圖片
    color   顏色
    repeat  重復
        no-repeat   不重復
        repeat-x    x軸重復
        repeat-y    y軸重復

position 定位

        left    right   top bottom  center
            數(shù)字  （x y）
        當給一個值的時候 第二個值默認居中

背景圖簡寫

background:url() no-repeat left pink;

行高

    line-height
        當行高等于高度時 文本垂直居中

水平對齊方式

    text-align
        center
        left
        right

border

    width   style   color
                solid   實線
                dashed  虛線
                dotted  點劃線

偽類

link    未訪問
visited 訪問過后
hover   鼠標放上去的時候
active  點擊的時候
    順序  lvha

text-decoration

            none    去除下劃線
            underline   下劃線
            line-through    中劃線
            overline    上劃線

font 字體

    size    大小
    weight  加粗
            bold    加粗
            normal  不加粗
    style   傾斜
            italic  傾斜
            normal  不傾斜
    family  字體
            英文
            中文
            unicode
    font：style  weight size/line-height family
    text-indent     首行縮進
            px
            em      最好小于七位數(shù)

xHtml規(guī)范

    必須有文檔頭
    img必須有alt
    雙標簽必須閉合
    單標簽必須合理閉合
    標點符號必須用英文 引號必須用雙引號
    標簽名和屬性名必須小寫

轉化

display:block   把當前元素轉化成塊元素
        inline                  行內
        inline-block            行內塊

嵌套規(guī)則

塊標簽可以包所有
p只能包行內 不能包塊
行內只能包行內 不能包自己 也不能包塊
a能包所有 但是不能包自己
img能被所有包
行內元素即使轉化成塊 也不能包塊

繼承

只有和文字相關的樣式 才能繼承
i em 不能繼承斜體
b strong h  不能繼承加粗
a不能繼承顏色

選擇器

標簽選擇器
    div{}
id選擇器
    #div{}
類選擇器
    .div{}
群組選擇器
    div,p,span{}
嵌套選擇器
    div p span{}
通配符
    *{}

權重/優(yōu)先級

行間樣式>id>class>標簽>*

省略號

white-space：nowrap
overflow：hidden
text-overflow：ellipsis
font-family：'微軟雅黑'
給寬度

margin 外邊距/外補白

top     right   bottom  left
    給一個值        上 右 下 左
        二           上下   左右
        三           上  左右  下
        四           上 右 下 左
margin拖拽
    overflow：hidden；
    border
    padding（推薦）
margin合并
    取最大值

padding 內邊距/內補白

top     right   bottom  left
    給一個值        上 右 下 左
        二           上下   左右
        三           上  左右  下
        四           上 右 下 左
padding-left/right  減寬度
padding-top/bottom  減高度
如果子級參照父級寬度 padding不用減

浮動

脫離文檔流
合并到一行
文本環(huán)繞
行內變成塊
寬度不夠掉下來
盡可能的往上飄
寬度盡可能的窄 窄到內容的寬度
浮動有方向
    left
    right
    none
同級元素最好都浮動
浮動就得清浮動

清浮動：

overflow：hidden
clear：both（加給同級的）
clearFix:after{ display:block; content:''; clear:both;}
clearFix{ zoom:1;}

position 定位

    relative    相對定位
        現(xiàn)對于自己定位
        不脫離文檔流
        不改變元素的本質
    absolute    絕對定位
        脫離文檔流
        行內變成塊
        寬度盡可能的窄 窄到內容的寬度
        相對于父級定位 父級要有定位
    fixed   固定定位
        相對于可視區(qū)域定位
        脫離文檔流
        行內變成塊
        寬度盡可能的窄

z-index 層級

數(shù)值越大 層級越高
只有定位元素才能用
z-index：2的32次方

form

action href
    method
        get 不安全
        post 相對安全

input 表單

text    文本框
password    密碼
submit      提交
radio   
    name id value
label
    for=“id”
checkbox    
    name id value
label
    for=“id”
button  按鈕
select  下拉框
    option
        value（兼容）
textarea
    文本域
outline：none    取消焦點
resize：none 取消拖拉

table

thead   表頭
    tr 
        th
tbody   表身
    tr
        td
tfoot   表尾
cellspacing="0"
cellpadding="0"
border-collapse:collapse;   合并單元格
colspan
    橫向合并
rowspan
    縱向合并