css3 display:box 属性的介绍和应用

最新推荐文章于 2022-03-12 11:31:31 发布

底层打工仔

最新推荐文章于 2022-03-12 11:31:31 发布

阅读量894

点赞数 1

分类专栏：前端面试题目

本文链接：https://blog.csdn.net/echo750/article/details/82424773

版权

前端面试题目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、 display：box;属性的介绍
1. display:box;
在父元素上设置该属性，子代元素能排列在同一水平上。
2. 子代元素设置如下属性：
1、box-flex:number;
1)占父级元素宽度的number份
2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的子元素将平分余下的父级宽度number占份数。
3）若子元素占有margin值，则将余下的宽度（父级宽度-子代固定宽度-总margin值）平分占number份。
2、box-orient:horizontal/vertical
在父级元素上设置该属性，则子代元素按水平排列或竖直排列。所有主流浏览器不支持该属性，必须加上前缀。火狐：-moz-;safari
谷歌：-webkit-;opera:-o-;IE:-ms-.
1)horizontal:水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
2）vertical:垂直排列，子代总height=父级height。若父级宽度固定，则子代设置的height无效，子代会撑满父级高度。
3、box-direction:normal/reverse
在父级上设置该属性，确认子代的排列顺序
1）normal 子代按html排列顺序
2）reverse 反序
4、box-align:start|end|center|stretch
在父级设置子代的垂直对齐方式。
1）start 垂直顶部对齐
2）end 垂直底部对齐
3）center 垂直居中对齐
4）stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。
5、box-pack:start|end|start
在父级设置子代的水平对齐方式
1）start 水平左对齐
2）end 水平右对齐
3）center 水平居中对齐
二、Example
下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box {
        background-color: green;
        display: box;
        display: -moz-box;
        display: -webkit-box;
        display: -o-box;
        width: 100%;
    }
    .box .boxOne {
    background-color: white;
    -moz-box-flex:0;
    -webkit-box-flex:0;
    -o-box-flex:0;
    width: 200px;
    margin: 10px;
    }
    .box .boxTwo {
    background-color: white;
    -moz-box-flex:10;
    -webkit-box-flex:10;
    -o-box-flex:10;
    margin: 10px 0;
    }
    .box .boxThree {
    background-color: white;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    -o-box-flex:2;
    margin: 10px;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxOne">column1</div>
        <div class="boxTwo">column2</div>
        <div class="boxThree">column3</div>
    </div>
</body>
</html>

参考博客地址：https://blog.csdn.net/TTO_OTT/article/details/44680493

底层打工仔

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3 display:box 属性的介绍和应用

一、 display：box;属性的介绍 1. display:box; 在父元素上设置该属性，子代元素能排列在同一水平上。 2. 子代元素设置如下属性： 1、box-flex:number; 1)占父级元素宽度的number份 2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的子元素将平分余下的父级宽度number占份...
复制链接

扫一扫

专栏目录