css单词

块标签

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
            数字  （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      最好小于七位数

xHtml规范

    必须有文档头
    img必须有alt
    双标签必须闭合
    单标签必须合理闭合
    标点符号必须用英文 引号必须用双引号
    标签名和属性名必须小写

转化

display:block   把当前元素转化成块元素
        inline                  行内
        inline-block            行内块

嵌套规则

块标签可以包所有
p只能包行内 不能包块
行内只能包行内 不能包自己 也不能包块
a能包所有 但是不能包自己
img能被所有包
行内元素即使转化成块 也不能包块

继承

只有和文字相关的样式 才能继承
i em 不能继承斜体
b strong h  不能继承加粗
a不能继承颜色

选择器

标签选择器
    div{}
id选择器
    #div{}
类选择器
    .div{}
群组选择器
    div,p,span{}
嵌套选择器
    div p span{}
通配符
    *{}

权重/优先级

行间样式>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不用减

浮动

脱离文档流
合并到一行
文本环绕
行内变成块
宽度不够掉下来
尽可能的往上飘
宽度尽可能的窄 窄到内容的宽度
浮动有方向
    left
    right
    none
同级元素最好都浮动
浮动就得清浮动

清浮动：

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

position 定位

    relative    相对定位
        现对于自己定位
        不脱离文档流
        不改变元素的本质
    absolute    绝对定位
        脱离文档流
        行内变成块
        宽度尽可能的窄 窄到内容的宽度
        相对于父级定位 父级要有定位
    fixed   固定定位
        相对于可视区域定位
        脱离文档流
        行内变成块
        宽度尽可能的窄

z-index 层级

数值越大 层级越高
只有定位元素才能用
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
    纵向合并