display 用于控制布局
每个元素都有自己的默认display
block通常称为块级元素
inline一般称为行内元素
none 一些特殊的元素就是使用的它为默认display值
visibility:hidde跟dispaly:none不同
display:none不会保留元素本该显示的空间
display还有很多的值
设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...
块级元素可以设置宽高等属性值 从而避免它撑满容器
然后设置左右外边距为auto 使其水平居中
元素会占据指定的宽度，剩余的宽度会被一分为二为左右外边距
而当浏览器宽度比设置的宽度还要小的时候
浏览器会显示一个水平滚动条
max-width可以避免出现这个水平滚动条
单词的意思就可以很好的理解出这个属性的含义
盒子模型
一个元素有内边距外边距border还有元素自身的宽高
而当我们设置两个元素大小相同一样居中的时候
给两个元素设置不同的padding的时候
此时元素会呈现不同的形状
我们要避免这种情况
如果你想精确的计算~那我没办法
可是有一种偷懒的方法
那就是box-sizing
这个属性会让padding内边距 border边框不再增加或者缩小它的大小
给页面全局设置。那么全局布局将更为平衡
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
为了兼容性
CSS布局
position这个属性我们很熟悉
position:static表示元素不会被特殊的定位
一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”
relative表示相对定位
不设置偏移值的情况下 它是会与static没有相差的地方
在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
fixed 一个固定定位fixed
相对于视窗来定位
这以为着屏幕滚动他还是停留在相同的位置
和 relative 一样， top 、 right 、 bottom 和left 属性都可用。
absolute
他的表现跟fixed有些相似
它是相对于最近的positioned祖先元素定位的。如果绝对定位position元素没有positioned祖先元素 而是相对于body元素
并且会随着页面滚动而移动
记住一个“positioned”元素是指p osition 值不是 static 的元素。
浮动
float
clear
控制浮动
有时候我们浮动的时候
一个先前元素浮动了
div style="float:left;height:100px;background-color:red;" id="no1"按时打算打算的/div
div style="background-color:green;height:100px;" id="no2">按时打算打算/div
上面的例子实际上no1是先于no2进行浮动的
而此时的no1悬浮在了no2的上面
显然不是我们所要的
我们想要no1浮动在no2之前
那么此时我们给.after于no1的no2
来一个clear:left;也就是清理一下他的元素的左浮动
奇迹就出现了、
clearfix hack
清除浮动
div style="border:5px solid red;"> jpg的尺寸足够大的时候会发现这并不我们要的效果
我们要的是div还包含着img元素
而现在img元素明显悬浮在div上了
这个时候我们需要一个属性
.clearfix{
overflow:auto;
zoom:1;(为了兼容性)
}
div style="border:5px solid red;" class="clearfix"
给父级容器添加overflow:auto
可以解决这种问题！！！
百分比布局
百分比是一种相对于包含块的计量单位。它对图片很有用
计算的宽度时相对于父级容器的
媒体查询
做响应式网页的时候尤其重要
@media screen and (min-width:600px){}
@media screen and (max-width:599px){}
meta viewport
inline-block
内联块
你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子
有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西，你只需要知道那是用来支持旧浏览器的。
你可以使用 inline-block 来布局。有一些事情需要你牢记：
vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
vertical-align 属性设置元素的垂直对齐方式。
说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
column
这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。
.three-column
{padding:1em;
-moz-column-count:3;
-moz-column-gap:1em;
-webkit-column-count:3;
-webkit-column-gap:1em;
column-count:3;
column-gap:1em;}
这里关键在于column-count设置多少列
column-gap设置列之间的宽度
CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。
flexbox (姑且叫弹性盒子模型吧)真是糟糕的英语
新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同
我的理解是
一个元素display:flex之后
这个元素就可以进行flex布局
如果我们给元素内的某些元素定义了宽度
那么此时的剩下的宽度会进行flex的分布
no1{flex:1}
no2{flex:2}
此时剩下的宽度会分成三份 然后no1占据1/3这个样子
display:flex之后
我们还可以进行很多的操作
例如把align-items:center
justify-content:center
此时里面的元素就会进行垂直居中的布局了
还走在路上继续努力学习
感觉近期可以进军css3了。加油！！
今天学习的一些东西~
总结下来，帮助了我过渡到当前的html与css大河中
2016年4月24日23:12:23
github:https://github.com/ZWkang 博文地址:http://zh.learnlayout.com/no-layout.html
CSS布局
· HTMLandCSS, 前端技术