HTML布局有三种,标准流,浮动和布局。标准流是我们熟悉的传统的HTML文档中的文本布局。标准流中,块级元素独占一行,垂直放置。行级元素在水平方向上一个接一个的排列。标准流就是排布在哪里不是由它自己决定,是由它所排的位置决定的。相当于排队,能排在多少取决于前面有多少人。下面来介绍浮动。
浮动
浮动,就是使元素脱离标准流,移动到其父元素指定的位置的过程。
float: left
float: right
相较于设置inline-block,块级元素加浮动不仅可以排成一行设置左对齐,还可以设置右对齐。
关于浮动的面试问题
浮动的子元素无法超出父元素范围,如果父元素有padding,那么子元素无法超出padding
两个div,第一个浮动,如何布局?
三个div,第一个浮动,如何布局?-》补位
两个div,第二个浮动,如何布局?
三个div,第二个浮动,如何布局?
三个div,第一个和第三个浮动,如何布局?-》浮动只对其后的元素产生影响,但是块级元素对前后都产生影响
结论:在工程中,一个父元素下,尽量让所有的子元素都浮动
一个块级元素浮动以后,会产生类似inline-block的特性,宽度是根据自己的内容的最小宽度,而不是父元素的最大宽度。
一个行内元素浮动以后,会产生类似inline-block的特性,可以设定宽度和高度
如何清除浮动?
- 为什么要清楚浮动?
在某些情况下,我们不能设定父元素的高度,但是所有的子元素都是浮动的(脱标),父元素就认为他们不存在,父元素又不能设定高度,想依赖子元素子元素又脱标了,父元素的高度为0,父元素后面的元素会上提。
- 清楚浮动的四种方法
1. 额外标签法
在最后增加一个额外的div,用clear:both去掉浮动属性,W3C推荐的一种方法,增加了一个莫名其妙的标签
2. overflow:hidden
强制父元素计算内部高度
3. after伪元素
4. before、after伪元素
如何确定尺寸?
- 借(chao)鉴(xi)已经存在的网页
1. 使用Chrome的开发者工具,去查找一个元素的宽,高,padding,border,margin
- 得到了一张图片(windows截图)
液晶屏的像素
DPI(每英尺液晶像素的个数,是液晶屏的物理参数)
window本身的缩放,Chrome的缩放
2. 使用画笔,用选择框选中,像素数/window缩放比例
3. 使用PS,用切片工具,像素数/window缩放比例
本站技术原创文章,是由作者:常春 创作,如若转载请注明原文及出处:https://www.aiyouseo.com/jianzhan/1599.html