css常见布局实现

最新推荐文章于 2023-04-15 21:01:35 发布
最新推荐文章于 2023-04-15 21:01:35 发布
阅读量111 收藏 1
点赞数
分类专栏： 其他 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47207556/article/details/120400582
版权

最近面试呢总虐在css这块，然后总结了面试中常问的两栏、三栏布局的实现

一、两栏布局

左边固定宽度，右边自适应
1.设置浮动
在这里插入图片描述
设置浮动可以有三种实现
两个div，左边都一样。左边：左边设置宽度和float:left
右边可以1.什么也不做，2.overflow:hidden，3.margin-left:左边宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左边float，右边什么也不做</title>
    <style>
        div{
            height: 300px;
        }
        .left{
            width: 200px;
            background-color: #6ab3f8;
            float: left;
        }
        .right{
            background-color: pink;
            /*overflow: hidden;*/
            /*margin-left: 200px;*/
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

2.相对+绝对实现

三个div，父容器包裹左右子容器
父：相对定位
子左：position:absolute
子右：position:absolute; left:左宽; right:0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对+绝对</title>
    <style>
        div{
            height: 200px;
        }
        .container{
            /*position: relative;*/
        }
        .left{
            position: absolute;
            width: 200px;
            background-color: #6ab3f8;
        }
        .right{
            position: absolute;
            left: 200px;
            right: 0;
            background-color:pink ;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

3.flex布局
三个div，父容器包裹子容器
父：display:flex;
子左：设置宽度
子右：flex:1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex实现</title>
    <style>
        .container{
            display: flex;
            height: 200px;
        }
        .left{
            width: 200px;
            background-color: #6ab3f8;
        }
        .right{
            flex: 1;
            background-color: pink;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

三栏布局

1.设置浮动
在这里插入图片描述

三个div。
左：float:left
右：float:right
中间：overflow:hidden; 或者 中间：margin-left:左边宽度; margin-right:右边宽度 或者什么都没有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏-float</title>
    <style>
        div{
            height: 300px;
        }
        .left{
            width: 200px;
            background-color: #6ab3f8;
            float: left;
        }
        .right{
            width: 200px;
            background-color: #FFB866;
            float: right;
        }
        .main{
            margin-left: 200px;
            margin-right: 200px;
            background-color: pink;
            /*overflow: hidden;*/
        }

    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>

</body>
</html>

但是这种方法有缺点：注意main在html中需要放在最后，会使得左右两边先加载，中间最后加载。这也是后面双飞翼布局出现的原因

2…双飞翼布局
需要四个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼</title>
    <style>
        div{
            height: 200px;
        }
        .container{
            float: left;
            width: 100vw;
        }
        .center{
            margin-left: 200px;
            margin-right: 200px;
            background-color: pink;
        }
        .right{
            float: left;
            margin-left: -200px;
            width: 200px;
            background-color: #FFB866;
        }
        .left{
            float: left;
            margin-left: -100vw;
            width: 200px;
            background-color: #6ab3f8;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

3.绝对定位
四个div，父容器包裹三个子容器
左边position：absolute，left:0，top:0
右边position：absolute，right：0，top：0
中间margin-left：左边宽度，margin-right：右边宽度。注意margin设置为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏-绝对定位</title>
    <style>
        body{
            margin: 5px 0 0 0;
        }
        div{
            height: 200px;
            margin: 0;
            padding: 0;
        }
        .container{
            width: 100%;
        }
        .left{
            position: absolute;
            left: 0;
            top: 5px;
            width: 200px;
            background-color: #6ab3f8;
        }
        .center{
            margin-left: 200px;
            margin-right: 200px;
            background-color: pink;

        }
        .right{
            position: absolute;
            right: 0;
            top: 5px;
            width: 200px;
            background-color: #FFB866;

        }
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

4.flex布局
四个div，父容器包裹三个子容器
父：display：flex
子左：width：200px
子右：width：200px
子中间：flex：1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏flex</title>
    <style>
        div{
            height: 200px;
        }
        .container{
            display: flex;
        }
        .left{
            background-color: #FFB866;
            width: 200px;
        }
        .center{
            background-color: pink;
            flex: 1;
        }
        .right{
            background-color: #6ab3f8;
            width: 200px;
        }
        
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
        
    </div>
</body>
</html>

5.table布局
四个div，父容器包裹子容器
父：display：table
三个子display：table-cell
左右定宽：width：200px
中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏table布局</title>
    <style>
        div{
            height: 200px;
        }
        .container{
            display: table;
            width: 100vw;
        }
        .left,.center,.right{
            display: table-cell;
        }
        .left{
            width: 200px;
            background-color: #6ab3f8;
        }
        .right{
            width: 200px;
            background-color: #FFB866;
        }
        .center{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

圣杯布局
四个div，父容器包裹三个子容器
父margin-left：左边子宽度，mergin-right：右边子宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        div{
            height: 200px;
        }
        .container{
            margin-left: 200px;
            margin-right: 200px;
        }
        .center{
            float: left;
            width: 100%;
            background-color: pink;
        }
        .left{
            float: left;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
            background-color: #6ab3f8;
        }
        .right{
            float: left;
            margin-left: -200px;
            right: -200px;
            position: relative;
            width: 200px;
            background-color: #FFB866;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

总结：
两栏布局
1.浮动设置：float+overflow和float+margin-left
2.绝对定位 position:absolute和left
3.flex布局 右边设置flex：1
三栏布局
1.浮动设置float+overflow：hidden和float+margin-left+margin-right（注意此时html中间区域最后加载）
2.绝对定位 两边absolute，设置top和right，中间设置margin-left和mergin-right
3.双飞翼布局（为了解决浮动设置时中间内容后加载的缺点，双飞翼布局是先加载中间区块）
4.圣杯布局
5.flex布局中间设置flex：1
6.table布局，父display：table，子设置display：table-cell

weixin_47207556
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 布局
青蛙king的博客
08-08 407
一、3 种方法实现 “双飞翼布局”
css实现多种常见布局
ding1885的博客
03-14 149
水平居中 定宽的块级元素 .out { } .in { margin: 0 auto; } 不定宽的块级元素（一个div里面多个div要居中） 里面元素设置为内联元素，父元素使用text-align：center； .out { text-align: center; } .in { display: inline...
css布局方式
m0_74385608的博客
04-15 416
最近在学css的布局方式，所以就来聊聊布局吧以上就是弹性盒子，当然还有许多属性没讲，作者也没学，所以就到这吧。
css3 实现左右布局
周家大小姐
04-22 3187
.box{ display: flex; justify-content: space-between;//左右平均布局 width:300px; height: 300px; background: pink; } .left ,.right{ background: red; width: 100px; height: 100px; } ...
实现以下css页面布局,简单学习CSS实现网页布局的基础知识
weixin_36217480的博客
08-03 214
使用CSS布局非常简单，如果你习惯使用tables布局，可能开始时有点困难，但其实很容易，事实上只是观念的不同。你需要把网页的每个部分看成独立的块，你可以绝对或相对定位块。Positioning 定位positon属性可以指定元素为absolute,relative,static或是fixed。static是元素默认属性，按HTML出现的先后顺序。relative比较像static，但元素可以使用...
CSS两列布局实现方式总结
01-21
两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。 1. absolute + margin 方式 首先想到的是利用 absolute + margin 的方式...
CSS 实现 10 种现代布局的代码
11-19
【CSS 实现 10 种现代布局的代码】 在CSS的世界里，布局设计是网页开发中的关键部分。随着技术的不断发展，现代CSS提供了一系列强大的工具来创建各种复杂的布局。以下将详细介绍四种基于CSS的现代布局技巧，这些...
div+css table布局实现代码
09-27
【div+css table布局实现代码】是一个关于使用CSS模拟HTML表格布局的技术，目的是为了在不使用`<table>`标签的情况下，实现多个容器等高并排显示的效果。这种布局方式常见于网页设计，允许内容在各自容器中居中或...
CSS网页布局实例 常见的12种网页布局
12-08
本篇文章将深入探讨12种常见的CSS网页布局实例，帮助你为你的网站创建出引人注目的界面。 1. **单一列布局**：这是最基础的布局，整个页面只有一列内容，适用于博客或个人主页，简洁明了。 2. **两列固定宽度布局*...
CSS用四种方式实现布局
09-25
本文将详细探讨四种常见的CSS布局方式，帮助你更好地理解和掌握网页布局技巧。 一、流体浮动布局 流体浮动布局是基于百分比单位来调整元素大小的一种布局方式，它能够使网页内容随着浏览器窗口的大小变化而自动...
css实现各种布局及方法
qq_43390061的博客
03-17 352
1：pc端网页 我们做pc端网页，一定要保证网页整体是居中显示，并且不能出现横向滚动条，所以我们可以在所有部位设置一个class为middle的div，然后每个部分都让其居中显示，然后网页的内容都在.middle里面布局即可。一般需要背景的话，我们给外面的大盒子（宽度百分百的盒子）即可。 比如case（这里指首页中的案例）部分。我们可以命名 为index_case,然后在里面再套一个class为m...
分项100个常见的CSS页面布局（代码+截图）
冉冉胜起博客
12-21 3034
100个常见的CSS页面布局
等距排列
Kungirl的博客
11-05 462
实现一个排列 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=ed...
css 常见布局实现
qq_38713274的博客
08-11 528
文章目录css 布局圣杯布局双飞翼布局Flex 布局绝对定位布局表格布局网格布局三栏布局的实现方式1、使用 float：2、使用 position：3、使用 table 实现：4、flex 实现：5、grid 实现：6、圣杯布局7、双飞翼布局两列等高布局的实现方式1、负margin：2、使用 position3、使用 table 实现4、flex 实现5、grid 实现 css 布局 圣杯布局 中间元素位于开头，父元素使用padding预留左右元素的位置，三个元素浮动，左元素使用margin负值和相对定
阮一峰老师 只要一行代码，实现五种CSS经典布局(转载)
鸭绒的博客
09-30 3687
只要一行代码，实现五种 CSS 经典布局 作者： 阮一峰 日期： 2020年8月10日 页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。 常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页...
html固定且居中布局含footer,如何用一行 CSS 实现 10 种现代布局？
weixin_39561577的博客
06-28 390
Mom, I Can’t Learn Anymore(《妈妈，我学不动了！》) 是一系列关于计算机领域程序最新时事的文章(偏向于前端领域)，在该系列会从不同的角度讨论领域内的实践和进展。前言周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets(chrome team 成员)。虽然我已经好几个月没有深入研究 CS...
简单的布局html
丁七岁的博客
09-12 266
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/reset.css"> <title>布局</title> <style> header,main,footer{
CSS网页布局
微风洋洋的博客
02-10 7407
介绍一下CSS网页布局这个核心知识，大家一定要重视！
css grid布局实现瀑布流
最新发布
05-25
使用 CSS Grid 布局可以实现瀑布流布局，具体步骤如下： 1. 在父元素上应用 grid 布局，将其划分为多个网格列，每一列的宽度相等，并且宽度可以根据需要进行调整。 2. 将子元素放置到网格中，使用 grid-row-start ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值