关于CSS简单布局常用的基础知识

一、属性的继承问题

文本类、字体、颜色，子元素会继承父元素的设置

布局类、边距、大小、边框、背景，不会继承

二、定位

1、相对定位：相对于自己原来的位置

2、绝对定位：相对于第一个定位的祖先元素

父 position:relative

子 position:absolute

父元素也需要定位，子元素才会有作用

3、固定定位：相对于屏幕，一直固定不动

4、z-index 显示优先级，只能设置给已经定位的元素

三、布局相关属性

1、尺寸 width/max-width/min-width/height/max-height/min-height

2、内边距(补白)padding

3、外边距margin

4、display   none/block/inline/inline-block

display:inline-block 不会独占一行，其他同块状元素

不同的元素display的默认值不一样

5、visibility  hidden/visible/collapse

visibility隐藏后，仍然会占位

display隐藏后，不会占位！！！！常用

6、overflow  visible/hidden/auto/scroll

7、float:left/right常用!

8、clear:清楚浮动对后面元素的影响 both/left/right

四、margin塌陷的问题

嵌套关系的margin塌陷，为子盒子添加margin-top:10px,子盒子和父盒子之间并没有出现期望的10px间隙，而是父盒子与子盒子一起与页面顶端产生了10px的间隙。

解决方法：

1、为父盒子设置border,为外层添加border后，父子盒子就不是真正意义上的贴合

2、为父盒子添加overflow:hidden

3、为父盒子设定padding值