1、display:block //将标签改成块元素,块元素是单独占一行的。
2、clear:both; //清除浮动实现换行。
3、white-space:break; //这个一般适用在英文文章中的折行。
可以根据上面的几个能实现换行的样式,只需要将对应标签的对应属性删除就可以了。
1/6新建一个html文件,命名为test.html,用于讲解css中如何解决h标签独自占用一行。
2/6
在test.html文件内,使用h3标签创建一行文字,用于测试。
3/6
在test.html文件内,给h3标签添加class属性,设置为myway。
4/6
在css标签内,通过class定义h3标签的样式,使用background属性设置它的背景颜色为红色。
5/6
在css标签内,再将display属性设置为inline,将h3标签转变为内联元素。
6/6
在浏览器打开test.html文件,查看实现的效果。
css浮动(float:none | left | right)在网页布局中我们经常使用的属性,也是经常会出现Bug的地方。首先我们要搞清楚为什么要用到float呢?
网页布局中块级元素,在页面中独占一行,自上而下排列,也就是传说中的文档流。
可是我们要实现左右模块该怎么实现,这就需要用到float了,当我把第三个设置左浮动
然后我们在测试第四个也设置左浮动
下面我将第二个和第四个右浮动
我们在测试将第三个浮动取消
可是在做网页布局的时候不想浮动元素影响遮盖下一个元素该怎么解决?
这个时候就需要我们清除浮动(clear:both | left | right)
上面的例子 希望第三个左浮动,第二个和第四个右浮动,第五个不受影响在最下面。