css教程
http://www.w3school.com.cn/css/index.asp
一.margin合并
http://www.w3school.com.cn/css/css_margin_collapsing.asp
负marin
当元素不存在width属性或者（width：auto）的时候，负margin(left或right)会增加元素的宽度 margin-top为负值不会增加高度，只会产生向上位移 margin-bottom为负值不会产生位移，会减少自身的供css读取的高度
二.absolute
1.元素框从文档流完全删除
2.并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。
相对于最近的已定位祖先元素(还有position),如果不存在已定位的祖先元素，那么相对于最初(body)的包含块。
3.元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
4.元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
来自 <http://www.w3school.com.cn/css/css_positioning.asp>
例:若absolute在relative内
<div>范德萨发生地方第三方第三方都是范德萨范德萨发</div> <div style="position: relative;color:red;border:1px solid red;"> relative之中的元素.仍占有空间.默认位置不变 <div style="position: absolute;left: 40px;border: 1px solid blue;color:blue;">relative内部的absolute,相对于父relative元素.已经脱离文档流,不占有空间,看父元素边框</div> </div> <div style="color:yellow;border: 1px solid yellow;">absoulute之后的p元素,注意absolute中的已经脱离文档流</div> <div>范德萨发生地方第三方第三方都是范德萨范德萨发</div>
三.relative
1.相对于它在普通流中的位置(相对于自身位置)
2.元素框偏移某个距离。元素仍保持其未定位前的形状
3.它原本所占的空间仍保留。
相对定位前的位置保留(但是一片空白,原始位置会影响到之后元素的位置),
相对定位后的元素不会影响到其他元素的位置(相当于脱离文档流,但是会遮挡,使用z-index)
若relative放在absolute里
<div>范德萨发生地方第三方第三方都是范德萨范德萨发</div> <div style="position: absolute; color:red;border:1px solid red;"> absoulute之中的元素,已经脱离文档流.且原始位置不再占有.默认位置不变 <div style="position: relative;left: 40px;border: 1px solid blue;color:blue;">absolute内部的relative,相对于自身原来的位置.啦啦啦啦啦发斯蒂芬斯蒂芬水电费第三方第三方.由于它处于absolute里,已经脱离文档流.</div> </div> <div style="color:yellow;border: 1px solid yellow;">absoulute之后的p元素,absoulute之后的p元素</div> <div style="color:yellow;border: 1px solid yellow;">absoulute之后的p元素,absoulute之后的p元素</div>效果如下四.fixed
元素框的表现类似于将 position设置为 absolute，不过其包含块是视窗本身。
来自 <http://www.w3school.com.cn/css/css_positioning.asp>
四.浮动
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
来自 <http://www.w3school.com.cn/css/css_positioning_floating.asp>
图片浮动后,图片不会遮挡文字
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
来自 <http://www.w3school.com.cn/css/css_positioning_floating.asp>
五.flex布局
.box { /* * 任何容器都可以指定为flex布局.包括行内元素 设为flex布局后.子元素的float,clear,vertical-align属性将失效 * */ display: flex; /*display: inline-flex;*/ border: 1px solid black; /*flex-direction: column-reverse;*/ /*行内显示反转*/ flex-direction: row-reverse; /*flex-wrap:一条轴线上排列不下(如何处理),nowrap不换行,wrap换行*/ flex-wrap: wrap; /*可以使用flex-flow:row nowrap同时指定flex-direction和flex-wrap属性*/ /*justify-content:定义了项目在主轴(横向)方向上的对齐方式,center:居中对齐*/ justify-content: center; /*align-items:指定在交叉轴上(竖向)的对齐方式,flex-end:底部对齐*/ align-items: flex-end; }六.@media自适应宽度
@media only screen and (min-width: 960px) and (max-height:1199px) { #page { width: 960px; } #content { width: 650px; } #second { width: 250px; } }