提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css box-pack属性怎样用【css教程】,css box-pack属性

css box-pack属性定义及用法

1.box-pack属性是css3新增属性,是运用来规定当框大于子元素的尺寸,在那边安排子元素,现在主流浏览器都还不支撑该属性,然则一些浏览器有本身的私有属性来完成box-pack属性的效果。

2.Internet Explorer 10能够运用-ms-flex-pack property属性来替代支撑box-pack属性,Internet Explorer 10之前版本不支撑该属性。Firefox内核浏览器能够经由过程私有属性-moz-box-pack属性来替代支撑box-pack属性。Safari、Opera以及Chrome浏览器能够经由过程私有属性 -webkit-box-pack属性来替代支撑box-pack属性;

css box-pack属性语法花样

box-pack: start/end/center/justify;

属性值申明

start :关于一般方向的boxes,左边沿的第一个子元素被安排在左边(一切分外的空间安排后的末了一个子元素)。关于反向boxes,右边沿末了一个子元素安排在右边(一切分外的空间安排前的第一个子元素)

end:关于一般的方向的boxes,末了一个子元素的右边沿安排在右边(一切分外的空间安排前的第一个子元素)。关于反向boxes,第一个孩子的左边沿安排在左边(一切分外的空间安排后的末了一个子元素)

center:分外的空间分别匀称的两半,前一半安排第一个子元素,另一半安排末了一个子元素

justify:分外的空间均匀分配给每个子元素

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 box-pack属性笔记</title>
<style type="text/css">
body{background-color: #aaa;}
div{width: 400px;height: 100px;border:1px solid mediumvioletred;}
.box1{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-pack:center;/* W3C */
-ms-flex-pack:center;/* Internet Explorer 10 */
-moz-box-pack:center;/* Firefox */
-webkit-box-pack:center;/* Safari, Opera, and Chrome */
}
.box2{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-pack:justify;/* W3C */
-ms-flex-pack:justify;/* Internet Explorer 10 */
-moz-box-pack:justify;/* Firefox */
-webkit-box-pack:justify;/* Safari, Opera, and Chrome */
}
</style>
</head>
<body>
<div class="box1"><p>1</p><p>2</p></div>
<div class="box2"><p>1</p><p>2</p></div>
</body>
</html>

运转效果

以上就是css box-pack属性怎样用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css box-pack属性怎样用【css教程】,css box-pack属性"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线