display:-webkit-box布局

Anersen

于 2023-05-08 23:46:33 发布

阅读量5.5k

点赞数 7

文章标签： webkit 前端 css html

本文链接：https://blog.csdn.net/weixin_52255957/article/details/130569460

版权

-webkit-box是CSS3弹性盒模型的早期实现，类似于现代的flex布局。主要包括-webkit-box-orient用于设置子元素排列方向，-webkit-box-pack控制子元素的水平对齐，-webkit-box-align处理垂直对齐，以及-webkit-box-flex定义子元素的伸缩比例。通过这些属性，开发者可以实现灵活的响应式布局。-webkit-line-clamp用于限制内容显示的行数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>