CSS3 box学习_html/css_WEB-ITnose
程序员文章站
2022-05-16 14:37:20
...
CSS3提供的盒子样式可实现对盒子内部元素的弹性布局,我们就不用使用float或者display:inline来使块元素横向排布(box-orient可以做到),或者计算每个块的宽度or百分比来实现均分(box-flex可做到)。so,大胆地用吧妹纸。对父元素设置display:box,可对内部的块级子元素进行布局,此时,内部的元素按照内联元素的排列方式,但可以设置宽和高。对父盒子使用如下的样式: vertical horizontal inline-axis block-axis center:即垂直居中于父盒子中 start:从父元素顶部开始排列 end:对齐父元素底部 stretch:纵向拉伸填满整个父元素 baseline content-box:width=内容区 border-box:width=内容区+padding+border
1.box-orient
规定了内部子元素的排列方式,具体有
2.box-align
规定了内部子元素在垂直方向上的排列方式:
3.box-pack
在水平方向上的对齐方式
start:左对齐
center:实现子元素在水平方向上居中对齐
justify:两端对齐
end:右对齐
说明:box-align和box-pack对齐方式的解释都和box-orient的设置有关。
4.box-direction
子盒子的排列顺序。
5.box-sizing
设置width都包括了盒子的哪些部分:
6.box-flex
这个属性要在子元素中设置,用来分配父元素的剩余宽度和高度(当设置为vertical排布时),设置这个属性必须由父元素设置了display:box才有用。
剩余宽度的理解:
父容器宽度-子容器固定宽度(优先)/子容器内容宽度-子容器margin&border&padding
版权声明:本文为博主原创文章,未经博主允许不得转载。
推荐阅读
-
css3实现模拟select 以及其中的三角形_html/css_WEB-ITnose
-
CSS3 文本换行_html/css_WEB-ITnose
-
简单了解CSS3的all属性_html/css_WEB-ITnose
-
CSS3透明属性opacity_html/css_WEB-ITnose
-
一款纯css3实现的颜色渐变按钮_html/css_WEB-ITnose
-
CSS3新属性transition-property transform box-shadow实例学习
-
CSS3新属性transition-property transform box-shadow实例学习
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
CSS3之圆角_html/css_WEB-ITnose
-
css3中的content和实体_html/css_WEB-ITnose