如何并排显示多个div:
1.利用绝对定位方法;
2.利用float属性,可能覆盖掉其他块的内容(另外float只能用于块级元素);
3.设置display:inline-block属性
4.margin属性设置为负值
小技巧:最外层的div的边框设置一定的宽度和颜色,里面的padding就可以都设为0,同时还可以在里面设置padding,形成双边框的效果。
在设计网页时,设置了div为自动高度或不给height值,当div设置背景时在IE6可以显示背景颜色,但是IE7,8却不显示。解决办法如下:1、把height:auto;改成height:100%;overflow:hidden;原理:IE6可以再不给高度的情况下自动识别div高度而IE7,8需要指定高度;如果上述方法不行还有一种办法2、在div的下面在加一个清除div<div style="clear:both"></div>原理:加一个清除div是为了让浏览器计算高度。
css中,元素会有外边距叠加的问题,行内元素上下边距不考虑,左右边距加起来即为两者间的距离;块元素则比较复杂,具体有三种情况。其一,第一个块元素边距为正,第二个块元素边距为负,两者就会发生叠加,即上下的距离为:正+负;其二,两个块元素都是正值也会发生叠加,即上下间的距离为:取大正;其三,父子关系的两个块元素间的叠加,若父元素没有任何边框或补白(padding)设置,则子元素的外边距代表整个块的外边距!总结:普通文档流中拥有块级布局属性的元素都会发生叠加问题,只有行内元素、浮动元素或定位元素之间的空白边是不会发生叠加的。外边距设置中,margin可以设置负数属性,此时块将向相反的方向移动,甚至可以覆盖在负块或者其他元素的上方,达到破局的效果,有时会给页面文本以画龙点睛的效果。
注意:在宽度高度确定时,同时使用上、右、下、左四个方向的距离,以top和left为准,right和bottom忽略。但是如果宽度高度没有设置,同时定义了上、右、下、左四个方向的距离就会出现bug,此时IE浏览器以left、top为准,宽度高度按内容自适应;而firefox则满足四个方向的距离,宽度高度根据父元素或根元素的大小自适应!