css 需要注意的地方

四种选择器：
1、id选择器
#idname { font-size:20px;}
2、class选择器
.classname {font-size:20px;}
3、html选择器
body { font-szie:20px;}
4、父子选择器
.classname span {font-size:20px}
优先级：id > class > html

块元素与行内元素
1、行内元素（inline element）： <span> <a><img>
特点：只占内容宽度，不换行
行内元素只能容纳文本和其它行内元素
转快元素: display=block

2、快元素：<div><p>
特点：不管内容多少，要换行，同时占满整行
块元素可以容纳文本，行元素，快元素
转行内元素: display=inline
注意：转为行内元素的话,内容有多少，就占多少，设置宽高都不起作用

3、一些css属性对行内元素不起作用<(margin,left,...)

流
1、标准流：网页布局中，写前面，就显示在前面

2、非标准流：网页布局中，使用非标准流的方式布局（使某个元素，脱离它本身的位置）

盒子模型

margin 、border、padding、content MB PC
1、margin 过大，就出盒子,padding 就将盒子撑大

浮动：左浮动 右浮动 清除浮动
1、左/右浮动。默认情况下，div纵向排列。使用左浮动，块元素会往左移动，直到碰到边框或者其他元素边框,如果放不下，会自动换行放置，然后空出右面或者左面给其他元素放置。

提示：
针对div, display 转换 与 float 的不同：
1、display 转为行内元素后，内容有多少，就占多少，设置的宽高不起作用
2、float 则是按照设置好的宽高，进行要求的样式进行排列，空出的位置，下一个元素进行放置。

定位：
1、static定位
默认方式，标准流
对static而言，left top属性不起作用
2、relative定位（相对定位）：相对于原来的位置，形状不变，原来所占空间保留
position: relative;
top:10px;
left:10px;
3、absolute定位（绝对定位）:元素框从文档流完全删除，让出原来所占的空间
特别强调：absolute定位，是相对于离自己最近的非标准流而言