---恢复内容开始---

内容回顾:

    1.高级选择器

        后代选择器

            选择的是儿子、孙子,重孙子

            div  p{}

        子代选择器

            选择的是亲儿子

            div>p

        组合选择器

            div.active{}

      属性选择器

            input[type='text']{}

        伪类选择器

            爱恨准则

                a:link{}

                a:visited{}

                a:hover{}

                a:active

            对a来设置字体颜色,一定要选中a

        伪元素选择器

                p:first-letter{}

                p:before{  content:'  '   }

                //与浮动有关系

                p:after{   content:'   '  }

         2.css的继承性和层叠行

        在css中,color、text-xxx、font-xxx、 line-xxx这些属性是可以被继承下来

        层叠性:权重==》谁的权重大就会显示谁的属性

        权重大小的对比:

            数选择器的个数:  id   class  标签

            权重比较1:

                  行内  >  id   >   class   >    标签

            权重比较2:

                  继承来的属性,权重为0,与选中的标签没有可比性

            权重比较3:

                  都是继承来的,权重都是0,就近原则

            权重比较4:

                  都是继承来的,他们权重都为0,描述的一样近,再去数权重

            权重比较5:

                  权重一样大,后面的大于前面的属性

    3.盒模型

            标准盒模型

              width:内容的宽度

              height:内容的高度

              padding:内边距  内容到边框的距离

              border:边框

              margin:外边距  一个盒子的边到另一个盒子边的距离

          计算盒模型:

                盒子的大小=width+2*padding+2*border

            如果保证盒子大小不变,那么加padding,就要减内容的width或height

    4.浮动

        浮动是实现元素并排,只要盒子浮动,就脱离标准文档流(不在文档流上占位置)

今日内容:

      1.盒模型的属性(重要)

        padding

          上下左右

          padding:10px;

          上下    左右

          padding:10px   20px;

          上     左右    下

          padding    10px   20px   30px;

          顺时针    上右下左

        border

          三要素 : 线性的宽度   线性的样式  颜色

          border  :1px   solid   red;

          border-left:1px  solid  red;

        margin

          前提必须是标准文档流下

            margin的水平不会出现任何问题

            垂直方向上  margin会出现‘塌陷问题’

        2.display 显示

          前提必须是标准文档流下

          属性:

              block 块级标签

                      独占一行

                      可以设置宽高,如果不设置宽,默认是父盒子宽度的100%

              inline行内标签

                      在一行内显示

                      不可以设置宽高,根据内容来显示宽高

              inline-block 行内块

                      在一行内显示

                      可以设置宽高

              none  不显示   隐藏     不在文档上占位置

            visibility:hidden;隐藏 在文档上占位置

      3.浮动

          float:none;

                left;左浮动  right;又浮动

         浮动:脱离了标准文档流

            作用好处:使元素实现并排(布局)

                 就在页面上占位置

            浮动带来的问题:

                  子盒子浮动,不在页面占位置,如果父盒子不设置高度,那么撑不起父盒子的高度,页面出现紊乱

            清除浮动:

                1.给父盒子设置固定高度(后期不好维护)

                2.clear:both;

                    给浮动元素的最后面,加一个空的块级标签(标准文档流的块级标签)

                    给当前这个标签设置一个clearfix类名,设置该标签属性

cleart:both

                    问题:代码冗余

                3.        .clearfix:after{

                        content:‘ 。’;       

                        display:block;

                        height:0;

                        visibility:hidden;

                        clear;both

                      }

                4.overflow:hidden;

            要浮动一起浮动,有浮动,清除浮动

 

 

---恢复内容结束---