1. 爱优网络SEOM信息流营销首页
  2. 网站建设

关于CSS浮动布局

HTML布局有三种,标准流,浮动和布局。标准流是我们熟悉的传统的HTML文档中的文本布局。标准流中,块级元素独占一行,垂直放置。行级元素在水平方向上一个接一个的排列。标准流就是排布在哪里不是由它自己决定,是由它所排的位置决定的。相当于排队,能排在多少取决于前面有多少人。下面来介绍浮动。

浮动

浮动,就是使元素脱离标准流,移动到其父元素指定的位置的过程。
float: left
float: right

关于CSS浮动布局

相较于设置inline-block,块级元素加浮动不仅可以排成一行设置左对齐,还可以设置右对齐。

关于浮动的面试问题

浮动的子元素无法超出父元素范围,如果父元素有padding,那么子元素无法超出padding

关于CSS浮动布局
两个div,第一个浮动,如何布局?
三个div,第一个浮动,如何布局?-》补位

关于CSS浮动布局
两个div,第二个浮动,如何布局?
三个div,第二个浮动,如何布局?

关于CSS浮动布局
三个div,第一个和第三个浮动,如何布局?-》浮动只对其后的元素产生影响,但是块级元素对前后都产生影响

关于CSS浮动布局
结论:在工程中,一个父元素下,尽量让所有的子元素都浮动

关于CSS浮动布局
一个块级元素浮动以后,会产生类似inline-block的特性,宽度是根据自己的内容的最小宽度,而不是父元素的最大宽度。
一个行内元素浮动以后,会产生类似inline-block的特性,可以设定宽度和高度

如何清除浮动?

  • 为什么要清楚浮动?

在某些情况下,我们不能设定父元素的高度,但是所有的子元素都是浮动的(脱标),父元素就认为他们不存在,父元素又不能设定高度,想依赖子元素子元素又脱标了,父元素的高度为0,父元素后面的元素会上提。

关于CSS浮动布局

  • 清楚浮动的四种方法

1. 额外标签法
在最后增加一个额外的div,用clear:both去掉浮动属性,W3C推荐的一种方法,增加了一个莫名其妙的标签
2. overflow:hidden
强制父元素计算内部高度
3. after伪元素
4. before、after伪元素

关于CSS浮动布局

关于CSS浮动布局     关于CSS浮动布局

如何确定尺寸?

  • 借(chao)鉴(xi)已经存在的网页

1. 使用Chrome的开发者工具,去查找一个元素的宽,高,padding,border,margin

  • 得到了一张图片(windows截图)

液晶屏的像素
DPI(每英尺液晶像素的个数,是液晶屏的物理参数)
window本身的缩放,Chrome的缩放
2. 使用画笔,用选择框选中,像素数/window缩放比例
3. 使用PS,用切片工具,像素数/window缩放比例

本站技术原创文章,是由作者:常春 创作,如若转载请注明原文及出处:https://www.aiyouseo.com/jianzhan/1599.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注