css的高端和宽度自适应问题

最新推荐文章于 2024-05-05 18:28:16 发布

贾宇东

最新推荐文章于 2024-05-05 18:28:16 发布

阅读量3.9k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/jyd820226378/article/details/51989199

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.宽度自适应

现在网页布局基本都是要适配各个屏幕，所以布局时候的自适应也就非常重要，这个东西说难不难，说简单也不简单，主要是一个积累的过程，当你写得多了，也就掌握了。

我先从三列式布局讲吧，三列式布局什么呢，说白了就是两边固定，中间自适应，三列式布局经典的布局是圣杯布局

圣杯布局效果优美且对浏览器兼容性要求非常低,是一种非常给力的三列式页面布局方案，在国内最早是由淘宝UED的工程师传播开来,它的布局要求有几点：

1、三列布局，中间宽度自适应，两边定宽；

2、中间栏要在浏览器中优先展示渲染；

3、允许任意列的高度最高；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task3-圣杯布局</title>
    <style>
    * {margin: 0;padding: 0;}
    body {
        padding: 20px;
    }
    #left {
        width: 200px;
        height: 500px;
        float: left;
        margin-left:-100%;
        background-color: red;
        margin-right:20px;
    }
    #main { 
        float: left;
        width:100%;
        background-color: green;
        height: 400px;
    }
    #right {
        margin-left: -120px;
        float: left;
        background-color: blue;
        width:120px;
        height: 500px;
    }
    </style>
</head>
<body>
    <div id="main">
    </div>
    <div id="left"></div>
    <div id="right">    
    </div>
</body>
</html>

这就是一个很简单的三列式布局，我们先给中间的main渲染，使其长度为100%，高度自己定义，用float使其脱离文档流，然后渲染左边的部分，使左边的左浮动，然后利用负边距100%，使其定位到正确位置，再使右边的利用float脱离文档流，再用margin-left:本身宽度，就能定位到正确位置，这样一个简单的三列式布局就写出来了

当浏览器缩小到一定程度时，这个布局可能会被破坏，可以在body上添加min-width属性解决。

2.高度自适应

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，但是属性height:100%并不能直接产生效果，因为这和其父元素有关

#center{
height:100%;
}

上面的代码是无效的，对样式没有任何改变，需要改写成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task3-圣杯布局</title>
    <style>
    html,body{
        margin:0px;
        height:100%;
    }
    .center{
        width:200px;
        height:100%;
        background-color:#666666;
    }
    </style>
</head>
<body>
    <div class="center"></div>
</body>
</html>

对.center对象设置了height:100%,同时设置了html与body的height：100%，这就是高度自适应的问题所在，一个对象的高度是否可以使用百分之比显示，取决于对象的父类对象，在页面中，.center直接放在body属性中，因此它的父类对象是body，而在默认状态下，浏览器并没有给body一个高度属性，因此我们所设置的.centere为height：100%并不会产生任何效果，但是一点我们给body设置了100%之后，他的子类对象.center的height:100%便发生作用了，这便是浏览器解析规则引发的高度自适应的问题。

代码中除了给出body的定义属性之外，还给html对象也应用了相同的样式定义，这样做的好处是使IE与firefox浏览器都能够高度自适应，Ie与firefox对页面的解析存在一定的差异，ie中html对象默认为100%的高度，而body不是，而在firefox中html标签就不是100%的高度，因此两个标签都设置为100%,可以保证两款浏览器都能正常工作。

大概整理的就这么多了~欢迎咨询

贾宇东

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css的高端和宽度自适应问题

1.宽度自适应现在网页布局基本都是要适配各个屏幕，所以布局时候的自适应也就非常重要，这个东西说难不难，说简单也不简单，主要是一个积累的过程，当你写得多了，也就掌握了。我先从三列式布局讲吧，三列式布局什么呢，说白了就是两边固定，中间自适应，三列式布局经典的布局是圣杯布局圣杯布局效果优美且对浏览器兼容性要求非常低,是一种非常给力的三列式页面布局方案，在国内最早是由淘宝UED的工程师传播开来,它的布局要求
复制链接

扫一扫