自适应布局

最新推荐文章于 2024-08-08 08:23:32 发布
最新推荐文章于 2024-08-08 08:23:32 发布
阅读量203 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KXJkang_jing888/article/details/107208738
版权

第一种方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>宽度自适应布局</title>
        <style>
            .wrap {
                background-color: #D66464;
            }
            .clearfix:after {
                content: "";
                clear: both;
                display: block;
            }
            .left {
                float: left;
                width: 100px;
                background: #00f;
                height: 180px;
            }
            .right {
                float: right;
                width: 150px;
                background: #0f0;
                height: 200px;
            }
            .center {
                background: #FFFFFF;
                margin-left: 110px;
                margin-right: 160px;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <div class="wrap clearfix">
            <div class="left">left，宽度固定，高度可固定也可以由内容撑开。</div>
            <div class="right">right，宽度固定，高度可固定也可以由内容撑开。</div>
            <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>
        </div>
    </body>
</html>

在这里插入图片描述

第二种方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>宽度自适应布局</title>
        <style>
            .wrap {
                background-color: #FBD570;
                margin-left: 100px;
                margin-right: 150px;
            }
            .clearfix:after {
                content: "";
                clear: both;
                display: block;
            }
            .left {
                float: left;
                width: 100px;
                background: #00f;
                height: 180px;
                margin-left: calc(-100% - 100px); 
            }
            .right {
                float: right;
                width: 150px;
                background: #0f0;
                height: 200px;
                margin-right: -150px;
            }
            .center {
                background: #B373DA;
                height: 150px;
                float: left;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrap clearfix">
            <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>
            <div class="left">left，宽度固定，高度可固定也可以由内容撑开</div>
            <div class="right">right，宽度固定，高度可固定也可以由内容撑开</div>
        </div>
    </body>
</html>

在这里插入图片描述

1)既然HTML里面要让center放前面，为了让left跑到center前面，那center也必须浮动了，否则因为都是块元素他们会分两行。

2)浮动之后还要让center宽度自适应，那明显width只能100%，然后在父元素中设width:auto，还有两侧margin，其实也就是父对象宽度自适应，center只是继承content的宽度。

3)对left使用负的margin让他们浮动到上方去

代码里面我用到了一个calc()，这个CSS3带来的计算函数简直酷毙了！本例里如果不使用calc函数，那么就需要wrap左边距为0，left左边距-100%，然后center多加一层子块DIV设置margin-left：100px，可以达到同样的效果！calc函数与百分比配合就足以实现自适应的要求！目前所有的自适应布局都在利用浏览器来为我们计算尺寸，但是有了calc之后我们就可以自己制定规则！

总结：使用浮动来进行布局，一个比较大的问题是清除浮动。这个可以使用一个after伪类来清除。更大的问题是浮动性像水一样向上流动，难以把握。在元素较多而且元素高度尺寸不一的情况下，单纯使用浮动只能实现上端对齐，这对于适应多种设备的布局就显得力不从心了。目前的做法是牺牲一部分内容，将元素做成等高排列，从美观上看也当然也是极好的，比参差不齐的排列要美观。

