zoukankan      html  css  js  c++  java
  • 清除浮动的几种方式

    不常用

    1.外墙法

    在两个盒子中间添加一个额外的块级元素

    在给这个额外添加的块级元素设置: clear : both;属性

    注意点:

    外墙法可以让第二个盒子使用margin-top

    外墙法不可以第一个盒子使用margin-bottom

    2.内墙法

    外墙法可以让第二个盒子使用margin-top

    外墙法可以第一个盒子使用margin-bottom

    3.外墙法和内墙法的区别?

       外墙法不能撑起盒子的高度,而内墙法可以撑起第一个盒子的高度

    4.什么是伪元素选择器?

      给指定标签的内容前面添加一个子元素,或者给指定标签的内容的后面添加一个子元素

      给指定元素的内容的前面和后面添加内容

     1 #div1::before{
     2             content: "jfdshsfjg";
     3             width: 50px;
     4             height: 50px;
     5             background-color: grey;
     6             display:block;
     7         }
     8 #div1::after{
    /*指定添加的子元素中的存储的内容*/ 9 content: "jfdshsfjg";
    /*指定添加子元素的高度和宽度*/ 10 width: 50px; 11 height: 50px; 12 background-color: grey;
    /*指定添加的子元素的显示模式*/ 13 display:block;
    /*指定添加元素隐藏*/
    visibility:hidden; 14 }

    常用的方法:

     1 #div1::after{
     2      /*子元素的内容为空 */
     3     content: "";
    /*变成层级元素*/ 4 display: block; 5 /*!* 高度为0*!*/ 6 height: 0; 7 /* !*设置为隐藏*!*/ 8 visibility: hidden; 9 /*!*左右都没有浮动*!*/ 10 clear: both; 11 12 }

    overflow:hidden作用:

    超出标签范围内的文字去掉

    清除浮动

    注意:浏览器兼容,上面的清除方式,在谷歌浏览器里可以,但是在ie浏览器里不可以,所以需要加入 

    *zoom: 1;
    #div1{
        background-color: grey;
        overflow: hidden;
        margin-bottom: 10px;
        *zoom: 1;
    }
  • 相关阅读:
    寒假学习进度8
    寒假学习进度7
    寒假学习进度6
    寒假学习进度5
    寒假学习进度4
    寒假学习进度3
    寒假自学进度13
    Python引用某一文件的方法出现红色波浪线
    寒假自学进度11
    正则表达式(学习)
  • 原文地址:https://www.cnblogs.com/xingxuexue/p/7572086.html
Copyright © 2011-2022 走看看