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

  • 相关阅读:
    题解 CF700E Cool Slogans
    题解 LOJ2065 「SDOI2016」模式字符串
    以guest账号无密码访问设置
    共享
    计算机的C$共享在哪里
    网卡工作原理
    iperf网络测试
    Jmeter安装与使用(压测)
    压测工具使用(vegeta)
    Alertmanager 安装(k8s报警)
  • 原文地址:https://www.cnblogs.com/rjjs/p/6501698.html
Copyright © 2020-2023  润新知