html几种常见面试布局总结（多列、圣杯、双飞翼、等高布局）

最新推荐文章于 2023-05-15 15:20:13 发布
最新推荐文章于 2023-05-15 15:20:13 发布
阅读量129 收藏
点赞数
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74846596/article/details/127672828
版权

一、两列自适应布局

<body>

    <!-- 两列自适应布局：解决不同设备提供不同版本的页面问题 -->

    <!-- 左侧宽度固定、右侧宽度自适应-->

    <!-- 1、左右两个盒子，左侧盒子宽度固定，右侧盒子宽度100% -->

    <!-- 2、左侧盒子设置绝对定位position:absolute;或者让其浮动 -->

    <!-- 3、右侧盒子添加子盒子，子盒子设置padding-left：值为左侧盒子的宽度 -->

    <div>

        <div class="left"></div>

        <div class="right">

            <div class="child">

                ceshiceshi

            </div>

        </div>

    </div>

</body>

<style>

    .left{

        width: 200px;

        height: 100px;

        background-color: aqua;

        position: absolute;

    }

    .right{

        width: '100%';

        height: 100px;

        background-color: blanchedalmond;

    }

    .child{

        height: 50px;

        padding-left: 200px;

        background-color: aquamarine;

    }

</style>

二、圣杯布局

<style>

    * {

        margin: 0;

        padding: 0;

        border: 0;

        box-sizing: border-box;

    }

    .box {

        position: relative;

    }

    .right,

    .left {

        width: 200px;

        height: 100px;

        position: absolute;

    }

    .left {

        background-color: aqua;

        left: 0px;

    }

    .middle {

        width: 100%;

        height: 100px;

        background-color: blueviolet;

        padding: 0 200px;

    }

    .right {

        background-color: blanchedalmond;

        right: 0px;

        top: 0;

    }

</style>

<body>

    <!-- 圣杯布局 -->

    <!-- 左右两侧宽度固定，中间部分自适应的三列布局-->

    <!-- 1、position定位，父级盒relative，左右盒子absolute -->

    <!-- 2、两侧宽度固定，中间宽度设置100% -->

    <!-- 3、左侧盒子left：0，右侧盒子right：0-->

    <!-- 4、中间盒子用padding把内容显示出来 -->

    <!-- 还有一种方法用flex弹性盒子中的flex-grow中间盒子充满实现 -->

    <div class="box">

        <div class="left"></div>

        <div class="middle">

            ceshicehsi

        </div>

        <div class="right"></div>

    </div>

</body>

三、双飞翼布局

和圣杯布局差距不大，都是左右两列固定，中间自适应；双飞翼中间的盒子会多着一个子盒子，用margin来实现内容的显示，圣杯没有子盒子用的padding挤压内容

四、等高布局

分真等高和假等高

真等高用position、float做就可以；假等高利用内外间距抵消实现视觉上的等高，父盒子设置overflow，子盒子用padding-bottom撑开背景颜色，margin负值抵消

此处用真等高position实现

 * {

        margin: 0;

        padding: 0;

        border: 0;

        box-sizing: border-box;

    }

    .box {

        position: relative;

        height: 400px;

    }

    .right,

    .middle,

    .left {

        position: absolute;

        top: 0;

        bottom: 0;

    }

    .left {

        left: 0;

        width: 300px;

        background-color: aqua;

    }

    .middle {

       

        left: 300px;

        right: 300px;

        background-color: blueviolet;

        word-break: break-all;                        //实现文字自动换行

    }

    .right {

        width: 300px;

        right: 0;

        background-color: blanchedalmond;

    }

 <div class="box">

        <div class="left"></div>

        <div class="middle">

            ceshicehsicersagfsdadsaaadddsssssssddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

        </div>

        <div class="right"></div>

    </div>

