html基本标签和样式总结

**一、HTML标签 **
块级元素
1、独立占一行
2、可以设置宽和高
3、可以嵌套行内元素、块级元素、行内块元素
4、默认显示方式display:block;
5、块级元素的上下外边距取最大值，左右累加。
6、块级元素可转成行内元素和行内块级元素
div form table h1-h6 p ul ol li dl dt dd tr
figure header footer nav aside section address
article
行内元素
1、显示在同一行
2、不可以设置宽和高
3、不能嵌套块级元素，可以嵌套行内元素和行内块元素
4、默认显示方式:display:inline
5、行内元素没有上下的内外边距，左右累加
6、行内元素可以转成块级元素和行内块元素
a span strong b em i
time
行内块元素
1、在同一行显示
2、可以设置宽和高
3、默认显示方式:display:inline-block
4、行内块元素的上下的外边距累加,左右累加
5、行内块可以转成块级元素和行内元素
img input select textarea td audio video
table
form
二、CSS
- 样式表
行内样式表
内部样式表（内嵌式样式表）
外部样式表
链接式
导入式
样式表的优先级
就近原则
选择器
基本选择器
* element .class #id element,.class,#id
层级选择器
空格
>
+
~
伪类选择器
动态伪类选择器
:link :visited :hover :active
LoVeHAte原则
结构伪类选择器
:first-child :nth-child :last-child
:first-of-type :nth-of-type :last-of-type
UI伪类选择器
:checked
:enabled
:disabled
属性选择器
[attr] [attr=value]

    伪元素（对象）选择器
        ::before  ::after ::first-line :first-letter

    选择器的优先级
        !important>行内>id>.class>element>*
    选择器的权重
                   1000  100 10     1     0

CSS属性
    文字属性
        font-size:12px 14px 16px
        font-family:微软雅黑
        font-weight:bold/normal
        font-style:normal/italic
        color
        font-face
    段落属性
        text-decoration:none/underline/overline/line-through
        text-indent:2em/20px;
        text-align:center/left/right
        line-height:20px;
        vertical-align:middle/bottom/top
        text-transform:uppercase/lowercase/capitalize
        white-space:nowrap
        letter-spacing:20px;
        word-spacing:20px;
        text-oveflow:ellipsis
        text-shadow:
    背景属性
        background-color:#000 / rgb() /rgba()/  red;
        background-image:url(),url();
        background-position:left center,left bottom;
        background-repeat:no-repeat,repeat-x;
        background-attachment:fixed/scroll;
        background-clip:border-box/padding-box/content-box;
        background-size:20px 30px;
        background-origin:border-box/padding-box/content-box;
        background-image:linear-gradient(to top,red,blue);
        background
    列表属性
        list-style-type:
        list-style-image:
        list-style-position
        list-style
    边框属性
        border-style:solid/dashed/dotted
        border-color:
        border-width:
        border-top:
        border-bottom:
        border-left:
        border-right
        border:
        border-radius:
        box-shadow:
        box-sizing:border-box/conent-box
    内边距
        padding-left
        padding-right
        padding-top
        padding-bottom
        padding
    外边距
        margin-top
        margin-bottom
        margin-left
        margin-right
        margin
    布局属性
        float:left/right/none
        clear:left/right/both       
    定位属性
        position:relative/absolute/fixed
        left
        top
        right
        bottom
        z-index
    
    溢出属性
        overflow:hidden/visible/auto
        overflow-x:
        overflow-y:
    显示属性：
        display:none/block/inline/inline-block
        visibility:hidden/visible
    动画属性：
        animation:
    变形
        transform
            2d
                translate
                skew
                scale
                rotate
                
            3d
            
        transform-origin

    过渡
        transition:
布局页面
    页面结构;
        头部
        导航
        banner
        主体
            左
            中
            右（侧边栏）
        脚步

    页面组成部分
        导航
           
         1 2 3
        栏目标题
        文章列表
        图片列表    

页面制作