前端基础笔记07

一、清除浮动
  
   浮动对页面的影响：
  
       如果一个父盒子中有一个子盒子，父盒子没有设置高，子盒子在父盒子中进行了
   浮动，那么将来父盒子的高度为0，下面的元素会自动补位，所以这个时候要清除浮动


一个标签




   清除浮动： 核心：clear:both;
  
    1.使用额外标签法（不推荐使用）
          
          在浮动的盒子下面再放一个标签，使用clear:both;来清除浮动




       a 内部标签：会将父盒子的高度重新撑开
    
       b 外部标签：只能将浮动盒子的影响清除，但是不会撑开盒子


    2.使用overflow清除浮动（不推荐使用）
 
      
     先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;就会清除子元素对页面的影响




    3.使用伪元素清除浮动(用的最多)
  
          伪元素：在页面上不存在的元素，但是可以通过css添加上去
        
            种类：
                  :after(在。。。之后)
                  :before(在。。。之前)
 
            注意：每个元素都有自己的伪元素
 
.clearfix:after {
    content:"";
    height:0;
    line-height:0;
    display:block;
    clear:both;
    visibility:hidden;  /*将元素隐藏起来*/ 
     在页面的clearfix元素后面添加了一个空的块级元素
     （这个元素的高为0 行高也为0  并且这个元素清除了浮动）
}
.clearfix {
  zoom:1;/*为了兼容IE6*/
}
     




二、定位：
  作用：
   解决页面盒子之间对的层叠关系
  
1   static:静态的
position:static;静态定位。
所有的标准流中的元素都是静态定位。




2   relative:相对的
position：relative：相对定位。
使用的时候还要配合：top,left,right,bottom来使用。
特点： 如果设置了相对定位并且设置了trbl属性，那么将来盒子会以盒子原本的位置发生偏移。


以.two盒子原来的位置发生偏移，在水平方向向右移动了20像素，在垂直方向也向下移动 了20个像素。
1.0相对于原来的位置进行平移。
2.0设置了相对定位的元素在页面上占据了位置（没有脱离标准流）。
3.0如果没有trbl会以标准流显示


总结：想当年。






3   absolute:绝对的
position:absolute//绝对定位
使用的时候也要配合trbl属性来使用
特点：
 1.0如果这个元素没有父元素，那么将来trbl是相对于body来定位的
 2.0如果绝对定位的元素有父元素，但是父元素没有定位，那么这个时候trbl还是相对于body来定位的。
 3.0如果绝对定位的元素有父元素，而且父元素有定位（非static），那么这个绝对定位的元素偏移是以自己的父元素为基础。
 4.0绝对定位之后的元素在页面不会占据位置（绝对定位以后的元素会脱离标准流）。
 5.0如果没有trbl会以标准流显示


总结：看脸型




        将来在写页面的时候用的最多的既不是绝对定位也不是相对定位，而是绝对定位与相对定位一起使用：（规范）子绝父相。
        子元素使用绝对定位，父元素使用相对定位。




        文字与图片默认得对齐方式是文字的基线与图片的底线对齐




        案例：
        如果小盒子在大盒子中要定位并且水平居中：
        先left: 50%，将小盒子在大盒子平移大盒子的一半，再设置margin-left：-(小盒子宽度的一半),注意一定是负数，那么将来小盒子在大盒子中就可以水平居中了。




4  fixed：固定
position:fixed。
使用的时候也要配合trbl属性来使用
特点：
1）不管页面有多大，trbl永远是相对于浏览器的边框来的。
2）固定定位的元素也脱离了标准流（不在页面上占据位置）
3）没有trbl在页面上不会显示。


总结：死心眼型。




5  z-index与定位一起使用：
作用：可以设置盒子的层级。
注意：
1.0z-index可以取所有的整数（负整数，0，正整数）
2.0z-index只能与定位一起使用。




三.补充：
1.0如果文本与图片在同一行中，那么将来文字与图片的默认对齐方式是文字的基线对齐图片的底线。
vertical-align：设置文本与图片的对齐方式：
取值：
middle:将中线对齐
vertical-align与display:inline-block一起使用效果最好。




2.0overflow:溢出
取值：
hidden：会将超出容器的部分隐藏起来
scroll：给容器加上滚动条
auto：根据具体情况判断容器是否要加上滚动条




3.0元素的隐藏：
overflow:hidden//将超出的部分裁剪掉
visibility: hidden//可以将元素隐藏，但是在页面上还保留着原来的位置。（停薪留职）
display: none;//可以将元素隐藏，并且在页面不占据位置。
diplay:none与display:block是一对反义词。


4.0 
 


 <div class="one" class="two"></div>这样写是错误的 ，只会识别第一个class






四.emmet语法：
１html:


    １.1生成结构的快捷键：
       ！+ tab,可以生成html的结构代码。




    １.2生成id名和类名
        标签名.类名#id名+tab
        没有标签名.类名+tab ==>div




    １.3生成同级元素：
        标签名+标签名+标签名 “+”tab




    １.4生成子类标签
        标签名>子标签名>子标签名>子标签名+tab
        **生成与子类标签的同级标签
        标签名>子标签名>子标签名>子标签名^^子标签名+tab


 
     １.5带固定数量的标签:
ul>li*5+tab




     １.6带有序号名称
         ul>li.abc$*3 + tab


                               ul>li*3>a[href="#"]{导航$}========》》<ul>
                                                          <li><a href="#">导航1</a></li>
                                                          <li><a href="#">导航2</a></li>
                                                          <li><a href="#">导航3</a></li>
                                                            </ul>


     １.7生成带有内容的标签：
         ul>li>a{item}*5


      １.8生成带有属性的标签
       ul>li>a[href=”#”]
     
 emmet语法-----------html（八天复习）


！+tab                   生成html5标准的结构代码


标签名.类名#id名+tab     生成对应的标签，标签中有id名和类名


标签名+标签名 +tab       将来会生成并列的两个标签


标签名>标签名+tab        大标签中有小标签


标签[属性名=“属性值”]  生成的标签会带有属性


标签{内容$}              生成的标签会带有编号内容




emmet语法-----------css


w20+tab                width:20px
h30+tab                height:30px