关于css布局更加深入地了解--4.30

display属性（none，inline，block）

block：例如<div>就是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用

<div>, <p>, <h1>, <form>, <ul> 和<li>     还有h5中的新标签<header><section><footer>

inline：例如<span>是一个标准的行内元素，能够包裹一些文字而且还不会打乱段落的布局，最常用的为<a>

none：一些特殊元素的默认display值是它，例如script。display：none通常被JavaScript用来在不删除元素的情况下隐藏或显示元素。***注意他和visibility属性不一样，display：none不会占据他原本的空间，但是设置成visibility：hidden还会占据空间

应用：例如将li元素改成inline，就能够制作水平菜单。

max-width代替width可以更好地处理小窗口，防止出现width过大而出现滚动条的事件

盒子模型

传统的盒子模型（W3C标准）不直接，新增了box-sizing的属性，当设置box-sizing:border-box时，盒子转变为IE模型

由于是新属性所以加上-webkit-、-moz-等前缀来确保所有元素都以直观的方法排版

position属性

static：默认值，不会被特殊定位，表示它不会被positioned，一个position属性被设置为其他值表示会被“positioned”

relative：在一个相对定位的元素上设置top、right、bottom、left属性会使其偏离其正常位置。其他元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙

fixed：固定定位，会相对于视窗来定位，即使页面滚顶也会停留在相同的位置。和relative一样，top、right、bottom、left属性都可以用（不会保留原本页面应有的空隙，也就是脱离文档流。）

absolute：相对于最近的“positioned”祖先元素，如果IP没有“positioned”祖先元素，那么将会相对于文档的body

浮动

另一个布局常用的css属性：float。（可用于实现文字环绕图片）

当然clear属性便用来控制浮动 http://zh.learnlayout.com/clear.html 这里面解释得极好。

     为了防止浮动后后面的元素上移可以队后面的元素clear：left（both）来清除向左浮动（同时清楚向右向左浮动）

     对于浮动图片超过容器导致溢出可以overflow：auto！（如果要支持ie再加上zoom：1）

下面这个利用伪元素的方法是我最近看到的最多的！     

.clearfix:after{content:"."; display:block; height:0; visibility:hidden;clear:both; }

.clearfix{*zoom:1;}

    对于浮动问题水很深可以看一下BFC

    BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

    https://zhuanlan.zhihu.com/p/25321647

    触发 BFC（如果没有触发的话最后还是会外边距取较大值）

    只要元素满足下面任一条件即可触发 BFC 特性：

    body 根元素

    浮动元素：float 除 none 以外的值

    绝对定位元素：position (absolute、fixed)

    display 为 inline-block、table-cells、flex

    overflow 除了 visible 以外的值 (hidden、auto、scroll)

   http://www.daqianduan.com/3606.html（很拉轰的浮动解决方案）

百分比

利用百分比进行布局，甚至还能利用min-width和max0width来限制图片或者内容的最大宽度或最小宽度！

媒体查询

使用百分百布局，在浏览器变窄到无法容纳侧边栏中的菜单，把布局显示成一列：

@media screen and（max-width：600px）and （min-width：300px）；

注：使用meta viewport后可以让布局在浏览器上显示的更好！

inline block

可以使用display属性的值inline-block来实现网格~~的效果！

inline-block会触发一个叫hasLayout的东西，是用来支持旧浏览器的！

注：vertical-align属性会印象到inline-block元素，可以将其值设置为top；需要涉资每一列的宽度；如果HTML源代码中有空格，那么他们之间会有间隙！

（两栏布局，把另外几个div块放在一个display：inline-block的容器里面~~~~）

column

css新属性可以帮助我们轻松实现多列布局：（不要忘了加-moz-、-webkit-前缀）

column-count；column-gap；column-rule：（width、style、color）和border一样；column-width（自己可以设置宽度，但是事先要进行计算哦~~~）；

flex（要加-webkit）

注意：css列在弹性盒子中不起作用；float、clear 和 vertical-align在flex项目中不起作用。

https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html

启动flex布局，在父元素上加上display：flex；那么父元素将会变成flex容器，而子元素也将会变成flex项目；

flex-direction（row；column；row-reverse；column-reverse）；flex-wrap（wrap；nowrap；wrap-reverse）

速记属性：flex-flow:row wrap；

（Main-Axis）justify-content：（flex-start左对齐；flex-end右对齐；center居中；space-between：两端对齐；space-around）

（Cross-Axis）align-items：（stretch（默认值flex项目高度和容器高度相同），flex-start；flex-end；center；baseline）

哈哈哈哈哈

（Cross-Axis）align-content（适用于多行容器）：属性值于align-center相同除了没有baseline；

以上均为父元素；

子元素：order；flex-grow；flex-shrink；flex-basis；

http://caibaojian.com/flexbox-guide.html