CSS3中不熟悉的属性1:box-pack和box-align
来源:互联网 发布:谁在淘宝上买过精密管 编辑:程序博客网 时间:2024/06/07 06:03
box-pack 定义和用法:
box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。
该属性规定水平框中的水平位置,以及垂直框中的垂直位置。
语法:
box-pack: start|end|center|justify;
start:
对于正常方向的框,首个子元素的左边缘被放在左侧(最后的子元素后是所有剩余的空间)
对于相反方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)
end:
对于正常方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)。
对于相反方向的框,首个子元素的左边缘被放在左侧(最后子元素后是所有剩余的空间)。
center:
均等地分割多余空间,其中一半空间被置于首个子元素前,另一半被置于最后一个子元素后
justify:
在每个子元素之间分割多余的空间(首个子元素前和最后一个子元素后没有多余的空间)。
box-align属性与box-pack类似,规定如何对齐框的子元素。
语法:
box-align: start|end|center|baseline|stretch;
start :
对于正常方向的框,每个子元素的上边缘沿着框的顶边放置。
对于反方向的框,每个子元素的下边缘沿着框的底边放置。
end:
对于正常方向的框,每个子元素的下边缘沿着框的底边放置。
对于反方向的框,每个子元素的上边缘沿着框的顶边放置。
center:
均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下。
baseline:
如果 box-orient 是inline-axis或horizontal,所有子元素均与其基线对齐。
stretch:
拉伸子元素以填充包含块
通过一起使用 box-align 和 box-pack 属性,对 div 框的子元素进行居中
<div> <p>我是居中对齐的。</p></div>
div{width:350px;height:100px;border:1px solid black;/* Firefox */display:-moz-box;-moz-box-pack:center;-moz-box-align:center;/* Safari, Chrome, and Opera */display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;/* W3C */display:box;box-pack:center;box-align:center;}
- CSS3中不熟悉的属性1:box-pack和box-align
- css3 box-orient box-pack box-align
- box-align和box-pack的使用
- css3 box-pack box-align 居中
- css3 box-pack box-align 居中
- CSS3 box-align 属性
- css3设置box-pack和box-align让div里面的元素垂直居中
- css3盒子布局--管理盒子的空间(box-pack和box-align)
- CSS3中不熟悉的属性2:display:box和display:flex的区别
- css3中通过设置box-pack和box-align让div里面的各种元素垂直和水平居中的方法
- CSS3 box-orient box-direction box-align box-flex box-pack
- css box-align box-pack等相关属性
- css使用box-align和box-pack使div的子元素垂直居中
- CSS3中box-shadow属性的使用方法
- box-sizing是CSS3的box属性
- css3中webkit-linear-gradient、box-shadow属性的使用
- 盒子模型和CSS3的box-sizing属性
- CSS3 box-shadow 属性
- UIView的setNeedsLayout, layoutIfNeeded 和 layoutSubviews 方法之间的关系解释
- Error日志信息
- Python欺骗问题
- 抽象类理解
- 如何做到优化引擎搜索SEO之第一篇:人类可读的url
- CSS3中不熟悉的属性1:box-pack和box-align
- Unity发布android程序,报错Resource compilation failed!
- linux下安装pip
- vector用法
- iOS:如何优雅的让UITextView根据输入文字实时改变高度
- bzoj 1801: [Ahoi2009]chess 中国象棋 (组合数+DP)
- 显示多张图片
- Linux 安装 composer
- MPI并行程序设计之平行Rank