5)

补充:

      Margin : margin : 0  auto ;             会解决元素的居中,前提得给这个元素设置宽

CSS层叠的问题:

       1. 继承性:父级元素子级继承了

       2. 层叠性:选择器的一种选择能力( 权重决定 )

                           1.选不中,走继承性( font  color  text )继承性权重为0——有多个父级设置了这个样式,走就近原则

                           2.选中:权重的问题,权重大就选谁的样式

                                         权重相同,谁在后面选择谁

                                         纯标签和类没有可比性,纯类跟id也没有可比性

标准文档流:

       浏览器的排版是根据元素的特征( 块和行级 )从上往下,从左往右排版,这就是标准文档流

浮动——

float :left / right ;

效果:元素都加了浮动,后面元素会紧跟这前面元素并排排列

*只要加了float,这个元素就会脱离标准文档流了

    块级+float: 

                  第一个加了float,脱离了标准文档离,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就把它排第一位,而第一个依然存在,所以就叠加了 

      行级+float:

                  行级元素加了float,脱离了标准文档流,块不像块,行不像行,就能设置宽高了,能并排排列了,display没有任何意义了。

*浮动的元素会紧紧贴靠在一起

*浮动的元素会文字环绕

拓展——

        使元素脱离标准文档流的方法:

                     1.浮动float

                     2.绝对定位   position:absolute ;

                     3.固定定位   position :fixed;

        活动带来的坏处:

                     1.给元素加了浮动,撑不起父级高度了

清除浮动:

        1.给浮动的父元素添加高度

        2.给父级添加overflow:hidden;

        3.给浮动元素后面添加一个空的div,添加样式为clear:both

                    < ul >

                           < li > < / li >

                           < div   style = “clear:both ;” >< / div >

                   < / ul >

         4.给浮动元素的父级添加一个叫类clearfix

                这个类写的样式属性有——

                                            . clearfix : after {

                                                                          content : “ ” ;

                                                                          display : block ;

                                                                          clear : both ;

                                                                          height  : 0 ;

                                                                           visibility : hidden ;

                                                                         }

伪类选择器:

            只要选择器后面带 :都可以说是伪类选择器

            a: link { }    a:hover { }    a:visited{ }     a: active { }      p: after { }     p : before { }

            a:link——正常颜色        a:visited——访问过后            a:hover——鼠标悬浮             a:active——激活鼠标那一下     

             【 a的四种状态顺序不能改变 】

伪类元素和伪类选择器区别:

            伪元素有两个冒号 p ::after { }

            伪类选择器有一个冒号 p:hover{ }

备注——

       margin:0  auto;---------------------text-align:center;

        margin居中是自身                          text-align是对元素内部的文本居中的

       visibility:hidden;--------------------display:none;

       visibility隐藏之后还占空间              display隐藏后不占空间

猜你喜欢

转载自www.cnblogs.com/xiaotaiyangye/p/9647912.html
今日推荐