布局常见问题

最新推荐文章于 2024-07-14 10:34:53 发布
最新推荐文章于 2024-07-14 10:34:53 发布
阅读量262 收藏 1
点赞数 1
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39344725/article/details/105546669
版权

HTML常见的布局问题

两个盒子左边固定宽度右边自适应填满屏幕

一、使用浮动和外边距

首先给左边的元素进行左浮动，给想处于右边的盒子设置左边图片宽的外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .rigth{
            margin-left: 100px;
            height: 100px;
            background-color: aqua;
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="rigth"></div>
</body>
</html>

结果显示如下图
在这里插入图片描述

二、使用overflow+浮动

首先给左边的盒子设置向左浮动，右边的盒子不设置宽度，但是设置overflow：hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .rigth{
            overflow: hidden;
            height: 100px;
            background-color: aqua;
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="rigth"></div>
</body>
</html>

效果图和上图一样

三、使用绝对定位+外边距

首先给左边的盒子设置position：absolute，这样就可以脱离标准流了，然后给右边的盒子设置左边距为左边盒子宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .rigth{
            height: 100px;
            margin-left: 100px;
            background-color: aqua;
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="rigth"></div>
</body>
</html>

四、使用display：flex属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            display: flex;
        }
        .left{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .rigth{
            height: 100px;
            background-color: aqua;
            flex: 1;
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="rigth"></div>
    </div>
</body>
</html>

上面的方法是为两个盒子设置一个父元素，其中父元素设置一个display：flex，这样两个子元素就可以横向了，给右边的盒子设置一个flex：1，就可以平摊剩下的空间了

水平垂直居中的方法

在有固定宽度的情况下

一、使用position定位和外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
           position: relative;
           border: solid 2px saddlebrown;
           /* 为了方便看见父元素 */
           width: 500px;
           height: 500px;
        }
        .left{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>

    </div>
</body>
</html>

本代码中因为需要居中的盒子是带有宽度的，所以我们给父元素设置一个相对定位，子元素设置一个绝对定位，然后让子元素进行left：50%和top：50%，这样盒子左上角就会居中，我们最后使用margin调整盒子的中心居中

二、使用margin+position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
           position: relative;
           border: solid 2px saddlebrown;
           /* 为了方便看见父元素 */
           width: 500px;
           height: 500px;
        }
        .left{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>

    </div>
</body>
</html>

上面的代码中，我们使用position和margin进行调整

三、使用position+calc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
           position: relative;
           border: solid 2px saddlebrown;
           /* 为了方便看见父元素 */
           width: 500px;
           height: 500px;
        }
        .left{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: calc(50% - 50px);
            top:calc(50% - 50px);
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>

    </div>
</body>
</html>

上述代码中的calc是css3中的新属性，可以自动帮你进行计算

不固定宽度的情况下

一、使用display：flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
           border: solid 2px saddlebrown;
           /* 为了方便看见父元素 */
           height: 500px;
           display: flex;
           align-items: center;
           justify-content: center;
        }
        .left{
            width: 20%;
            height: 100px;
            background-color: red;

        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
    </div>
</body>
</html>

在上述代码中我们对父元素使用display：flex，然后给父元素中的子元素强行规定水平和垂直都居中

二、使用表格的方法进行水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
           border: solid 2px saddlebrown;
           /* 为了方便看见父元素 */
           height: 500px;
           width: 500px;
           display: table-cell;
           text-align: center;
           vertical-align: middle;
        }
        .left{
            width: 20%;
            height: 20%;
            display: inline-block;
            background-color: saddlebrown;

        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
    </div>
</body>
</html>

三、使用display：grid进行居中，但是这个属性的兼容性不是很好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
           border: solid 2px saddlebrown;
           /* 为了方便看见父元素 */
           height: 500px;
           width: 500px;
           display: grid;
        }
        .left{
            width: 20%;
            height: 20%;
            align-self: center;
            justify-self: center;
            background-color: saddlebrown;

        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
    </div>
</body>
</html>

四、使用position+transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
           border: solid 2px saddlebrown;
           /* 为了方便看见父元素 */
           height: 500px;
           width: 500px;
           position: relative;
        }
        .left{
            width: 20%;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background-color: salmon;
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
    </div>
</body>
</html>
非常规程序媛
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
常见问题汇总
撒哈拉的初学者的博客
07-20 568
1.这个点应如何消除 栅格问题，存在这个点的原因是在建立元件时，栅格设置成了 snap of grid（不捕获至栅格）。建立元件的时候不选 snap of grid 即可。 2.元器件引脚上如何添加上划线 元器件引脚命名加上划线可通过引脚名称后加\实现 3.隐藏 Pin 名称 在元件创建窗口，空白处双击 ...
css中calc函数动态计算长度值
Ango的博客
03-11 1473
css中的calc函数可以用于数值计算，可以是单纯的百分比计算，像素px的计算，也可以是混合计算，但格式要注意，运算符前后各要留一个空格，否则无效,以下计算方式都是正确的 .circle{ position:absolute; top:calc(50% - 30%); left:calc(50% - 30%); } .circle{ position:absolute; top:c...
css 中动态获取宽度,css中的calc动态计算长度值
热门推荐
weixin_36085931的博客
08-03 1万+
1 场景css的样式中，存在动态计算长度的需求。2 方案使用css中的calc函数动态计算css中的长度值。语法：calc(expression)参数说明：值描述expression必须，一个数学表达式，结果将采用运算后的返回值。3 使用如需将元素设置为父容器的中间，元素大小为200px;100px;传统的通过margin属性，设置负外边距移动自身高度和宽度的一半距离：.context{posit...
CSS:calc()
weixin_43850949的博客
10-18 74
什么场景可以使用 calc() `` 支持图 .foo { width: 90%; /* Fallback for older browsers */ width: calc(100% - 50px); } Example 1 - 居中元素 使用 calc() 给我们提供另一个垂直居中元素的解决方案。如果我们知道元素的尺寸，一个典型的解决方案是使用负外边距移动自身距离高与宽的一半，如下所示： // Assuming .foo is 300px height and 300px width
CSS3 之属性:calc() 函数、border、background、word-wrap、font-face
qq_41988669的博客
01-07 1199
auto：无特殊对齐方式。left：内容左对齐。center：内容居中对齐。right：内容右对齐。justify：内容两端对齐。start：内容对齐开始边界。end：内容对齐结束边界。定义块内文本内容的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式。
CSS3中的 calc()计算函数
EmotionComputer
05-21 918
calc() 函数用于动态计算长度值 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值单位都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； clac() 嵌套 calc() 函数可以嵌套。在函数里边，会被视为简单的括号表达式，如下例所示。 .foo { width: calc( 100% / calc(100px * 2) );
标准布局常见问题及解决办法
10-30
了解并掌握这些解决方案，对于处理标准布局中的常见问题至关重要。同时，随着技术的发展，新的布局工具如Flexbox和Grid的出现，使得解决这些问题变得更加简单和直观，但在支持老式浏览器时，仍需注意这些经典问题。
常见布局方案
03-13
本篇文章将深入探讨几种常见的布局方案，包括上中下一栏式、左右两栏式以及它们的不同实现方法，以及左中右三栏布局。 1. 上中下一栏式布局： 这种布局是最基础的网页布局之一，通常用于展示网站头部信息、主要内容...
CSS3常见问题列表布局特效
07-24
"CSS3常见问题列表布局特效"是针对开发者在使用CSS3时可能遇到的问题的一个集合，提供了实用的解决方案和交互效果。这款特效主要关注于列表的布局和内容的展开与收缩，这在创建用户界面（UI）时尤其重要，因为它能够...
CSS 多列布局问题简单解决方案
09-25
纯 CSS 打造多列等高并不像想象中那么...本文着重讲述多列布局出现的问题，之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack，无图片，无 javascript，甚至可以用在最严格编码的网站上。
Andriod开发中常见问题
09-02
在Android开发过程中，开发者经常会遇到各种问题，这些问题可能涉及到布局设计、系统版本兼容性、屏幕适配、应用功能实现等多个方面。本文将详细探讨七个在Android开发中常见的问题及其解决方案。 1. **引用布局的...
calc怎么用？css3 calc()函数的使用总结
lin123_00的博客
05-05 2959
calc是什么意思？怎么使用？本篇文章给大家带来的内容是介绍css3中的calc()函数是什么，有什么用，如何使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 首先小编在这里谢谢大家一直的支持，每天都会更新十个web前端基础内容，需要的可以关注我，另外也可以进我的web学习交流群1045267283，领取资料学习资料笔记，可以跟里面的小伙伴一起学习一起成长，不懂的问题也可以...
CSS——calc函数
weixin_61972561的博客
05-07 277
CSS——calc函数
【CSS】calc()方法及水平垂直居中的方法
webxuj的博客
07-18 1523
5）、表达式中有“*”和“/”时，其前后可以没有空格，但建议保留。4）、表达式中有“+”和“-”时，其前后必须有空格。1）、使用“+”、“-”、“*”和“/”运算。2）、可以使用百分比、px、em、rem等单位运算。3）、可以混合使用各种单位进行运算。...
html使用calc函数,CSS calc() 函数的介绍与使用方法
weixin_28843191的博客
06-18 5872
在HTML页面的DIV布局中，如果我们把DIV的宽度当做一个计算公式，让浏览器去自动去计算它们的值是不是很有意思呢？那么今天就说一下，CSS中的一个关于计算的函数 calc()calc() 函数介绍calc()：英文单词calculate(计算)的缩写，是 css3 新增加的一个功能。它可以动态的设置元素样式中border、margin、pading以及 width 等属性的值。calc() 函数...
实现小球跳动
liuli0927的博客
06-09 157
实现小球跳动
CSS3 calc()是怎么实现计算
大白兔
05-07 8389
css3的calc()函数允许我们在属性值中执行数学计算操作。例如，我们可以使用calc()指定一个元素宽度的固定像素值为多个数值的和。 calc(表达式) - 表达式支持加、减、乘、除运算，同时也支持单位的混合使用（%、px、rem、em等）； - 表达式中有”+”、”-“运算符的，前后必须要有空格，这个是向前兼容，后期可能会带入变量等有”-“连字符； - 虽然“*”“/”没有空格...
html 关闭信息窗口
最新发布
cuisidong1997的博客
07-14 347
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
Android常见界面布局
03-14
Android常见的界面布局有以下几种： 1. 线性布局（LinearLayout）：线性布局是最常见的布局方式之一，它按照水平或垂直方向排列子视图。可以通过设置权重来控制子视图的大小比例。 2. 相对布局（RelativeLayout）：相对布局是根据子视图之间的相对位置来排列的。可以通过设置子视图与父视图或其他子视图之间的相对关系来实现灵活的布局。 3. 帧布局（FrameLayout）：帧布局是一种简单的布局方式，它将子视图叠放在一起，只显示最上层的子视图。常用于显示单个子视图，如图片或按钮。 4. 网格布局（GridLayout）：网格布局将子视图划分为行和列，并按照网格的方式排列。可以通过设置行数、列数和子视图的位置来实现复杂的布局。 5. 表格布局（TableLayout）：表格布局将子视图按照表格的形式排列，可以设置每个单元格的跨度和对齐方式。 6. 约束布局（ConstraintLayout）：约束布局是一种强大而灵活的布局方式，它通过设置子视图之间的约束关系来实现复杂的布局。可以在水平和垂直方向上设置子视图之间的边距、对齐方式和权重。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值