HTML5基础加强css样式篇（伸缩容器的简介和声明：display:flex||inline-flex）(五十一)

来源：互联网发布：买域名和空间编辑：程序博客网时间：2024/06/05 13:59

1为什么要有伸缩容器：

1. 使用浮动布局，无法实现等高
2.不能很快的调整DOM的顺序
3.不能很好控制子元素的位置

2.如何声明一个伸缩容器：

display:flex;

注： Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .layout-box {            width: 600px;            height: 300px;            background-color: #f0f0f0;            /*声明一个元素为伸缩盒模型，伸缩容器                1.伸缩项目 沿主轴排列（start -> end）                2.所有的伸缩项目（子元素）与父元素等高。                3.伸缩项目自动升级为块元素。            */            display: flex;        }        .item1 { background-color: #f00;}        .item2 { background-color: #ff0;  height: 100px;}        .item3 { background-color: #00f;}    </style></head><body><div class="layout-box">    <!--<div class="item item1">1</div>-->    <!--<div class="item item2">2222</div>-->    <!--<div class="item item3">3</div>-->    <span class="item item1">1</span>    <span class="item item2">2222</span>    <span class="item item3">33</span></div><!--<img src="img/3.gif" alt="">--><script type="text/javascript"></script></body></html>

行内伸缩容器：

display:inline-flex

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .layout-box {            width: 200px;            height: 200px;            background-color: #f0f0f0;            display: inline-flex;        }        .item1 { background-color: #f00;}        .item2 { background-color: #ff0;  height: 100px;}        .item3 { background-color: #00f;}/*        inline-flex 行内对齐特点            1.伸缩容器中有文本内容，基于第一个文本的基线对齐            2.伸缩容器中没有有文本内容，也没有子元素，伸缩容器底边位于一行的基线处。            3.伸缩容器中没有有文本内容，第一个子元素没有，第一个元素底边位于一行的基线处。*/    </style></head><body><div class="layout-box">    <!--<div class="item item1">1</div>-->    <!--<div class="item item2">2222</div>-->    <!--<div class="item item3">3</div>-->    <!--<span class="item item1">1</span>-->    <!--<span class="item item2">2222</span>-->    <!--<span class="item item3">33</span>-->    <!--World-->    <!--o-->    <div style="background-color: #00f; height: 50px; width: 50px;"></div></div>Hello<img src="img/3.gif" alt=""><script type="text/javascript"></script></body></html>

0 0