怎样让区块元素在同一行显示?有两种办法:
- 设置区块元素的display为inline-block
- 设置浮动
对display:inline-block的理解:
1)inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,但是会解析换行符,允许空格,同时可以设置宽度和高度属性。
2)IE8不兼容该方法,修改方法为:
先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果),代码:
div {display:inline-block;...}
div {display:inline;}
3)使用该方法会使两个元素之间产生间隔,怎样去除inline-block两个元素之间的间隔呢?有以下方法
a. 将margin设为负值;
b. 将两个标签的空格(换行)删掉或用<!-- -->注释掉;
c. 将父元素字体大小设为0,在子元素上重新设置字体大小;(较推荐)
d. 父元素设置letter-spacing为负值,子元素letter-spacing为0;
e. 父元素设置word-spacing为负值,子元素word-spacing为0;
关于浮动(float:left/right/none):
- 浮动会使元素脱离文档流,遇到父级边界或者同级浮动元素时停住,会使父元素高度崩塌
- 清除浮动的几种方法:
- 给父元素设置高度(不推荐)
优点:简单、代码少、容易掌握
缺点:高度有时候是未知的。当浏览器宽度变化时,元素会换行,需要重新定义高度
- 给父元素设置overflow:hidden/scroll/auto(不推荐)
优点:简单、代码少、浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
- 给浮动元素后加一个空标签,样式style=“clear : both ;”(不推荐)
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:会增加一个毫无意义的空标签
- .clearfix:before,.clearfix:after{display:block;content:"";}
.clearfix:after{clear:both;}
.clearfix{*zoom:1}(兼容ie 触发haslayout)(推荐)
并给浮动元素的父元素添加clearfix类
优点:浏览器支持好、不容易出现怪问题
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持
- 给浮动元素的父元素设置overflow:auto(不推荐,仅了解)
优点:简单、代码少、浏览器支持好
缺点:内部宽高超过父级div时,会出现滚动条。
- 给父元素也设置浮动(不推荐)
没有优点,会带来新的浮动问题
- 给父元素添加display : table属性(不推荐)
将父元素div变为表格,没有优点,会带来一些未知的问题
- 给浮动元素后添加标签<br style="clear:both"/>(不推荐)
父子级元素包含的时候子级的margin-top会传递给父级
解决办法 : 1.给父级添加border;
2.父级使用overflow:hidden;
3.不要使用margin-top 给父级用padding-top