欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3 box学习_html/css_WEB-ITnose

程序员文章站 2022-05-16 14:37:20
...
CSS3提供的盒子样式可实现对盒子内部元素的弹性布局,我们就不用使用float或者display:inline来使块元素横向排布(box-orient可以做到),或者计算每个块的宽度or百分比来实现均分(box-flex可做到)。so,大胆地用吧妹纸。对父元素设置display:box,可对内部的块级子元素进行布局,此时,内部的元素按照内联元素的排列方式,但可以设置宽和高。对父盒子使用如下的样式:

1.box-orient

规定了内部子元素的排列方式,具体有

  • vertical
  • horizontal
  • inline-axis
  • block-axis
  • 2.box-align

    规定了内部子元素在垂直方向上的排列方式:

  • center:即垂直居中于父盒子中
  • start:从父元素顶部开始排列
  • end:对齐父元素底部
  • stretch:纵向拉伸填满整个父元素
  • baseline
  • 3.box-pack

    在水平方向上的对齐方式
    start:左对齐
    center:实现子元素在水平方向上居中对齐
    justify:两端对齐
    end:右对齐

    说明:box-align和box-pack对齐方式的解释都和box-orient的设置有关。

    4.box-direction

    子盒子的排列顺序。

    5.box-sizing

    设置width都包括了盒子的哪些部分:

  • content-box:width=内容区
  • border-box:width=内容区+padding+border
  • 6.box-flex

    这个属性要在子元素中设置,用来分配父元素的剩余宽度和高度(当设置为vertical排布时),设置这个属性必须由父元素设置了display:box才有用。
    剩余宽度的理解:

    父容器宽度-子容器固定宽度(优先)/子容器内容宽度-子容器margin&border&padding

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    相关标签: CSS3 box学习