css 表格设置-定位设置-布局相关

ernestwang 920 0

表格设置

  • 属性说明
    属性 说明
    table-layout auto:自动运算,fixed:固定宽度
    border-collapse separate:边框独立, collapse:边框合并
    border-spacing 单元格的间距
    caption-side 表格标题位置,top:顶部,bottom:底部
    empty-cells 空单元格显示状态,show:显示,hide:隐藏

定位设置

  • position:元素在水平面上的定位
    属性值 说明
    relative 相对于自身在文档流中的位置进行定位
    absolute 相对于离自身最近的定位的祖先元素进行定位,若没有一直回溯到body
    fixed 相对于窗口定位,不会随窗口内容滚动而滚动
    • 四个定位属性:left、right、top、bottom
  • z-index:垂直方向的偏移
    • 说明:没有单位,写个整数就行,数值越大,元素越靠上。

布局相关

  • 属性说明
    属性 说明
    overflow 溢出容器的内容如何处理,visible|hidden|scroll|auto
    visibility 用来控制元素的显示与隐藏,visible|hidden,隐藏后会保留元素位置
    display 设置元素显示属性,inline|block|inline-block,none会隐藏元素位置也不保留
    float 设置浮动,none|left|right
    clear 清除浮动,left|right|both

盒子模型

  • 属性说明
    属性 说明
    border 边框宽度
    padding 内补白
    margin 外补白
    margin:水平方向会叠加,垂直方向取较大者
  • 元素空间
    • 宽度 = width + 左右边框 + 左右内补白 + 左右外补白
    • 高度 = height + 上下边框 + 上下内补白 + 上下外补白

布局页面

  • 将看到的内容按块划分
  • 每一块填充一个颜色
  • 然后按照从大到小一点一点进行布局

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~

复制成功
微信号: irenyuwang
关注微信公众号,站长免费提供流量增长方案。
我知道了