网站前端制作之css清除浮动和calc()函数

2023-02-20 分类：网站建设

在网站的开发中，经常遇到的前端页面的css样式问题的一些记录。当子元素设置浮动的时候，父元素不设置高度的话，就会撑不开，那么父元素则需要清除浮动的；第一种方法是父元素设置overflow: hidden; 内容增加得多的时候，容易令内容被影藏，不能显示溢出元素，例如子元素有设置box-shadow ，有一侧的阴影则会被影藏掉了。
第二种方法，用clear:both;需要在最后一个浮动的子元素后面添加一个新的标签，设置它为clear:both;即需要添加没有意义的标签。

网站前端代码1

第三种方法如下图，利用设置伪元素after来实现浮动的清除。设置*zoom: 1;是在ie6清除的；这种方法是相对其他更好的。
2.–calc，有时候网站内容有需要做几个宽高相同的自适应内容盒子，例如三个，每个均等分，宽度33.33%的时候，还有0.01%间隙，这时可以用–calc，例如下图：就能把100%均等分成三份。

网站前端代码2

在使用–calc需要注意在运算符的前面和后面都需要添加一个空格，如上图。除了上图的“/”、“-”，还能用“+”的和“*”的，而且可以用图上的百分比和像素作为单位，此外还能用em和rem。

标题名称：网站前端制作之css清除浮动和calc()函数
本文地址：https://www.cdcxhl.com/news0/238450.html

成都网站建设公司_创新互联，为您提供微信公众号、电子商务、网站策划、外贸网站建设、定制网站、域名注册

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容