扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
一、就 overflow 这个样式而言,题主应该了解,或者自行百度下:(以下摘自百度百科)
创新互联建站专注于枞阳网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供枞阳营销型网站建设,枞阳网站制作、枞阳网页设计、枞阳网站官网定制、成都小程序开发服务,打造枞阳网络公司原创品牌,更为您提供枞阳网站排名全网营销落地服务。
CSS属性
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
基本特性
适用于:block-level and replaced elements
JavaScript 语法:object.style.overflow="scroll"
基本语法
overflow-x overflow-y
overflow : visible | auto | hidden | scroll
二、关于清除浮动,其中就有使用 overflow 来达到闭合元素来修复高度坍塌的现象。
① overflow:hidden;,
只要使用了这个样式的元素都会闭合,触发 hasLayout;
② overflow:auto;zoom:1;,
在不使用 overflow:hidden 的场景下,需要触发 hasLayout ,可以用 zoom: (normal以外的值) 这个样式;
③ overflow:auto;height:1%;,
在不使用 overflow:hidden 的场景下,需要触发 hasLayout ,可以用 height: (auto以外的值)这个样式,1%是为了在实现非0。
可以参考以下:
推荐俩种依靠clear属于清除浮动的方法,推荐第二种,探究的记录在后面,赶时间的看个开头就好了。
1. 在受浮动坍塌的父级元素结束标签前,添加一个高宽为0的空div,然后设置 clear:both
2 .创建一个clearfix样式,并使用伪类元素 after 添加样式到父元素上
无论是块级元素还是行内元素设置了浮动之后都会生成一个块级框,并且可以编辑它的宽高,此时该浮动元素就脱离了文档流。举个例子,把网页看成一个三维的泳池,文档流在泳池底部,给文档流中一个元素设置了float之后,它就从这个网页的泳池底部浮动到了水上。此时同级的块级元素会无视float元素在网页上的位置进行布局。但是行内元素并不会被遮挡,而是像和它一起浮在水面上一样环绕这个浮动元素。
根据前面介绍,元素设置float后好像会从网页上浮一样,脱离文档流。这样的话,如果父级元素原本没设置高度,计划用子元素撑开父级元素。此时子元素因为float上浮,则父级元素的高度就会因为自身没设置而坍塌。
来个示例 ( 下文都是依据这个示例来讨论,故先给出HTML结构和CSS样式 ):
让我们再打开开发者工具具体看看
然后让我们把父元素也一同浮动看看
例如:
此时背景色为粉色的 ch2 就会被浮动的 背景色半透明的ch1 覆盖,但是ch2的字体还是环绕着ch1
如果让ch2 也浮动,则ch1 和 ch2 就相当于一同浮起到这个网页泳池的水面上。
另外,ch2 虽然不浮动起来时会被 同级ch1遮挡,但是ch2 它内部的行内元素却是环绕 ch1 的 ,同时 ch2 内部的块级元素还是会被浮动起来的ch1遮挡。
解决父元素高度坍塌的问题,其实可以给父元素指定个高度,但这样就没有父元素高度自适应的意义了;另外全部元素一起浮动也能解决父元素坍塌,子元素被遮挡的问题,但这本质上只是将所有元素一起浮动到顶端,并没有解决问题,反而还会影响另外的元素排列。下面介绍clear属性来清除浮动
那我们先来看看 clear 属性有什么用
我们稍稍改动一下上面的例子在 ch2 下加一个 p 标签然,然后改动一下 ch1 和 ch2 的样式让它们俩高度不一样。
若此时我们给p元素也加上浮动呢?
样例:
1,是继承关系,.Hot样式继承.itemHit样式
2,好处:.Hot继承.itemHit已经拥有的样式,去除冗余CSS代码,突出了CSS的继承思想
3,可以分开写,但是.Hot无法拥有继承CSS样式,只拥有本身CSS样式
问题1,很显然是不合理的,增加一个属性可以,改变就不行。如果硬要这样做,可以采取细一点的方式,例如为a定义一个样式: .apage a 和 .bpage a 在A页面是div class="apage"a ....../a/div 而在B页面 则是 div class="bpage"a ....../a/div
问题2,尽量将所有的样式表都放在一个单独的CSS文件里,网站所有的页面都调用这一个文件。要明白,CSS、HTML 都不是运行程序,而只是代码,效率和文件的大小有很直接的关系,如果10个页面10个CSS,明显的没有达到这样的目的。
浏览器打开一个页面时,同时也下载了CSS到IE的临时文件夹中(除非CSS不是一个单独的文件),再打开其他页面,如果引用的是同一个CSS,就不会再进行下载。显而易见,下载10个文件要比下载1个文件效率低得多,即使这1个文件比10文件加起来还大。
回复楼下的看法:一个网站的所有页面不可能有非常多的区别,况且CSS是在客户端执行,完全不涉及到服务端,况且浏览器是先看样式名,再根据样式名去查找相符合的样式。不是把所有的样式都遍历一次,你所说的打开页面慢、CUP频率高貌似不大可能出现。即使有,那也不是因为样式表很大的缘故,即使是因为样式表非常大,这样的影响也小到可以忽略,即使明显,也只是在客户端,和客户机有较大关系,对服务端不会造成任何压力。
如果你很不喜欢这样的方式,至少可以把布局大致相同的页面引用某一个CSS,完全不相同的引用另一个CSS。但是一个页面一个CSS,绝对更不可取。
1、给父元素定义上边框
2、给父元素定义上内边距
3、给父元素添加 overflow:hidden;
4、添加浮动
5、添加绝对定位
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流