css定位总结

块状元素：display:block可以作为其它元素的容器，排斥其它元素和他在一行

宽(width)高(height)值都是有作用的<div><p><ul><li>

 

内联元素：

 

 

 

内容属性； 内容本身的宽=width 内容本身的长=height

margin: 20px 0 0 2px  0表示不设置

因为浏览器的margin padding 都有默认的值，因为兼容性，所以会表现的不一样，这个是致命的东西，

所以我们在写css代码是需要把所有的默认值都设置为零，不要这样写
*{margin:0;padding:0}这样写效率太低，所以要用到什么元素就把什么元素清零

css 布局的方式有三种：

1 默认的，就是按文档流的顺序

2 浮动布局，就是用float

3 定位布局的方式：应用position

浮动：浮动是将，块元素的，独占一行的行为取消，允许别人

浮动的对象，会先漂浮起来，后动

Margin:40px auto;时，div必须是有宽度的，不然就没有意义

 

当父元素，没有指定高度时，并且子元素有浮动，这时，这个父元素的高度不会自动

增加

解决：1 额外标签：

 

定位：绝对定位，从对象的 文档流中分离出来，通过设置，left,right,top,bottom

相对于父级对象进行绝对定位，如果不存在，则是相对于body

相对定位：不从文档流中分离出来，想对自己进行相对定位

 

定位自己总结

1    首先将元素分类：

▲  块级元素：<div>、 <p> <ul> <li>，独自占用一行的位置，

▲  内联元素：<span><a>等  可以与其它内联元素在一行上，

 

2        布局的三种方式：

▲  按文档流：即按照html的顺序

▲  按定位（position）：有relative、absolute、static、fixed

▲  按浮动：float

☞relative(相对定位)：元素相对自己的位置偏移某个距离，定位后扔是文档流的一部分

☞absolute(绝对定位)：元素相对父级框定位，元素框从文档流中消失，就和不存在一样，（注意relative和absolute都有的时候，要用概念去理解）

☞fixed：和绝对定位一样，只是父级框为窗体罢了

☞static(无定位)：即默认值，按照文档流的样式

浮动定位（float）：浮动框从文档流中消失，像不存在一样，浮动可以向左向右浮动，浮动浮动，先浮后动，设置浮动的元素先浮到另一层排列，原来的块状属性没有了，在另一层上可以并列以行，其后的各种定位会视其消失了，马上补上。不仅是块级元素可以浮动，内联元素也可以浮动

注意：在ie567中如果你的内容宽度大于div的宽度，会把div撑破，导致其它元素被挤开，解决办法是在外面再套一层div

 

Clear:清除浮动，用在不想当元素前面的元素应用了浮动，后面的元素不想顶上去的时候，就清除浮动

注意外边距合并的问题