css怎么实现自适应

发布时间:2021-07-23 17:16:23 作者:chen
来源:亿速云 阅读:173

这篇文章主要讲解了“css怎么实现自适应”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css怎么实现自适应”吧!

在css中,可以使用calc()函数来实现自适应,只需要在元素中添加“元素:calc(100%-像素大小);”即可。calc()函数是css3新增的一个功能,通过计算来指定元素的长度,因此不用担心添加边距或者边框带来的问题。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

随着自适应布局的出现,我们在制作页面的时候,经常会碰到元素的宽度为100%的情况。了解盒模型的朋友不难想到,如果这个元素有margin,padding,border的时候,此时的元素整体宽度必会大于父级元素的宽,就会导致页面结构错乱等一系列布局问题。为了解决这种问题,我可以通过calc()来实现。

calc()是什么

首先calc是calculate(计算)的缩写,其次看起来像是一个函数,它是css3新增的一个功能,用来指定元素的长度,而且是通过计算来指定,因此不用担心添加边距或者边框带来的问题。

calc()怎么用

既然calc()能通过计算设定元素的长度,那怎么去实现呢?

我们知道元素可以通过百分比、px等单位定义高宽,而calc()可以通过计算得出高宽。如下:

width: calc(100% - 10px);

calc()实例

上面的用法是不是很简单呢,那我们来看一个完整的实例:
说明:以下示例只展示calc用法及效果,实际项目根据需求取最优实现方式。

html代码片段

<div class="warpper">
    <div class="box1"></div>
    <hr>
    <div class="box2"></div>
</div>

css代码片段

.warpper {
    width: 200px;
    margin: 0 auto;
    padding: 15px 0;
    background-color: #f00;
}
.box1,
.box2 {
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding: 10px;
    border: 5px solid #000;
    background-color: #ff0;
}
.box1 {
    width: 100%;
}
.box2 {
    width: calc(100% - (10px + 5px) * 2);
}

css怎么实现自适应

从上面实例不难看出,box1和box2的区别就在于宽度的定义,在box2中,我们把padding和border的横向值去掉后,calc()计算出来的宽度才是我们想要的值。

感谢各位的阅读,以上就是“css怎么实现自适应”的内容了,经过本文的学习后,相信大家对css怎么实现自适应这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. CSS如何实现自适应宽度的菜单
  2. css高度自适应怎么实现?

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:css元素怎么旋转

下一篇:python函数返回多个值的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》