css标签属性（自用未完善）

css样式

    1.<link rel="stylesheet" href="css文件所在的位置" type="text/css">

    2.<style>

        @import url(css文件所在的位置);

      </style>

    3.内部

        <style>

           标签{属性：属性值}

        </style>

div,p,h1{}

    群组选择器：提出公共代码，节约代码量

div p{}

    后代选择器

伪类选择器

    超链接正确顺序

        a:link/visited/hover/active

            link：超链接的初始状态

            visited：超链接被访问后的状态

            hover：鼠标放到超链接上的状态

            active：鼠标点击时超链接的状态

    结构性伪类选择器

        X:first-child --匹配父元素中的第一个X元素

        X:last-child --匹配父元素中的最后一个X元素

        X:nth-child(n) --匹配索引值为n的子元素，偶数：2n/even，奇数：2n-1/2n+1/odd

        X:only-child --匹配父元素中有且只有一个子元素

        X:root-child --匹配文档的根元素

        X:empty --匹配没有任何子元素的元素X

id：唯一性

    #id值

'*'表示所有元素

选择器权重：id选择器>class>元素

层级选择器

    + --当前元素的后面第一个兄弟( .child+li{})

    ~ --当前元素的后面所有的亲兄弟( .child~li{})

属性选择器

    例：div[class] --指定属性名

    div[class=value] --指定属性名，并且指定属性值

    div[class~=value] --属性值的词列表中包含了一个value

    div[class^=value] --属性值以value开头

    div[class$=value] --属性值以value结束

    div[class*=value] --属性值包含value

 

文本属性

    font-size：字体大小 ：默认16px

    font-family：字体 ：默认微软雅黑

    color：颜色

    font-weight：加粗

        100-900

        100 细体 lighter

        400 正常 normal

        700 加粗 bold

        900 更粗 bolder

    font-style：斜体

        italic 斜体字

        oblique 倾斜的文字

        normal 常规显示

    text-align: center 水平对齐

    text-align: justify 多行文本多行对齐

    background-color：背景颜色

    width/height：宽高

    line-height=height，行高,实现单行文本垂直居中

    letter-spacing：字符间距

    word-spacing：词间距

    text-indent: 2em 首行缩进2个字符

    text-decoration：文本修饰线

        none 没有

        underline 下划线

        overline 上划线

        liner-throug 删除线

       

    text-transform：大小写

        capitalize 首字母大写

        lowercase 所有字母小写

        uppercase 所有字母大写

        none 没有

   

    font：斜体 加粗 字体大小/行高 字体

        顺序不能改变，必须指定字体大小和字体

列表属性

    list-style-type：

        disc 实心圆

        circle 空心圆

        square 实心正方形

        none 没有

   

    list-style-image：图片设置为列表符号样式

    list-style-position：

        outside 默认在外面

        inside 在里面

    bolder：边框

背景属性

    width/height：宽高

    background-color：背景颜色

    background-image

    background-repeat

        repeat 默认平铺

        repeat-x x轴平铺

        repeat-y y轴平铺

        no-repeat 不平铺

    background-position

        1.10px 10px

        2.10% 10%

        3.left/center/right  top/center/bottom

        将多张图片合为一张整图，用background-position实现背景图片的定位技术--图片的左上角为(0px，0px)，设置负值进行调整

    background-size

        1.400px 400px

        2.100% 100%

        3.cover

        4.contain

   

    background-attachment: fixed  固定在浏览器窗口里面，固定之后相对于浏览器窗口

浮动属性

    float: left/right

    清浮动

        1.写死高度

        2.清浮动 clear：none；left/right/both

        3.当前浮动元素后面补一个盒子，不设置宽高，clear：both

        4.overflow:hidden,让浮动元素计算高度