m0_74846596
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
8月16日知识总结
m0_70021245的博客
08-16 265
flex-flow 属性： 复合属性，flex-direction和flex-wrap。- flex-flow 属性： 复合属性，flex-direction和flex-wrap。- align-content属性 子元素整体，在父元素中的对齐方式。- align-content属性 子元素整体，在父元素中的对齐方式。- align-items 侧轴方向，子元素的排列。- align-items 侧轴方向，子元素的排列。...
CSS：图片不拉伸，垂直居中显示
qq_42034498的博客
12-15 2077
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
html页面布局
墨城烟柳ベ旧人殇的博客
04-12 6471
本文主要是用HTML语言实现页面布局。
html常用布局方式
weixin_39116980的博客
05-15 76
2，定位布局 posstion:absolute。3，弹性布局 display:flex。1，浮动布局 float:right。
前端HTML&CSS面试题总结
hjdjhh的博客
01-05 655
HTML&CSS 盒模型 在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成 标准盒模型 （非IE浏览器） box-sizing:content-box；一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右) 怪异盒模型 （IE浏览器） box-sizing:border-box
双飞翼布局和圣杯布局
01-08
双飞翼布局和圣杯布局  网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。  首先三...
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局，感兴趣的朋友一起学习吧
t前端常用两种布局方式：双飞翼布局以及圣杯布局woLayoutWays.html
05-17
前端常用两种布局方式：双飞翼布局以及圣杯布局
如何做出双飞翼布局与圣杯布局
01-08
说起网站布局，之前一个做PS设计的朋友说过“网站布局”不就和我做图片一样，把各种需要的组件一摆，然后设个宽高给个定位不就...而今天我们的主题，“双飞翼布局”与“圣杯布局”就是一个两边固定，中间宽度自适应，并
html如何整齐排列选择框,html – 如何均匀地排列多个内嵌块元素？
weixin_39649405的博客
06-03 536
我最近读了一个非常聪明的技巧来完成你所要求的工作。简而言之，你只需要使用text-align：justify;在容器元素上实现这一点，结合一个额外的不可见块。这是因为内联块元素被视为文本内容的一部分，每个元素实际上是单个单词。使用对齐方式将展开文本中的单词，以便它们填充元素的整个宽度，并在单词之间增加空格。对于内联块元素，这意味着它们之间具有均匀间隔。最后我提到一个额外的看不见的块。这是必需的，因...
HTML三大布局方式
热门推荐
weixin_46222426的博客
05-21 1万+
欢迎使用Markdown编辑器 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录欢迎使用Markdown编辑器一、浮动布局 (float布局)二、使用步骤1.引入库2.读入数据总结 一、浮动布局 (float布局) 使用浮动来完成左中右三栏布局 float:left----左浮动 float:right----右浮动 注意：使用float浮动时，margin:0px auto;使块元素居中将会失效。 二、使用步骤 1.引入库 代码如下（示例）： import numpy a
html及css经典面试题
wushangnb的博客
12-15 3349
1.src与href的区别: href表示超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系，src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。 src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。 <script src=...
HTML的布局
FairyKunKun的博客
04-01 938
重中之重 需求： Html默认采用文档流布局方式：浏览器会自上而下，从左到右依次显示标签元素，遇到块级元素则独占一行，行级元素同行共存。 两个块级元素如何在同一行显示？ 办法1：使用display inline 或inline-block ----》打破默认的文档流布局方式。 问题： 办法2：使用浮动技术。 float: none 默认的文档流 left左浮动 right右浮动 原始素材 <!DO...
HTML页面布局
fakerking的博客
08-21 3222
前端页面布局
浅谈HTML几种布局方式
同是天涯程序猿
06-27 9127
布局是前端比较基础但是也很重要的部分，过去传统的布局方案一般是通过基于盒子模型： 然后配合display、position或float等属性进行布局。这种布局方式使用和理解起来是相对简单，但是我认为布局更复杂的布局场景和维护起来会比较困难。 本文总结几种布局方式供参考：Flex 弹性布局、Grid网格布局和多列布局。没有适用所有场景的布局，只有合适的布局，在实际应用中多种布局方式灵活使用才能达到更好的效果。 1. Flex弹性布局 概念 Flex布局指弹性布局，是一种一维的布局方式，提供了对子元素的空间分
HTML基础知识 笔试易错点（一）
qq_43531541的博客
09-20 157
1. <meta/> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> initial-scale: viewport 的初始缩放级别（0-10之间的正数，1表示无缩放） minimum-scale: viewport 能缩放的最小值（0-1
html+CSS布局实例：大厂阿里面试题：实现三列布局
qq_51066068的博客
03-16 1784
三列布局 今天老师上课给我们分享说她的学生面试阿里大厂的其中一道面试题：三列布局 实现三列布局，左右两侧固定100px,中间自适应 方法一：flex布局 我只用了最简单的写法，没有加多余的修饰，如果感兴趣的小伙伴可以自己多加一些自己想要的页面效果上去 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
圣杯布局与双飞翼布局
qq_44743216的博客
08-02 1699
圣杯布局与双飞翼布局实现
html 圣杯布局 高度,面试必问:圣杯布局和双飞翼布局的区别
weixin_29820757的博客
06-16 164
前言今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别，这两个三行布局一直是一些大厂前端面试的高频考点，带你走进大厂面试题，活不多说，冲冲冲~布局效果这两个种三行布局效果是一样的，实现的效果如上图示所示，其特点为：header和footer的高度为整个浏览器的宽度中间是个三行布局，left和right的宽度是固定的。而middle的内容的宽度是自适应占满中间位置的，高度为三栏中的最大高度其实圣...
圣杯布局 双飞翼布局
最新发布
09-11
而双飞翼布局与圣杯布局类似，也是左右两栏固定宽度，中间栏自适应宽度，但它在DOM结构上有所不同。 圣杯布局的DOM结构如下： ``` <div class="main">Main Content <div class="left">Left Sidebar ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值