display:-webkit-box
这个布局其实跟flex布局差不多,看看它的一些属性就知道了
1.-webkit-box-orient: horizontal | vertical | inherit
horizontal
:默认值,子元素横向排序
vertical:子元素纵向排序
inherit:继承父元素的排序布局
在我看来这跟flex布局里面的flex-direction属性差不多
2.-webkit-box-pack: start | end | center | justify
-webkit-box-pack:是让子元素在水平方向上的对其方式,跟flex布局中的justify-content属性差不多
3.-webkit-box-align: start
| end
| center
| baseline
| stretch
-webkit-box-align:子元素在垂直方向的对齐方式,跟flex中的align-items差不多
看完上面得是不是觉得跟flex布局很像啊,下面还有几个属性很经常用的
4.-webkit-box-flex:数字
表示子元素占的比例,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div
style="
display: -webkit-box;
-webkit-box-pack: center;
border: 1px solid #000;
"
>
<div class="parent">
<div class="child-one">1</div>
<div class="child-two">2</div>
<div class="child-three">3;width:150px;</div>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 500px;
height: 200px;
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child-one {
background: pink;
-webkit-box-flex: 1;
}
.child-two {
background: red;
-webkit-box-flex: 2;
}
.child-three {
background: lightgreen;
width: 150px;
}
</style>
</html>
父元素500px - 150px(child-three )=350px,子元素1和2就各占350px的1/3和2/3
5.-webkit-line-clamp:数字
将内容分成多少行,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="blog">
<div class="article">
内容显示为两行,超过部分隐藏并使用省略号,内容显示为两行,超过部分隐藏并使用省略号,内容显示为两行,超过部分隐藏并使用省略号
</div>
</div>
<style>
.blog{
background-color: red;
padding: 20px;
}
.article {
background-color: skyblue;
display:-webkit-box;
text-overflow:ellipsis;
overflow:hidden;
width:200px;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
}
</style>
</html>
以上就是我目前对-webkit-box的一个初步了解,希望能帮到你,如果有什么错误的地方请在评论区指正~~