zoukankan      html  css  js  c++  java
  • css那些事儿3 列表与浮动

    一  列表

    列表默认为行内块元素,具有宽高,当一个非块元素是无法应用宽高的,比如a

    1 有序列表

    有ol li组成,其中li为列表项,列表的ol子元素务必为li元素标签,li子内容支持列表任意嵌套,有序列表常常会显示1,2,3按照升序或者降序方式的序号,该序号通过list-style-type指定

    2 无需列表

    与有序列表差异在于有无顺序上,至于显示样式上则通过css进行相应设置

    3 自定义列表

    dl,dt,dd,dt常常代表一个列表项的标题,而dd代表该标题对应的详情的意思

    4 列表常用语下拉菜单,选项卡,图片轮播等组件的基础,可以说列表应用是非常广泛的

    二 浮动

    1 浮动

    可以简单理解为将元素标签向左或向右放置位置,浮动会打破文档布局流,不受容器控制

    2 清除浮动

    2.1 在浮动元素标签后面的相邻标签设置css属性clear:both来清除前面的浮动

    这种方式增加了元素标签

    2.2 使用br标签的属性clear=“all”来清除浮动,同样的道理也增加了文档元素标签,不利于css设置分离和后期维护

    2.3 将容器的显示方式设置为table,如display:table;这种方式由于存在浏览器差异性非常明显,是一种比较差的清除方式

    2.4 在容器标签应用类,如div_clear{clear:both},这种在不改变文档结构的情况下附加清除浮动,但是对于子标签不再使用浮动时候显得有一点多余

    2.5 使用伪对象:after;是一种比较好的方式,如 div:after{display:block;visiablity:hidden;content:"";line-height:0;font-size:0;clear:both}。使用伪对象在浮动元素后面应用清除浮动是一种比较可选用的方式

    2.6 让容器也浮动:然后在最后真正不适用浮动的地方下一个元素主动清除浮动,这是一种非常不好的方式,因为都浮动了难以控制

  • 相关阅读:
    如何使用Shiro
    ORACLE: 查询(看)表的主键、外键、唯一性约束和索引
    图片下载器类
    关于Android如何创建空文件夹,以及mkdir和mkdirs的区别
    图片二值化 和灰度处理方法
    InputSream转为String
    Bitmap Byte[] 互转
    静默安装/ 普通安装与root权限获取相关
    EventBus 3.0使用相关
    文件存储工具类
  • 原文地址:https://www.cnblogs.com/rjjs/p/6501698.html
Copyright © 2011-2022 走看看