块状元素: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:清除浮动,用在不想当元素前面的元素应用了浮动,后面的元素不想顶上去的时候,就清除浮动
注意外边距合并的问题