html5浮动、等高、弹性盒模型

标签：

1px dashed虚线

box-sizing拯救了布局

1、inherit  继承父级

2、content-box（默认）-----这个盒子的边框、内边距 这2个值是不包括在width和height中，所以外扩

3、border-box---- 这个盒子的边框、内边距 这2个值是包括在width和height中了

浮动就是让元素脱离了文档。文档为空后，所以边框就包不住了。所以我们要清除浮动

方法一：（有问题，不建议）

之前html是用clear来清除的，现在不能用这个了

<!-- 在父级里添加一个class = “box clear” -->
.clear :after{
        content:‘‘;//添加空元素
        display:block;//改为块元素
        clear:both;//最后在清浮动
}

由于浮动会因为高不同而差池不气，就要用到我们的等高布局

先给下边的内边距无线大，然后再加个内容就往上走（margin-botton:-9999px）

如果用等高的方法的话，还会产生双边距的问题

方法二：

在最外面的框加一个样式 display:flex;

display:flex;叫弹性盒模型，又叫伸缩盒模型（Flexible Box）

display：box（2009）

display：flexbox（混合使用）

display：flex（最新使用）

最新版flex

　　1、Chrome 加前缀 -webkit-flex

　　2、Firefox  加前缀 -moz-flex

　　3、IE         加前缀 -ms-flex

　　4、标准：flex

父级加了display：flex后，子级就可以去掉左浮动了

如何要缩小窗口的话，保证内容在页面的话，就不能把页面的宽度定死了，要改成伸缩性的

例如  flex：1；flex：2；后者是前者的2倍大

弹性盒模型的属性

　　1、改变元素排列的方向flex-direction：（默认row）

　　　　a、row-reverse如果是123的顺序就倒过来变成321

　　　　b、column没有宽度的话就会占满

　　　　c、column-reverse

　　2、元素伸缩性flex（可以在父级的剩余空间去分配空间）跟的是比例值

　　3、自定义子元素的显示顺序order

　　4、主轴上对齐方式justify-content（根据row（右主）还是column来分主轴和侧轴）

　　5、侧轴上的对齐方式align-self

html5浮动、等高、弹性盒模型

标签：

原文地址：http://www.cnblogs.com/xuerong/p/5114103.html