css整理

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;
				}
			}