服务热线 400-660-5555

南京网站建设
首页 站内资讯

南京网站建设

站内资讯
南京网站建设 / 站内资讯 / 行业资讯 / 正文

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

来源: All文章
发布时间:2023-03-22 15:13:33

  在网站的开发中,经常遇到的前端页面的css样式问题的一些记录。

  • 当子元素设置浮动的时候,父元素不设置高度的话,就会撑不开,那么父元素则需要清除浮动的;
第一种方法是父元素设置overflow:hidden;内容增加得多的时候,容易令内容被影藏,不能显示溢出元素,例如子元素有设置box-shadow,有一侧的阴影则会被影藏掉了。

  第二种方法,用clear:both;需要在最后一个浮动的子元素后面添加一个新的标签,设置它为clear:both;即需要添加没有意义的标签。

  第三种方法如下图,利用设置伪元素after来实现浮动的清除。设置*zoom:1;是在ie6清除的;这种方法是相对其他更好的。

  2.calc,有时候网站内容有需要做几个宽高相同的自适应内容盒子,例如三个,每个均等分,宽度3

  3.33%的时候,还有0.01%间隙,这时可以用calc,例如下图:就能把100%均等分成三份。

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

  中企动力为客户提供网站建设一条龙服务,但如果贵公司有设计师,已经做好了设计图,我们也可以承接前端制作和后端开发的工作。

* 文章来源于网络,如有侵权,请联系客服删除处理。
在线 咨询

添加动力小姐姐微信

微信 咨询

电话咨询

400-660-5555

我们联系您

电话 咨询
微信扫码关注动力小姐姐 X
qr