第三种方法 inline-block进行圣杯布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>宽度自适应布局</title>
        <style>
            .wrap {
                background-color: #FBD570;
                font-size: 0;
                letter-spacing: -4px;  /*用于兼容safari，根据不同字体字号或许需要做一定的调整*/
                margin-left: 100px;
                margin-right: 150px;
            }
            .wrap * {
                font-size: 1rem;
                letter-spacing: normal;
            }
            .left {
                display: inline-block;
                vertical-align: top;
                width: 100px;
                background: #00f;
                height: 180px;
                margin-left: -100px;
            }
            .right {
                display: inline-block;
                vertical-align: top;
                   width: 150px;
                background: #0f0;
                height: 200px;
                margin-right: -150px;
            }
            .center {
                display: inline-block;
                vertical-align: top;
                background: #B373DA;
                height: 150px;
                min-width: 150px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="left">left，宽度高度固定</div>
            <div class="center">center，可以自适应浏览器宽度，高度固定。</div>
            <div class="right">right，宽度高度固定</div>
        </div>
    </body>
</html>

在这里插入图片描述

这里也没什么好说的，用到的也是width：auto和width：100%这两点，简单知识点的简单用法。
双飞的话，代码跟圣杯的基本相同，注意在html的顺序变为center>right>left，只改左栏移动的margin-left: calc(-100% - 100px)到预定位置即可。不能用calc的话可以在center里面再加一层，跟浮动一样的处理方式。更简单的方法是使用CSS3带给我们的box-sizing属性

第四种：使用绝对定位（特指absolute）做自适应布局跟前面两种方式没太大差别，宽度自适应还是在auto和100%上做文章，而位置则由top/bottom/left/right等控制。还是以圣杯布局来举例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>宽度自适应布局</title>
        <style>
            .wrap {
                position: relative;
                background-color: #FBD570;
                margin-left: 100px;
                margin-right: 150px;
                height: 250px;
            }
            .left {
                position: absolute;
                top: 0;
                left: -100px;
                width: 100px;
                background: #00f;
                height: 180px;
            }
            .right {
                position: absolute;
                top: 0;
                right: 0;
                   width: 150px;
                background: #0f0;
                height: 200px;
                margin-right: -150px;
            }
            .center {
                position: absolute;
                top: 0;
                left: 0;
                background: #B373DA;
                height: 150px;
                min-width: 150px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="center">
                center，可以自适应浏览器宽度，高度固定。
            </div>
            <div class="left">left，宽度高度固定</div>
            <div class="right">right，宽度高度固定</div>
        </div>
    </body>
</html>

在这里插入图片描述

父元素为relative，子元素为absolute，这样的话，又会出现跟浮动一样的问题：父对象高度坍塌，子元素不能撑起父对象。原因也跟浮动一样，解决办法的话目前我知道的只有给父对象指定一个确定height值。
总结：单纯使用绝对定位进行自适应布局的情况很少，一般绝对定位都用在尺寸固定的元素定位上。而且fixed定位的渲染效率很低，因为它会频繁触发浏览器的重排。另外提一点：CSS3的transform会对绝对定位产生影响哦~比如说让fixed定位不再固定在浏览器视窗的黑魔法

KXJkang_jing888
关注
Java继承JPanel实现自适应布局的面板
04-04
本示例中，我们讨论的是一个自定义的`JPanel`子类，名为`AutojustChildPanel`，该子类实现了自适应布局的能力。这种能力使得组件在面板上能根据面板尺寸的变化自动调整其位置和大小，从而保持用户界面的美观和功能性...
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
08-29
主要介绍了移动客户端手机页面布局时各标签元素作用和适用情景，通过详解几种属性让读者更明确自适应布局的注意点，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
页面自适应布局
北街lhy的博客
09-14 584
题目：三栏布局，高度一定，左右各为300px，中间自适应宽度 方法一：采用浮动方式 浮动布局是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。 浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。 方法二：采用绝对定位 绝对定位布局优点，很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布...
自动适配新纪元：autofit.js
最新发布
gitblog_00243的博客
08-08 412
自动适配新纪元：autofit.js autofit.jsautofit.js 迄今为止最易用的自适应工具项目地址:https://gitcode.com/gh_mirrors/aut/autofit.js 在网页设计中，实现自适应屏幕是一项挑战，但有了autofit.js，这个挑战变得轻而易举。这款强大的JavaScript库为你提供了前所未有的易用性，让你的PC项目能在各种分辨率下完美呈现，...
Pyqt5自适应布局实例
01-20
在pyqt5中要做到自适应布局，必须应用Layout类 下面列出类似于 html 中 float 功能的布局方法： 实现原理： PyQt5中的布局中，stretch 属性类似于一个可自适应的空白布局。会尽可能将周围的组件布局向外挤压 from ...
全屏响应式列自适应布局html5滚动效果单页模板
12-13
首先，模板的核心在于其响应式列自适应布局。这种布局方式能够根据用户设备的屏幕大小自动调整，确保在桌面、平板、手机等不同设备上均能呈现出理想的效果。通常，响应式布局会采用媒体查询（Media Queries）来定义...
iapp源码大全：快速自适应布局代码.iapp
06-18
iapp源码大全：快速自适应布局代码.iapp
CSS自适应布局思路
12-09
最近在做一个自适应布局的项目，所以学了下自适应，下面是总结。此总结只做效果，不关注效率和代码优化。 1.css3 html中添加复制代码代码如下:<meta name=”viewport” content=”width=device-width,target-...
自适应布局与响应式布局
qq_37049128的博客
06-19 492
自适应布局 不同大小设备呈现同样的页面效果，只是文字、图片等的大小不一样，但是相对位置一样。 例如：百分比布局、弹性盒布局flex、分栏布局。 百分比布局 所有的宽高都用百分比来实现 Css3分栏布局 css3多列布局可以自动将内容按指定的列数排列，这种特性实现的效果和报纸、杂志类排版非常相似。 分栏布局属性 columns：列宽 列数 column-width 栏目最小宽度 column-count 栏目最大列数 column-gap 栏目间距，不能为负 column-rule 栏
CSS响应式布局（自适应布局）
热门推荐
weixin_65607135的博客
09-15 1万+
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
HTML中的自适应布局
l12345666777的博客
11-03 3762
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
自适应布局---自适应宽度
u010513603的博客
10-10 425
在网页代码的头部，加入一行viewport元标签。 viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-m
winform 自适应布局
07-10
WinForms中的自适应布局是指一种设计模式，用于创建用户界面元素能够根据控件的大小、屏幕分辨率以及窗口大小的变化自动调整其排列和尺寸的灵活性。通常，这涉及到使用一些特定的布局管理器和技术，比如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值