zoukankan      html  css  js  c++  java
  • 浮动

    标准文档流:
    指元素根据块级元素和行内元素的特性,按照从上到下,从左到右的顺序依次排列,这种方式是默认的排列方式



    一.块级元素和内联元素

    块级元素内容独占一行,内联元素内容自动拼接

    display属性: 块级元素与内联元素的相互转换

    block: 块级元素的默认值,将内联元素转换成块级元素
    inline: 内联元素的默认值,将内联元素转换为块级元素
    inline-block: 内联元素和块级元素特性都存在
    none: 隐藏元素,隐藏后位置不会被占用

    二.浮动

    float: 设置元素的浮动
    left :左浮动
    right :右浮动
    none :默认,不浮动

    clear: 清除元素浮动
    left :清除此元素前左浮动元素
    right :清除此元素前右浮动元素
    both :清除此元素前左右浮动元素

    三.防止防止父级边框塌陷的方法

    浮动元素后面加空div
    简单,空div会造成HTML代码冗余
    设置父元素的高度
    简单,元素固定高会降低扩展性
    父级添加overflow属性
    简单,下拉列表框的场景不能用(经常使用)
    父级添加伪类after
    写法比上面稍微复杂一点,但是没有副作用,推荐使用

  • 相关阅读:
    Git 进阶学习
    My SQL 学习打卡 60天搞定mysql
    设计模式 学习笔记
    docker 从入门到精通
    java 异步线程下的顺序控制
    Maven 工程 如何添加 oracle 驱动 问题
    Hive 2.1.1 学习笔记
    Linux 下 MySQL-5.6.16 安装
    hadoop2.x HDFS HA linux环境搭建
    [LC] 1146. Snapshot Array
  • 原文地址:https://www.cnblogs.com/qinzhenyu/p/9934749.html
Copyright © 2011-2022 走看看