zoukankan      html  css  js  c++  java
  • 由table理解display:table-cell

    转载自:https://segmentfault.com/a/1190000007007885

    table标签(display:table)

    1) table可设置宽高、margin、border、padding等属性。属性值的单位可以使用px,百分比值。
    2) table的宽度默认由内容的宽高撑开,如果table设置了宽度,宽度默认被它里面的td平均分,如果给某一个td设置宽度,那么table剩余的宽度会被其他的td平均分(有点类似flex布局)
    3) 给table设置的高度起到的作用只是min-height的作用,当内容的高度高于设置的高度时,table的高度会被撑高。

    tr标签(display:table-row)

    1) 给tr设置高度只起到min-height的作用,默认会平分table的高度。
    2) tr中的td默认高度会继承tr的高度,若给任一td设置了高度,其他td的高度也同样变高。适合多列等高布局
    3) 设置宽度、margin、都不起作用

    td标签(display:table-cell)

    1) td默认继承tr的高度,且平分table的宽度
    2) 若table(display:table)不存在,给td设置的宽高不能用百分比只能用准确的数值
    3) 给td设置vertical-align: middle; td元素里面(除float、position:absolute)所有的块级、非块级元素都会相对于td垂直居中
    4) 给td设置text-align: center; td元素里面所有非block元素(除float、position:absolute)都会相对于td水平居中,虽然block元素不居中,但其中的文字或inline元素会水平居中

  • 相关阅读:
    多态
    SSM前后端分离 ssm+html+js(ajax) 这种controll层的返回值是结合或者网址
    Eclipse创建ssm项目
    在idea中创建Maven项目
    Maven的安装和配置
    IDEA修改快捷键!和一些常用的快捷键
    mysql数据库的安装和连接测试并给root用户赋密码
    ssm动态sql语句
    Java基础--JDBC
    Java基础--注解、反射
  • 原文地址:https://www.cnblogs.com/ceceliahappycoding/p/10545703.html
Copyright © 2011-2022 走看看