html+css float浮动问题:红色div为何会挤走第一行文字

html-css043

html+css float浮动问题:红色div为何会挤走第一行文字,第1张

HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。

你可以把网页布局想象成建造一栋楼房,标签(如div,span,a等)就是建造房屋的砖块,只不过这砖块可以是大的也可以是小的,可以是宽的可以是窄的,而样式css则更像是设计图纸,指挥着标签把房屋建造成自己想要的样子,比如外形的结构,房屋的装潢,而css命令很多都有各自的特性,所以其实最难的是css的学习部分,不仅要学习各个css样式产生的效果,还得了解这些特性所带来的影响

学css代码也不要以学英语的方式去学,当然咯,有英语基础自然更好,我个人就是英语烂得要死却又干了这行十年,你首先得把一些常用的css指令记住就好,比如背景background,边框border,高度height,宽度width,颜色color,及背景边框的颜色,多的样式我就不举例,你要学习的话早晚都得接触,你最好就是先自己一点一点的自己写一写然后再看看效果,然后再在这些标签上添加新的css样式或者指令再看效果变成怎样了,这样就能判定新的css是什么意思或者所能达成的效果,因为只有自己脑子里有了这些印象才能把这玩意学好,至于后续的精通就得通过长时间的学习和工作来不断的补充完善

我不教你具体的代码学习,只能给你通俗的讲解一些学习方法和思路,让你在刚接触的时候不至于因为觉得太难而放弃,希望你以后能学好点吧

通俗的说给你听好了,首先你要清楚div的形状只能是矩形,你也可以理解成长宽高都可控制的长方形也行,div盒子的编写格式是<div></div>,每个盒子必须要有开头如“<div>”以及要有结尾如“</div>”,这样才是一个完整的div盒子,两者之间可以插入内容或者其他标签盒子,如:

<div>文字</div>;

<div><div>文字</div></div>;

其实再说的通俗易懂一些,div+css布局就相当于建房子,div就是砖块,而css就是控制指令,也可以说是装修工人,可以把砖块div用各种各样的方法来建成房子并且再进行装修,比如调整div的大小、背景色、边框及其他各种样式,因为每面墙的样子不一样,所以就得通过很多的div来填充或者组成一个整体,学div你只要转换思路,就当是学习怎么用div玩积木或者俄罗斯方块