• css布局


    流式布局

    display: inline | block | inline-block

    block独占一行默认宽度会填满父的宽度,可设width,height,padding,margin. block可以包含block,inline,inline只能包含inline,也有例外。

    inline同行显示直到宽度排满,宽度随元素内容显示,width,height无效,水平方向padding-left, padding-right, margin-left, margin-right有效,垂直方向padding-top, padding-bottom, margin-top, margin-bottom无效

    inline-block同行显示,内容可以设置宽高

    float: left | right | none | inherit(继承父的float属性)

    浮动,脱离文档流,如果前一个元素是文档流中的元素,则浮动元素的顶部和前一个元素的底部对其,如果前一个元素也是浮动元素,则跟在前一个元素同行后面,如果宽度不够则挤在下面。

    clear : none | left | right | both

    清除浮动,添加后左侧或右侧或两边不允许浮动存在,如果左侧是浮动元素则换行不在同行显示,只影响添加clear的元素,不影响其他元素。

    position: static | relative | absolute | fixed | auto

    配合left top 使用

    static 默认(相当于不设position) 不能用z-index

    relative 相对于元素在流中的位置偏移,任然在流中,其他元素按照它偏移前的位置对待,可用z-index

    absolute 相对于最近的已定位的(relative,absolute)祖先偏移,如果没有已定位的祖先则相对于浏览器窗口,脱离流,它后边的元素会补上它在流中的空缺,可用z-index

    fixed 相对于浏览器窗口偏移,可用z-index

    overflow  //visible,hidden,scroll,auto       overflow-x,overflow-y

    BFC(Block fomatting context)

    生成条件:

    1. 根元素
    2. float属性不为none
    3. position为absolute或fixed
    4. display为inline-block, table-cell, table-caption, flex, inline-flex
    5. overflow不为visible

    作用:

    1. BFC不与float元素重叠

    2. BFC的高度会考虑float元素

    3. 同一个BFC相邻margin重叠

    !important

    white-space:nowrap

  • 相关阅读:
    EasyUI应用总结
    ExcelUtil
    搭建Easyui环境在Myeclipse或Eclipse中
    Easyui Datagrid 如何实现后台交互显示用户数据列表
    mybatis整合ehcache
    Flynn初步:基于Docker的PaaS台
    Following unknown configure options were used:--enable-fpm
    Android决议具体解释
    cocos2dx lua
    Android 建立View 圆角
  • 原文地址:https://www.cnblogs.com/yfann/p/4574837.html
Copyright © 2020-2023  润新知