百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> css box-pack属性如何用
分享文章到:

css box-pack属性如何用

发布时间:09/01 来源:未知 浏览: 关键词:

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>

运转结果

ec0ee9cca360256d99a6d5f75642281.png

以上就是css box-pack属性如何用的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板