css 一个div里套了四个小div 如何让他们自动分配间距,高度被设定的情况下。

html-css033

css 一个div里套了四个小div 如何让他们自动分配间距,高度被设定的情况下。,第1张

利用CSS3 新添加的盒子模型属性 box-flex;可以让子容器针对父容器的宽度按一定规则进行划分。ie 目前不支持,估计后续版本会兼容这个属性。

必须在父元素上面加上display:box才可以对子元素进行规则划分。

box-flex:1这里的 1 指的是比例 。

如:

<!DOCTYPE html>

<head>

    <title></title>

    <style>

        .box {

     width: 200px /*宽度没有限制*/

     height: 200px

    display: -webkit-box /*这个必须要有*/

      -webkit-box-orient:vertical /* 默认横向划分  vertical 为纵向划分*/  

}

.box div{

height:100%

}

.div1{

background-color:red

-webkit-box-flex:1

}

.div2{

background-color:blue

-webkit-box-flex:1

}

.div3{

background-color:green

-webkit-box-flex:1

}

.div4{

background-color:darkblue

-webkit-box-flex:1

}

    </style>

</head>

<body>

    <div class="box">

        <div class="div1"></div>

 

        <div class="div2"></div>

 

        <div class="div3"></div>

        

        <div class="div4"></div>

    </div>

</body>

</html>

一、区别

1、参数详解

margin:auto = margin:auto auto auto auto

margin:0 auto = margin:0 auto 0 auto

margin:n m p q表示该元素上外边距为n,右外边距为m,下外边距为p,左外边距为q,即 margin:上 右 下 左 ,逆时针一圈。

2、实例说明

margin后面是有4个参数的。

例如:margin:1px 2px 3px 4px,分别表示 上(1px)、右(2px)、下(3px)、左(4px)。

margin后面如果只写2个参数的。

例如:margin:1px 2px

那么这是代表 上下都为1px 左右都为2px。

扩展资料

1、margin 0px auto属性规则

margin:0px auto代表对象上下间隔为0px,左右间隔根据对象宽度自适应。

margin:0px auto简写:可以去掉0后面的px单位,一般CSS代码中如果值为0,那可以不用跟html长度单位。

margin0px auto或margin:0 auto作用:常用于让DIV布局居中,起到让布局居中作用。

2、margin:auto属性说明

margin:auto时浏览器计算外边距,当margin定义为auto时,将占用可用空间或0px 。

margin:auto时浏览器会自动分配左右边距,使元素平均分配占用父级容器的左右边距,达到元素居中的目的

3、CSS中auto元素

定义auto元素,因元素类型和上下文而异。在边距中,auto可以表示两种情况:占用可用空间或0 px。这两个将为元素定义不同的布局。

4、margin的兄弟属性padding

margin属性是外边距,而padding属性是内边距。padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

什么是flex布局?

传统的布局方案是基于盒模型,依赖于display:block和float+position,但是对于一些特殊的布局来说就不是很方便,如在盒模型中垂直居中。

2009年W3C提出一种新的布局方案,flex弹性盒布局,目前兼容的浏览器有chrome opera IE Firefox Sifari 

flex兼容浏览器版本

但是在未来flex布局将会成为布局的首选方案。

flex是flexinle BOX的缩写。意思是弹性布局,用来为盒模型提供最大的灵活性。    任何一个容器(标签)都可以指定为flex布局。用display:flex;

如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效

flex的基本概念

容器默认存在两根轴:水平的主轴(main axis)和垂直交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.

如果给一个元素设置为flex后,这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。

首先要给父元素添加display:flex;将父元素转化为弹性盒

2.用flex-direction来改变盒子里元素的位置

row 默认在一行内排列(从左向右)

row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。)

column :纵向排列。

column-reverse:反转纵向排列,从下往上排,最后一项排在最上面

3.内容对齐(justify-content)属性应用在 弹性容器 上,把弹性项沿着弹性容器的主轴线(main axis)对齐

justify-content:flex-start 默认,左对齐(图1)

justify-content:flex-end 右对齐(图2)

justify-content:center 居中对齐(图3)

justify-content:space-between 两端对齐,中间自动分配

justify-content:space-around 自动分配距离

主轴对齐方式

4.align-items(交叉轴对齐方式)

flex-start:顶端对齐

flex-end:底对齐

center:垂直居中对齐

baseline:项目内文本的底线对齐

stretch  默认值    项目的高度自适应容器(注:子元素不能设置高)

交叉轴对齐方式

5.flex-wrap

该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

  nowrap:flex容器为单行。该情况下flex子项可能会溢出容器

  wrap:flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行

  wrap-reverse:反转 wrap 排列。

图1(nowrap)注意如果父元素盒设置宽度会自动缩子元素容器宽度

图2(wrap)

图3(warp-reverse)

容器单行或者多行方式

 6、align-content(行与行之间对齐方式)

当伸缩容器的侧轴还有多余空间时,本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式,这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注:本属性在只有一行的伸缩容器上没有效果。

flex-start没有行间距

flex-end底对齐没有行间距

center居中没有行间距

space-between两端对齐,中间自动分配

space-around自动分配距离