《精通CSS+DIV网页样式与布局》第十章理解CSS定位与DIV布局学习笔记
<div>是块级元素，<span>是内联元素。div能包含span，反之不能。
盒子=margin+border+padding+content
盒子的width=width+padding，height=height+padding。说明盒子内content的位置由设定width后，padding大小来决定。
border属性有color,width,style。border的width有thin，medium，thick和具体的数值。border的style属性有none，hidden，dotted，dashed，double....其中none和hidden效果一样，只是运用表格时，hidden能解决边框冲突问题。
border当然可以设置border-left,border-right,border-top,border-bottom四条边。
给元素设置背景颜色background-color时，在IE里面，作用区域为content+padding；在Firefox里面，是cotent+padding+border
如果父元素指定了height和width，因为height和width包含了padding，所以content会受到挤压。
两个行内元素并排时，它俩的距离是第一个的margin-left+第二个的margin-right.
两个块级元素，之间的距离是第一个的margin-top和margin-bottom之间的最大者。
父子元素，子块的margin以父块的contetn为参考 。
当父元素的高度为a，子元素的高度为b，b+子元素的margin>a，IE会自动扩大，保持子元素的margin-bottom的空间，及父元素自身的padding-bottom控件。而firefox不会，它会保证父元素的height高度，这时子元素将超过父元素的范围。
margin为负数，则朝相反方向移动。
父子元素，子元素margin为负数，则子元素“脱离”父元素。
-----------------------------------------
父子元素，子元素son1，子元素son2，未设置float时，它的宽度撑满了整个父块，空隙是父块的padding+son1的margin。设置了float为left，son1的宽度仅仅是它内容本身content加上自己的padding。son1的位置是父块的padding-left+son1的margin-left。son1的float为right时，son1的位置是父块的padding-right+son1的margin-right。
son1设置float:left之后，son2未设置，son2的content不会与son1重叠，可能son2的pading，border，margin会和son1重叠。
son1未设置float，son2设置float:right之后，son2向右浮动到父块的右边，父块高度变短，但son1没变化。
son1和son2都设置float:left之后，子块2不围绕子块1，并排向父元素左侧排列
position属性有四个值，分别为static，absolute，relative，fixed。static为默认值。
当子块position设置为absolute之后，就与父元素没有任何关系，子元素只跟<body>元素有关。 子块宽度也变成原来的。
当子块的position设置为relative之后，内容还是属于父元素，位置则相对于自己原来的位置偏移。子块宽度依然撑满父元素，如果你想不撑满，请设置float:left，或者指定其width。
当有两个子块son1和son2，son1设置position:relative之后，son2不改变原来位置。
当设置position属性后，z-index用来设置层次高低，谁覆盖谁。
------------------------------总结
如果一个div默认宽度是撑满父元素。设置其width，则宽度由width=content+padding决定。设置其position为absolute，宽度也是由content+padding决定。
设置了width，设置了padding。pading不变，content在变。width不变，padding变，content变。
height为0，padding不变，意味着content为0，但真正内容，不消失，可能溢出div外。
两个div的上下margin距离，由两者的最大margin决定，而不是总和。
当父元素设置position:relative之后，子元素的absolute定位，就以父元素为准了。
合乎自然而生生不息。。。
浙公网安备 33010602011771号