旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css box-pack属性怎样用【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:55


导读:cssbox-pack属性定义及用法1.box-pack属性是css3新增属性,是运用来规定当框大于子元素的尺寸,在那边安排子元素,现在主流浏览器都还不支撑该属性,然...

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网别的相干文章!

标签:css box-pack属性