css 自适应方法

最新推荐文章于 2024-06-25 22:50:37 发布

「已注销」

最新推荐文章于 2024-06-25 22:50:37 发布

阅读量1.2w

点赞数 2

文章标签： css 布局自适应

本文链接：https://blog.csdn.net/q1424966670/article/details/88732766

版权

1，css calc()方法

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

<style>
#div1 {
    width: calc(100% - 300px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}
</style>
</head>

<body>
<p>创建一个横跨屏幕的div，div 两边有 50px 的间隙：</p>
<div id="div1">一些文本...</div>

2，flex布局

父元素要用flex，其中一个元素固定宽度，另一个元素自适应宽度用flex:1,适用于左边菜单固定，右边展示内容

<style type="text/css">
            .parent{
            display: flex
        }
        .son1{
            width: 300px;
            height: 200px;
            background-color: red;
        }
        .son2{
            flex:1;
            height: 200px;
            background-color: blue;
        }
    </style>
<div class="parent">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>

「已注销」

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 自适应方法

1，css calc()方法calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。<style>#div1 { width: calc(100% - 300px);...
复制链接

扫一扫