css中最核心的几个概念

1.元素类型：

block level Element（块级元素）
inline element(内联元素)
要想设置行内元素的宽高，应该设置成
display：inline
若既想让元素在行内显示，又能设置宽高，可以设置
display:inline-block;

2.盒子模型（box model）

不同浏览器对宽度的诠释是不一样的，符合w3c标准的浏览器浏览器认为宽度只等于其content的宽度
在IE中（低于ie9）下，最终的宽度为
宽度 = width+margin
其他浏览器 =width +paddding +border +margin
在css3中加入了box-sizing属性，设置成
box-sizing : border-box;
border和padding就被包含在宽高之内了，建议是加上啊！
两个特殊的情况：

无宽度——绝对定位（position：absolute）元素
无宽度——浮动（float）元素

3.position：

它的值如下

static 元素在页面中占位置，不可以使用top,left,right,bottom来移动位置
relative 相对定位，相对于元素的正常位置进行定位，元素在页面中占据位置。可以使用top,left,right,bottom
absolute绝对定位，相对于最近一级的定位不是static的父元素来进行定位，在页面中不占用位置。可以使用top,left,right,bottom来移动位置。
fixed一种特殊的absolute，相对于浏览器窗口来进行定位
inherit 从父元素继承position属性的值
每个网页都可以看成由一层一层页面堆叠起来的

页面结构

当position设置成absolute或者fixed的时候，会发生下面三件事
把该元素望z轴方向移动了一层，元素脱离了普通流，所以不再占据原来那层的空间，还会覆盖下层的元素
该元素变成块级元素
如果该元素是块级元素，则元素的宽度由原来的width：100%（占据一行），变成auto

4.float：

把元素浮动，它的取值一共有四个：left，right，none，inherit
注意一点：div的顺序是html代码中div的顺序决定的。靠近页面边缘的一端是前，远离页面的一端是后

div的顺序

A浮动，它的上一个元素也是浮动，则会跟在其后面，如果一行放不下A元素，则A元素就会被挤到下一行！若它的上一个元素是标准流中的元素，则A的相对垂直位置不会发生改变，也就是说A的顶部总是和上一个元素的底部对齐

几个要点：

只有左右浮动，没有上下浮动
元素设置成float后，会脱离普通流（和position：absolute；一样），不再占用原来那层空间，还会覆盖下一层的元素
浮动不会对上一层的元素有任何影响
浮动之后，该元素的下一个兄弟元素会紧贴到该元素之前没有设置 float 的元素之后（很好理解，因为该元素脱离普通流了，或者说不在这一层了，所以它的下一个元素当然要补上它的位置）
该元素将变成块级元素，相当于给该元素设置了display：block；

清除浮动：

元素浮动之前，也就是标准流中是竖向排列的，而浮动之后可以理解为横向排列，而清除浮动可以理解成打破横向排列，关键字：clear

语法：clear:none|left|right|both
left:不允许左边有浮动对象
right：不允许右边有浮动对象
both:不允许两边有浮动对象

注意：这个规则只能影响使用清除的元素本身，不嫩影响其他元素