星空网 > 软件开发 > 网页设计

浅谈position、table

一、首先是喜闻乐见的position方法,经典且万能,用法如下:

 1 父元素{ 2   position:relative; 3 } 4 子元素{ 5   position:absolute; 6   top:50%; 7   left:50%; 8   margin-top:/*该元素height*0.5的负值*/; 9   margin-left:/*该元素width*0.5的负值*/;10 }

   不需要水平居中可以去掉left和margin-left。

 划重点需要父元素和子元素都定义宽高,自适应是不可能自适应的,这辈子都不可能自适应的。

 

 

二、 display:table-cell能够使大小不固定的元素实现垂直居中布局,先来一发用法:

 

父元素{  display:table-cell;  vertical-align:middle;}子元素{  vertical-align:middle;}

 

  table-cell布局除了常见的实现不同宽高的图片垂直居中,还能做到自适应两栏布局(评论区等):

浅谈position、table

  代码如下:

HTML部分:

<div class="wrap">    <div class="img">      <img src='/images/loading.gif' data-original="http://img5.imgtn.bdimg.com/it/u=416202619,4025660570&fm=26&gp=0.jpg" width="80px" height="80px" >    </div>    <div class="text">      <p>文字部分 </p>    </div>  </div>

CSS部分:

<style type="text/css">    .wrap{      display: table-row;    }    .img{      display: table-cell;      vertical-align: middle;      text-align: center;      width: 100px;      border: 1px solid #000;    }    .text{      display: table-cell;      width: 300px;      border: 1px solid #000;      padding: 10px;    }    .wrap div+div{      border-left: none;    }</style>

 

  另外table-cell还能自动使多个子元素等宽分布,不需要自己计算宽度:

浅谈position、table

  代码如下:

    ul{      list-style-type:none;      display: table;      width: 250px;      padding: 0;    }    li{      display: table-cell;      text-align: center;    }    li+li{      border-left: 1px solid #000;    }

 

划重点:1、IE6/7不支持; 2、table-cell不支持margin属性(但支持padding),就很僵硬; 3、尽量不要和浮动/定位同时用,会破坏它的css属性。

 

 

三、如果你用ie我们就做不成朋友之弹性布局神器flex-box,用法如下:

父元素{  display:flex /* 行内元素用inline-flex */  align-items:center;/*当主轴为水平方向(默认)*/ }

  原理是使flex-box的子元素(伸缩项目)沿着侧轴方向(当默认flex-direction:row时,侧轴就是垂直方向)居中对齐。

  使用flex-wrap,还可以使伸缩容器里的内容折叠显示:

浅谈position、table

  当调整视口宽度缩小到480px时:

浅谈position、table

  代码如下:

<head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">    *{margin: 0;padding: 0;}    #box{      display: flex;      flex-wrap: wrap;      justify-content:center;/* 主轴方向居中对齐*/      align-items: center;/* 侧轴方向居中对齐*/      padding: 50px;      font-size: 2.5em;      font-weight: bold;      text-align: center;      border: 1px solid #000;    }  </style></head><body>  <div id="box">    <p class="item1">超好吃的</p>    <p class="item2">♥</p>    <p class="item3">麻辣小龙虾</p>  </div></body>

  浏览器兼容情况:

浅谈position、table

  IE10-和安卓4.4-是扑街的,低版本浏览器兼容性使用display:box解决:

 

 

display:box;
display: -moz-box; /* 低版本firefox */

display:-webkit-box;/* IOS 6-,safari 3.1-6 */

------

display: -ms-flexbox; /* IE10  */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex; /* 较低版本firefox */
display: flex; /*上图绿的部分 */

  兼容部分参考:

https://zhuanlan.zhihu.com/p/21640023

http://www.w3cplus.com/css3/using-flexbox.html




原标题:浅谈position、table

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

速卖通自定义运费如何设置?:https://www.goluckyvip.com/news/3881.html
德国工会组织Verdi呼吁亚马逊仓库工人再次罢工:https://www.goluckyvip.com/news/3882.html
TikTok广告投放丨商品限制和素材要求:https://www.goluckyvip.com/news/3883.html
疯狂!一万美金天价运费大规模爆发!附加费狂飙,警惕目的港弃货!:https://www.goluckyvip.com/news/3884.html
做Shopee不会做店铺诊断 看这篇就够了:https://www.goluckyvip.com/news/3885.html
Lazada数字经济促进双循环:国货商家走出去,东南亚品牌引进来:https://www.goluckyvip.com/news/3886.html
从园岭新村到大梅沙海滨总站坐什么车:https://www.vstour.cn/a/363191.html
七月份适合去日本旅游吗 7月份去日本哪里好玩:https://www.vstour.cn/a/363192.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流