8.30前端笔记

一.元素默认显示模式与元素特性总结

         1.块级标签
           本身属性为display:block;的元素 称为块级元素
            div  p  h1-h6 ul li ol dl dt dd

        2.行级（行内）标签
           本身属性为display:inline;的元素 称为行级元素
            a span b strong em i sup sub del
        
        3.行内块标签
           本身属性为display:inline-block;的元素 称为行内块元素
            img input

二.块级标签总结

        1.块级标签
           本身属性为display:block;的元素 称为块级元素
           div p h1-h6 ul li ol dl dt dd

        2.特性
            1.宽度在没有设置的情况下，默认撑满整个父元素
            2.高度在没有设置的情况下，由内容撑开
            3.垂直布局，独立成行
            4.具有盒模型特征（宽高、padding、border、margin）;也就是说这四个属性都能设置

三.行内（行级）元素特性总结

        1.行内（行级）标签
             本身属性为display:inline;的元素 称为行级元素
             a span b strong em i sup sub del
        2.特性
          1.宽高由内容撑开
          2.水平布局，一行放不下会自动折行
          3.换行和空格会被解析
          4.具有部分盒模型特征（不可以设置宽高，可以设置padding，不能设置上下外间距，可以设置左右外间距）
          5.行级标签不能嵌套块级标签和行内块标签
          6.可以嵌套行级标签

四.行内块元素特性总结

        1.行内块标签
          本身属性为display：inline-block;的元素 称为行内块元素
          img input
        2.特性
          1.可以设置宽高
          2.水平布局，一行放不下会自动折行
          3.换行和空格会被解析
          4.具有盒模型特征（宽高、padding、border、margin);也就是说这四个属性都能设置

五. 标签转换

        1.元素类型转换
          特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。

          display:inline;转换为行内元素。【不常用】

          display:block;转换为块状元素。【常用】

          display：inline-block;转换为行内块元素 。【比较常用】

六.css显示隐藏

            显示 display: block; 
            隐藏 display: none;
             元素隐藏之后消失了，原来的位置也没了 
             
            显示 visibility: visible;
            隐藏 visibility: hidden;
             元素隐藏之后，原来的位置还在 

七.vertical-align属性
              常用的值：
               vertical-align:baseline;默认值，基线对齐 英文字母x的下端
               vertical-align:top; 顶端对齐
               vertical-align:bottom; 底端对齐
               vertical-align:middle; 中部对齐

                 图片与图片垂直方向的对齐
                 图片与文字垂直方向的对齐
                 图片与文本框垂直方向的对齐 input

八.图片下间隙问题

              1.给父元素设置高度 高度为图片的高度
                height: 314px;

              2.给父元素设置line-height：0；或者font-size：0； 不推荐 
              font-size: 0;
              line-height: 0;
        .wrap img{
             3.给图片元素设置vertical-align：top bottom middle 
             vertical-align: middle;
             vertical-align: top;
             vertical-align: bottom; 
             4.给图片元素转块级标签
              display: block;

九.继承性

            概念：父元素向后代元素传递属性的机制

            表现：后代元素会继承父元素的属性

            掌握：
                一般text，line,font,color,开头的基本都能继承
                a标签的字体颜色不能继承父元素的字体颜色color（a标签设置字体颜色需要给自己设置）
                h标签，strong，b标签不能继承父元素的font-weight
                em i标签不能继承父元素的font-style

十.css优先级

        1.选择器优先级与权值相关，权值越大，优先级越高，会优先显示谁的样式
        2.基础选择器的权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
        3.行间样式权值为（1000），优于id选择器
        4.终极boss 最牛一个 !important优于行间样式，写在属性值后面
        5.权值相同，后写的会覆盖先写的内容
        6.复合选择器的权值是所有单一选择器权值的累加
        7.继承样式的优先级为0，子元素设置样式会覆盖继承样式

十一.样式引入方式优先级

        行间
        内部
        外链

        行间样式优于内部和外部样式，但是高不过!important
        内部样式和外部样式就近原则