专栏首页老雷PHP全栈开发css基础教程之布局属性

css基础教程之布局属性

css基础教程之布局属性

一、display

none 隐藏对象

inline 指定对象为内联元素。span a

block 指定对象为块元素 div

inline-block 指定对象为内联块元素

flex 将对象作为弹性伸缩盒显示。

  div{display:block;}
  span{display:inline;}

二、float 浮动

none 设置元素不浮动

left 设置元素浮在左边

right 设置元素浮在右边

  .float{
    float:left;
  }

三、clear 清除浮动

none 允许两边都可以有浮动对象

both 不允许有浮动对象

left 不允许左边有浮动对象

right 不允许右边有浮动对象

  .clear{clear:both;}
  <div class="float"></div>
  <div class="clear"></div>

四、visibility 可见性

visible:设置对象可视

hidden:设置对象隐藏

collapse:主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。

  .div{visibility:visible;}

五、overflow 内容溢出处理

可以分拆:overflow-x,overflow-y

元素定义宽高之后生效

visible 对溢出内容不做处理,内容可能会超出容器。

hidden 隐藏溢出容器的内容且不出现滚动条。

scroll 隐藏溢出容器的内容,溢出的内容可以通过滚动呈现。

auto 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。

  .over{overflow:auto;}

本文分享自微信公众号 - 老雷PHP全栈开发(L362606856),作者:雷日锦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery教程之查找筛选函数

    三、children 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

    老雷PHP全栈开发
  • 老雷PHP全栈开发教程之常用html标签

    老雷PHP全栈开发
  • jQuery基础教程之文档处理

    appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。把原来的删除,放到新的地方

    老雷PHP全栈开发
  • 用Python来找合适的妹子(一)

    放心好了,她们都是追求精神满足而非物质,大部分都是要找生命中的另一半,那她们的另一半会是你吗?

    叫我龙总
  • 实战篇 | 用Python来找合适的妹子

    放心好了,她们都是追求精神满足而非物质,大部分都是要找生命中的另一半,那她们的另一半会是你吗?

    叫我龙总
  • Python_求列表s=[]求 元素个数,最大值,最小值,元素和,平均值

    瑞新
  • 高可用性的前生今世

    题记:今天是2018年1月1日,这是一个特殊的日子,民间称为“三头”,意思是周头、月头、年头;我把它称为“3A”,指Kerberos协议的3A。无独有偶的是今年...

    企鹅号小编
  • 前端开发利器 - Wep Replay

    即使测试人员录了视频,照着一步步操作也不一定能复现,例如bug是与当时的数据相关的。

    dys
  • 前端基础-JQuery(each方法遍历)

    cwl_java
  • 将Python程序(.py)转换为Windows可执行文件(.exe)第四步:运行测试

    python开发者向普通windows用户分享程序,要给程序加图形化的界面(传送门:这可能是最好玩的python GUI入门实例! http://www.jia...

    zhaoolee

扫码关注云+社区

领取腾讯云代金券