CSS小结

快内元素与行内元素

	块级元素	行内元素
常见元素	div、p、form、ul、ol、li	span、strong、em
特性	独占一行，默认情况下，其宽度自动填满其父元素宽度	不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
width、height属性	可以设置，设置了宽度还是独占一行	无效
margin和padding属性	可以设置	水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果， 但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
对应的相关display属性	block	inline
切换	display:inline变成行内元素	display:block变成块级元素

关于浮动

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；

如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

关于清除浮动

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

overflow的作用

规定溢出的内容该如何发生，是隐藏呢，还是出现滚动条的方式呢

white-space的作用

规定“空白”是 如何发生的，是不换行呢，还是忽略呢

height与max-height区别

height是固定了高度，max-height是平常的时候auto，但不能超过某个界限

设置了div为浮动后再去添加margin：auto属性是无效的

要想实现水平居中，在div外嵌套一个居中div

div 的width:auto

【position:static（默认）/relative 】实际宽度（width+border+margin）等于父元素width值，与内容长度无关；
【position:absolute】实际宽度（width+border+margin）取决于其内容的长度，但是最大不超过该元素的第一个非static定位的父元素的width右侧边界；
【posiition:fixed】实际宽度取决于其内容的长度，但是最大不超出浏览器窗口

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性

使用margin:0 auto设置居中，需要注意的地方

内敛块元素和内敛元素要 变成块元素才能使用margin:0 auto居中(像image元素);
没有宽度的时候即使设置成margin:0 auto;也不可以居中;
总结：一般要对元素设置display:block; width:?px; margin:0 auto;才可以实现居中

CSS之四种定位的理解

1、Static
这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。不能使用top，bottom，left，right和z-index。
2、Relative
相对定位方式，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。
3、Absolute
绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。可以使用top，bottom，left，right进行位置移动，亦可使用z-index在z轴上面进行移动。当元素为此定位时，如果该元素为内联元素，则会变为块级元素，即可以直接设置其宽和高的值；如果该元素为块级元素，则其宽度会由初始的100%变为auto。
注意：当元素设置为绝对定位时，在没有指定top，bottom，left，right的值时，他们的值并不是0，这几个值是有默认值的，默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。（可能我没有描述的很清楚，建议自己写个示例看看效果）
4、Fixed
绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。