• 高度自适应


    高度自适应第一种情况

    1.高度不去设置,或者高度设置auto  内容撑开父元素的高度。
    2.内容撑开父元素的高度 -> 最小高度的设置 min-height
    3.浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度,会出现高度塌陷

    解决高度塌陷的方法

    (1)给出现高度塌陷的元素添加:overflow:hidden;
    原理:overflow:hidden;触发了一个 BFC(布局逻辑)
        BFC规定:计算BFC高度时候,浮动元素也参与计算。
    弊端:隐藏掉定位在当前元素外围的内容。

    (2)在浮动元素的下方(同级)添加一个空的div,给div设置样式div{clear:both;}
    原理:添加的空div添加了clear:both;忽略上方同级添加浮动的元素留出的空间。在父元素最底下显示,撑     开父元素高度。
    弊端:形成代码的冗余(出现高度塌陷,添加一个div)

    (3)万能清除法:
    .clear_fix:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    }
    .clear_fix{
    zoom:1;
    }

    高度自适应第二种情况

    让子元素高度随着父元素高度进行改变。

    让一个元素在浏览器窗口完全铺满

     前提条件:
    body,html{
    height:100%;
    }

    clear

    clear:both; 当前元素会忽略上方添加浮动的元素 留出来的空间。
    (闭合浮动)
    clear的属性值:
          clear:left
          clear:right
          clear:both

    伪对象选择符

    1.元素选择符::after{
    content:"";
    }
    说明: 在某个元素的后面用css的形式添加内容(图片、文本)。
    2.元素选择符::before{
    content:"";
    }
    说明: 在某个元素的前面用css的形式添加内容(图片、文本)。

    3.元素选择符::first-letter{

    }
    说明:控制第一个字符的样式
    4.元素选择符::first-line{
    }
    说明:控制第一行的样式
     display:none;

    将元素彻底隐藏,不再占据空间
      visibility:hidden;

    将元素隐藏,占据空间,在页面上留下一片空白

     

  • 相关阅读:
    LeetCode之“数学”:Plus One
    LeetCode之“动态规划”:Dungeon Game
    LeetCode之“排序”:Largest Number
    LeetCode之“字符串”:ZigZag Conversion
    LeetCode之“数组”:Rotate Array
    HTML 5 简介、视频、Video + DOM、音频、拖放
    HTML 多媒体、Object 元素、音频、视频
    HTML5 Canvas、内联 SVG、Canvas vs. SVG
    HTML5 语义元素、迁移、样式指南和代码约定
    HTML5 简介、浏览器支持、新元素
  • 原文地址:https://www.cnblogs.com/msx-hanquan/p/12743675.html
Copyright © 2020-2023  润新知