自适应布局-使用css3函数clac()

最新推荐文章于 2024-03-13 08:42:59 发布

qq444616055

最新推荐文章于 2024-03-13 08:42:59 发布

阅读量819

点赞数

分类专栏：页面布局文章标签： calc() 页面布局自适应布局

本文链接：https://blog.csdn.net/qq444616055/article/details/102758536

版权

使用使用css3函数clac()进行页面布局，页面可以自适应窗口大小。
优点：写起来很方便。
缺点：需要浏览器支持css3。
核心：calc可以用来计算长度。常用的有计算div高度height: clac(100% - 50px)、div宽度、字体间距letter-spacing: calc(14px * 10 / 6) 等。
效果图
代码：

<!DOCTYPE html>
<html>

<head>
    <title>自适应布局-calc</title>
</head>

<body>
    <div class="headContainer">
        顶部菜单栏
    </div>
    <div class="bodyContainer">
        <div class="leftMenuCont">
            左侧菜单栏
        </div>
        <div class="panelCont">
            CSS3 calc() 函数: 
            <a href="ht

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq444616055

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自适应布局-使用css3函数clac()

使用使用css3计算属性clac()进行页面布局，页面可以自适应窗口大小。优点：写起来很方便。缺点：需要浏览器支持CSS3。代码：<!DOCTYPE html><html><head> <title>自适应布局-calc</title></head><body> <div...
复制链接

扫一扫