display:

  1.inline 同行显示,当一行显示不下、多余的就会换行显示,

  不支持的css样式:不支持宽高,不支持行高(行高会映射给父级) 不支持margin上下,content由 文本内容撑开

  2.inline-block:同行显示,当一行显示不下,标签会作为一个整体换行显示

overflow:

   1.定义:处理内容超出盒子显示的区域

   overflow:auto:自适应,内容如果超出显示,会出现滚动条,不超出则不显示滚动条

   overflow:hidden:隐藏超出盒子显示范围的内容

  overflow:scroll:一直采用滚动方式显示

float:浮动布局 ,改变BFC的参照方位

  为何使用:使用它,块级盒子就会同行显示

  如何使用:

      float:left/right (左/右 浮动)

      left:BFC参照方向从左向右

      right:BFC参照方向从右向左 

清浮动目的:让父级(有浮动的子级)获得一个合适的高度

   浮动的问题:浮动的子级,默认不会获取父级的宽度,也不会撑开父级的高度

   清浮动操作以后(清浮动针对的是父级):父级在清浮动以后,可以重新被子级撑开高度

   注意:当父级没有下兄弟标签(不影响上兄弟),可以不做清浮动操作。但是清浮动一般每次在浮动后都会处理的。

  清浮动的四种方式:

    1.设置父级的死高度(就是设置一个有效的高度值)

     2.通过父级的兄弟设置clear:both

    3.设置父级overflow 属性

      例:.sub{overfolw:hidden;}  overflow:hidden:隐藏超出盒子显示范围的内容

    4.通过父级:after

.           after{
              content: '';
              display: block;
              clear: both;}
                   

Python12/10--前端之display/overflow使用/清浮动的方式的更多相关文章

  1. 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  2. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

  3. web开发:清浮动

    一.display总结 二.overflow 三.浮动布局 四.清浮动 五.清浮动的方式 一.display总结 <!DOCTYPE html> <html> <head ...

  4. 关于浮动与清浮动 float

    浮动常见的几种属性值 float {left;  right;  none;  } 主要是定义元素朝哪个方向浮动: 元素浮动后的特性 在一行显示,父级的宽度放不下,自己折行: 支持宽高等样式: 不设置 ...

  5. web前端浮动、清浮动问题

    浮动的问题如下一一列举如有考虑不周的欢迎欢迎大家补充: 1.浮动,兼容性问题3px的问题,双边距的问题 在平时工作的过程中,解决3px的问题,一般都是初始化*{margin:0;padding:0px ...

  6. nginx 1.15.10 前端代理转发 将多个地址,代理转发到一个地址和端口 多系统公用一个cookie 统一token

    nginx 1.15.10 前端代理转发 将多个地址,代理转发到一个地址和端口 多系统公用一个cookie 统一token 注意: proxy_pass http://192.168.40.54:22 ...

  7. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  8. CSS清浮动处理(Clear与BFC)

    在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...

  9. css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

随机推荐

  1. 20165312 2017-2018-2《Java程序设计》课程总结

    20165312 2017-2018-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:我期望的师生关系 预备作业2:C语言基础调查和java学习展望 预备作业3:Linux安 ...

  2. C#将List<T>转化为DataTable

    using System; using System.Collections.Generic; using System.Data; using System.Reflection; using Sy ...

  3. debian系统的另一个包管理器aptitude

    最近在玩OPI的时候遇到了一个包因为各种依赖问题死活装不上.苦搜很久找到这个aptitude包管理器. 基于debain衍生的各种操作系统比较常用包管理器是apt,不过apt在遇到依赖问题的时候处理得 ...

  4. C语言中的作用域,链接属性和存储类型

    作用域 当变量在程序的某个部分被声明的时候,他只有在程序的一定渔区才能被访问,编译器可以确认4种不同类型的作用域:文件作用域,函数作用域,代码块作用域和原型作用域 1.代码块作用域:位于一对花括号之间 ...

  5. Vue2.0学习笔记

    环境搭建 vue-cli@3    vue-cli@2.X npm i -g @vue/cli 模板语法 文本 <span>Message: {{ msg }}</span> ...

  6. 如何在ORACLE中查询某一用户下所有的空表

    先分析表 select 'analyze table '||table_name||' compute statistics;' from user_tables; 把查询结果依次执行 把所有表分析一 ...

  7. 解决strcmp的错误以及VS的快捷键

    主要是C++数组作业中发现的一些问题. 第一点是关于strcat函数 我用VS2018调用strcat的时候报错,错误信息提示strcat不安全(?)要用strcat_s.修改后,可成功运行. 但这两 ...

  8. SpringData中使用@Modifying注解实现修改操作

    通过@Modifying可以实现修改和删除操作 @Modifying @Query("update Person set email = :email where lastName =:la ...

  9. 数据库设计,表与表的关系,一对多。One-To-Many(2)

    一对多:主键数据表中只能包含一个记录,而在其关系记录表中这条记录可以与一个或多个记录相关,也可以没有记录与之相关. 关联映射:一对多/多对一存在最普遍的映射关系,简单来讲就如球员与球队的关系:一对多: ...

  10. java学习笔记(六):变量类型

    java一共三种变量: 局部变量(本地变量):方法调用时创建,方法结束时销毁 实例变量(全局变量):类创建时创建,类销毁时销毁 类变量(静态变量):程序启动是创建,程序销毁时销毁 public cla ...