盒子模型

    padding:内边距(不支持负值)

        10px(4个方向一样)

        10px 20px(上下 左右)

        10px 20px 30px (上 左右 下)

        10px 20px 30px 40px(上 右 下 左)

    padding-方向；可以设置单个方向

    bolder：边框

        bolder:10px solid red (粗细 样式 颜色)

        样式：solid/double/dashed/dotted

    bolder-方向；可以设置单个方向

    margin：外边距(支持负值)

        10px(4个方向一样)

        10px 20px(上下 左右)

        10px 20px 30px (上 左右 下)

        10px 20px 30px 40px(上 右 下 左)

    margin-方向；可以设置单个方向

    margin：0 auto(横向居中)

   

    特性

        兄弟关系

            垂直方向；取最大值

            水平方向；两值的和

        父子关系

            父的padding-方向，注意计算高度

            给父设置边框

            加浮动

            overflow:hidden

溢出属性

    overflow:

        visible：默认，溢出内容会显示在元素之外

        hidden：溢出内容隐藏

        scroll：滚动，溢出内容以滚动方式显示

        auto：如果有溢出会添加滚动条，没有溢出正常显示

        inherit：规定应该遵从父元素继承的overflow属性的值

        overflow-x：X轴溢出；overflow-y：Y轴溢出

   

    white-space:

        nowrap:不换行

        pre:显示空格，回车，不换行(预格式化文本)

        pre-wrap:显示空格，回车，换行

        pre-line:显示回车，不显示空格，换行

    溢出省略

        width:宽度

        white-space:nowrap

        overflow:hidden

        text-overflow:ellipsis

元素显示类型

    块元素

        display: block

        display: list-item

        可以设置宽高，独占一行

    p标签放文本可以，不能放块级元素

    行内元素

        display:inline

        不能设置宽高，可以存在同一行

        只能设置边距的左右，不能设置上下边距

    行内块元素

        display:inline-block

        可以设置宽高，可以存在同一行

    display:none 隐藏

position--定位

    static(默认值)

    absolite(绝对定位)

        没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏

        有父元素且父元素有定位，参照物是父元素

    relative(相对定位)

        参照物是自己的初始位置

    fixed(固定定位)

        浏览器的当前窗口

    sticky(粘性定位)

        可以做吸顶效果

z-index值越大，层级越大，越靠上显示

半透明图片属性

    opacity：0-1

透明

    rgba(0，0，0，0)

    transparent

行内元素变块元素

    1.display

    2.position：absolite

    3.float:left

float:半脱离，文字围绕

absolite：全脱离，不会出现文字围绕

锚点作用：页面不同区域的跳转，使用a链接

    <a href="#锚点名字"></a>

    <div id="锚点名字"></div>

宽高自适应

    height:不写或者auto就是自适应

    width:不写或者auto就是自适应

    min-width 最小宽度

    max-width 最大宽度

    min-height 最小高度

    max-height 最大高度

浮动元素的高度自适应

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷

    1.给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素)

    2.在浮动元素下方添加空块元素，并给该元素添加声明(缺点：在结构里添加了空的标签，不利于代码可读性，且降低了浏览器的性能)

        clear:both;

        height:0;

        overflow:hidden;

    3.万能清除浮动法

        选择符

        ：：after{

            content: "";

            clear: both;

            display: block;

            height: 0;

            visibility: hidden;

        }

伪元素

    ::after(与content属性一起使用，定义在对象后的内容)

        如：div::after{

            content:url(logo.jpg);

        }

        div::after{

            content:"文本内容";

        }

    ::before:(与content属性一起使用，定义在对象前的内容)

        如：div::before{

            content:"在其前放内容";

        }

    ::first-letter:(定义对象内第一个字符的样式)

    ::first-line:(定义对象内第一行文本的样式)

窗口自适应

    html，body{

        height:100%；

    }

calc()函数使用

    用于动态计算长度值，运算符前后都需要保留一个空格，支持'+','-','*','/',使用标准数学运算优先级规则

    如：width:calc(100% - 10px);  

textarea--文本域

    width:

    height:

    resize:vertical(垂直)/horizontal(水平)/both/none

字段集

    fieldset

        border:

        width:

        height:

    legend

        bolder:

        text-align:

        padding: