display:table、box和width百分比来均分盒子的比较(2)
来源:互联网 发布:端口监听工具 编辑:程序博客网 时间:2024/05/15 08:00
box
box适合均分内部子盒子没有边框的父盒子,否则内部盒子的边框重叠问题不太好处理,另外如果自盒子间有margin值,中间的margin会是两侧的double,这时可通过nth-child(index)来进行个别调整。
box-flex是对除开子盒子内容区、定宽子盒子之外的剩余部分进行划分,而不是把父盒子的整个宽度进行划分,因此就会造成所有子盒子都设置为box-flex:1,但因为子盒子内容多少不一而造成不能均分。
box的特点
1.当父元素设置为display:box后,内部的自盒子无论是否是内联元素,默认的排列方向都是横向排布。
2.内部块级子盒子的宽度由内容决定,不再占满整行,即便是按纵向排布。
3.只有内部盒子中存在块级元素时,父盒子上应用box的相关属性才有用,如果内部盒子全是内联元素将不起作用。子盒子的属性box-flex只对块级子盒子起作用。
总结box的应用:
1.实现内部盒子的横向布局:box-orient:horizontal
2.内部子盒子的居中对齐:box-align:center;box-pack:center
两端对齐:box-pack:justify
3.子盒子按某种比例划分父盒子(剩余部分)宽度:box-flex:num;(仍可设置width)
设置width:百分比
设置子盒子的宽度为百分比通常需要知道父盒子的宽度、除掉子盒子宽度后的区域的宽度,例如margin、border值等,需要精确的计算,这种方式不太方便。通常需要先将子盒子float以实现横向布局,在使用百分比。或者是父元素宽度不知道,但是子盒子间没有边距需要考虑也可以直接使用这种方式均分。
display:table
可以把除了margin等宽度以外的剩余部分按照100%来划分,这样就不用精确的计算了,父盒子的宽度也不必知道;此外利用border-spacing还可以避免设置margin后double的问题,border-collapse:collapse也能避免边框重叠问题。
但要注意一点的是,table不再是块级元素,不是占满整行,宽度和高度都由内容撑开(但是是可以设置width和height的)。可设置其宽度为100%。
对table-cell应用margin值无效。table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute 属性尽量不用同用。
table-cell可以单独使用,table和table-cell可以两个搭配使用,可以没有table-row。
总结table应用:
1.将内部盒子设置为table-cell,可实现横向排布
2.为内部盒子设置width可实现均分,自适应布局
3.border-collapse可避免border重叠问题
4.border-spacing可避免设置margin值来分离内部盒子造成的边距double问题。
5.table-cell激活了vertical-align属性,可用于垂直居中内部元素
6.实现等高布局
局限:IE8+及现代浏览器支持
我所知道的几种display:table-cell的应用
横向布局
1.display:inline-block
2.浮动
- display:table、box和width百分比来均分盒子的比较(2)
- display:table、box和width百分比来均分盒子的比较
- display table 布局 和box 布局同样的内容
- android PercentRelativeLayout 支持百分比来设置控件的宽高
- Android官-按百分比来设置控件的宽高
- 设置了table-cell 属性后,用百分比来设置宽度为什么会出现问题
- 【解决方案】display: box; 盒子布局无效的问题
- display:box 和 display:flex
- display:box和flex的区别
- CSS3中不熟悉的属性2:display:box和display:flex的区别
- css3盒子布局--管理盒子的空间(box-pack和box-align)
- Android weight布局均分和width(height)的一点关联
- div之间的间距 style="display:table ;padding-bottom: 20px; width: 100%"
- CSS3 display:box;和 box-flex详解
- HTML和CSS的关键:盒子模型(Box model)
- HTML和CSS的关键:盒子模型(Box model)
- HTML和CSS的关键:盒子模型(Box model)
- HTML和CSS的关键:盒子模型(Box model)
- 精确计算BigDecimal
- The Rotation Game (poj 2286 搜索IDA*)
- 哈希函数的构造与冲突处理
- Linux僵尸进程
- 1081. Rational Sum (20) -最大公约数
- display:table、box和width百分比来均分盒子的比较(2)
- scala.Enumeration 枚举示例
- Saltstack的API接口与调用方式
- aliyun 相关
- HDU 1556 给连续个球涂色-线段树-(区间更新,单点查询)
- 网络IO模型
- git小结
- html绘制一个带标题的框
- HDU 1056