CSS五种布局方式

最新推荐文章于 2024-05-14 18:25:49 发布
最新推荐文章于 2024-05-14 18:25:49 发布
阅读量4.7k 收藏 88
点赞数 17
分类专栏： CSS&HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43340342/article/details/104396049
版权

是CSS知识体系的重中之重
早期以table为主（简单）
后来以技巧性布局为主（难）
现在有flexbox/grid(偏简单)
响应式布局是必备知识

常用布局方法

table表格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left{
            background:red;
        }
        .right{
            background:blue;
        }
        table{
            width:800px;
            height:200px;
            border-collapse: collapse;
        }
        .table{
            margin-top:20px;
            display: table;
            width:800px;
            height:200px;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            vertical-align: center;
            display: table-cell;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="left">左</td>
            <td class="right">右</td>
        </tr>
    </table>
    <div class="table">
        <div class="table-row">
            <div class="left table-cell">
                左
            </div>
            <div class="right table-cell">
                右
            </div>
        </div>
    </div>
</body>
</html>

通过div和样式，做的像表格一样

盒模型

在这里插入图片描述

display/position

确定元素的显示类型： block/inline/inline-block
确定元素位置：static/relative/absolute/fixed
inline不能设宽高，inline-block可以设宽高

position demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            background:red;
            width:100px;
            height:100px;
        }
        .p2{
            position: relative;
            left:10px;
            top:-10px;
            background:blue;
        }
        .p3{
            position: absolute;
            left:80px;
            top:30px;
            background: green;
        }
        .p4{
            position: fixed;
            left:0;
            bottom:10px;
        }
    </style>
</head>
<body>
    <div class="p1">
        position:static
    </div>
    <div class="p2">
        position:relative
    </div>
    <div class="p3">
        position:absolute
        <div class="p3-3" style="position:absolute;width:50px;height:50px;background:yellow"></div>
    </div>
    <div class="p4">
        position:fixed;
    </div>
    <div class="p5">
        p5
    </div>
</body>
</html>

p2的偏移是因为指定relative，然后指定right, top，相对自己位置偏移
position: absolute是相对于最近的父级或者最近的absolute，绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；

注意：css描述的绝对定位概念，没有说明是离他最近的一个已相对定位的盒子进行定位的，所以离他最近的盒子的定位可以是相对定位（relative）和绝对定位（absolute）的，但是在开发中，一般是父盒子设置相对定位的，但是不代表只能是相对定位。

fixed是相对于可视区域的

层级： 默认按顺序层叠。手动设置则设z-index。
absolute fixed 可以设z-index，数值大的在上面

flexbox布局

弹性盒子
盒子本来就是并列的
指定宽度即可
没大范围支持，因为兼容性不是很好。
但是很好用。RN用flexbox布局。

flex基本demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width:800px;
            height:200px;
            display: flex;
            border:1px solid black;
        }
        .flex{
            background:red;
            margin:5px;
            flex:1
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
        <div class="flex">
            flex
        </div>
    </div>
</body>
</html>

不单独设置的话，子元素平分父元素。
可以单独设置flex的数值，调整子元素占的宽度

width: 50px;
flex: none;

这样就可以写固定宽度

flex应用demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width:800px;
            height:200px;
            display: flex;
        }
        .left{
            background: red;
            display: flex;
            width:200px;
        }
        .right{
            background: blue;
            display: flex;
            flex:1;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>
</body>
</html>

float布局（重点）

最不好理解最麻烦，但国内用的最多，适配性最好。

元素“浮动”
脱离文档流
但不脱离文本流

float demo1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            background:red;
            width:400px;
            margin:20px;
        }
        .p1{
            background:green;
            float:left;
            width:200px;
            height:50px;
        }
        .container2::after{
            content: 'aaa';
            clear:both;
            display: block;
            visibility: hidden;
            height:0;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <span class="p1">
            float
        </span>
        <div class="p2">
            很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
        </div>
    </div>

    <div class="container container2">
        <span>写几个字</span>
        <span class="p1">
            float
        </span>
        <span class="p1">
            float
        </span>
    </div>
    <div class="container" style="height:200px;background:blue;">
    </div>
</body>
</html>

对自身的影响：
形成“块”（BFC）
位置尽量靠上
位置尽量靠左（右）
对兄弟元素的影响：
上面贴非float元素
旁边贴float元素
不影响其它块级元素位置
影响其它块级元素的文本
对父级元素的影响：
从布局上“消失”
高度塌陷（float 高度100px，父级不会被撑到100px）
加伪元素避免塌陷
加伪元素（见demo1的container2) 是一个经典的去除浮动的方式

float demo2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width:800px;
            height:200px;
        }
        .left{
            background:red;
            /* float:left; */
            /* height:100%; */
            width:200px;
            position: absolute;
            height:200px;
        }
        .right{
            background:blue;
            float:right;
            width:200px;
            height:100%;
        }
        .middle{
            margin-left:200px;
            margin-right:200px;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
        <div class="middle">
            中间
        </div>
    </div>
</body>
</html>

左边向左浮动，右边加margin-left，数值为左边元素的宽度

写三栏的时候不在一行，把right的div写在middle的div前面，就解决了。
经典两栏三栏。
absolute的高度指定不能用百分比，只能用具体数，因为它不能跟父级元素绑定

inline-block布局

像文本一样排block元素
没有清除浮动等问题
需要处理间隙：

  1. container里把font-size设为0px （推荐）
  2. 修改div书写的位置，取消造成间隙的换行/空格, demo中“左”div后的换行取消，就可消除间隙，如下列代码
<body>
    <div class="container">
        <div class="left">
            左
        </div><div class="right">
            右
        </div>
    </div>
</body>

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width:800px;
            height:200px;
            font-size:0;
        }
        .left{
            font-size:14px;
            background:red;
            display: inline-block;
            width:200px;
            height:200px;
        }
        .right{
            font-size:14px;
            background:blue;
            display: inline-block;
            width:600px;
            height:200px;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>
</body>
</html>

响应式布局

在不同设备上正常使用
一般主要处理屏幕大小问题
主要方法：
隐藏+折行+自适应空间
rem/viewport/media query

响应式布局demo1

适配移动端第一步：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

用媒体查询@media, 判定移动端之后显示, 范围大的@media放在上面

@media (max-width: 640px){
            .left{
                display: none;
            }
        }

完整demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>responsive</title>
    <style>
        .container{
            margin:0 auto;
            max-width:800px;
            display: flex;
            border:1px solid black;
        }
        .left{
            display: flex;
            width: 200px;
            background:red;
            margin:5px;
        }
        @media (max-width: 640px){
            .left{
                display: none;
            }
        }
        .right{
            display: flex;
            flex: 1;
            background:blue;
            margin:5px;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            这里是一些不重要的内容，比如友情链接、广告
        </div>
        <div class="right">
            这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。
        </div>
    </div>
</body>
</html>

响应式demo2

改变viewport

<meta name="viewport" content="width=320">

写个脚本，动态适配

<script>
  window.innerWidth;
</script>

换单位：rem
1rem=16px 可以取近似。rem在布局要求非常精确的场景下要谨慎使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>responsive</title>
    <style>
        html{
            font-size: 20px;
        }
        .container{
            margin:0 auto;
            max-width:800px;
            border:1px solid black;
        }
        .intro{
            display: inline-block;
            width:9rem;
            height:9rem;
            line-height: 9rem;
            text-align: center;
            border-radius: 4.5rem;
            border:1px solid red;
            margin:.3rem;
        }
        @media (max-width: 375px){
            html{
                font-size:24px;
            }
        }
        @media (max-width: 320px){
            html{
                font-size:20px;
            }
        }
        @media (max-width: 640px){
            .intro{
                margin:.3rem auto;
                display: block;
            }
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="intro">
            介绍1
        </div>
        <div class="intro">
            介绍2
        </div>
        <div class="intro">
            介绍3
        </div>
        <div class="intro">
            介绍4
        </div>
    </div>
</body>
</html>

国内大部分用float布局。使用起来麻烦不好用，但是适配性好。
苹果用的flexbox。

CSS面试真题

  1. 实现两栏（三栏）布局的方法
    表格布局
    float + margin布局
    inline-block
    flexbox布局
  2. position:absolute/fixed有什么区别
    前者相对最近的absoluter/relative进行定位
    后者相对屏幕（viewport）
  3. display: inline-block的间隙
    原因： 字符间距
    解决： 消灭字符或者消灭间距
  4. 如何清除浮动
    为什么清除浮动： 浮动元素布局的时候不占父元素的空间，有可能浮动元素会超出父元素，对其它元素产生影响，因此父元素需要避免浮动元素对其它元素的影响。
    如何清除：
    让盒子负责自己的布局
    overflow: hidden(auto)
    ::after{clear:both}
  5. 如何适配移动端页面
    viewport
    rem/viewport/media query
    设计上：隐藏 折行 自适应
.01
关注
  • 17
    点赞
  • 踩
  • 88
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css布局教程 — 这一篇足够了
qq_60754128的博客
11-11 3885
display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
CSS 实现 10 种现代布局，你都会了吗
web全栈开发的博客
10-21 573
01. 超级居中：place-items: center对于第一个“单行”布局，让我们解决所有 CSS 领域中最大的谜团：居中。我想让您知道，使用 place-items: center 会让此操作比您想象的容易。首先指定 grid 作为 display 方法，然后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justi...
css多种布局方式
最新发布
博哥的二进制世界
05-14 1388
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
分享10个常见的CSS3页面布局
黑马程序员官方博客
05-22 2921
在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；瀑布流也是一种很常见的布局，尤其是在图片信息流的产品，以往如果要完美的实现瀑布流，我们需要费不少的功夫，还要借助JS进行实现。两列布局，左边是导航栏目，右边是内容部分。尤其在后台的场景，是非常常用的。圣杯布局，不用我多说，想必每个前端人都做过这样的页面结构，如下图所示。如下图所示，卡片布局是我们常见的一种页面布局。
CSS布局
weixin_34268310的博客
05-18 74
左右布局把两个span标签的class分别设置为left和right,就能实现左右布局,width可以自己确定;内联元素从左往右,遇到阻碍重启一行, 实际上 line-height 的值是多少像素，那么 span 所占的高度就是多少,内联元素左右padding有用,上下padding没用 块级元素从上往下,每个块占一行,高度由内部文档流高度决定由于两个span标签都在div(块级元素)元素内,所...
CSS网页布局
微风洋洋的博客
02-10 7321
介绍一下CSS网页布局这个核心知识，大家一定要重视！
css等高布局常用几种方式
01-19
等高布局的方式 指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说,又分为两类 伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 真等高 子元素高度相等 先来看看伪等高实现方式 通过负...
CSS用四种方式实现布局
09-25
CSS用四种方式实现布局
CSS两列布局实现方式总结
01-21
两列布局大概是最经典的一种网页布局方式了，本博客就是采用的这种布局。两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。...
CSS实现等分布局的4种方式
09-27
Flexbox（弹性盒布局）是现代CSS布局的标准，它可以轻松实现等分布局。只需设置`display: flex`和`flex: 1`，所有子元素就会自动等分空间。这种方法不仅支持各种浏览器，还提供了更多的布局控制选项。 ```css ....
图解 CSS Grid 布局详解
前端蜗牛君
10-13 3787
在解释 CSS Grid 布局之前，我们先来看看 Grid 布局中一些重要概念。
CSS的三种布局方式
weixin_57153112的博客
07-28 1055
流式布局、浮动布局、flex布局、定位、position、弹性盒子
css 布局的几种方式
zhang6223284的博客
08-21 6万+
前言 1 table 布局 2 flex 布局 2.1 盒模型 2.2 display / poistion 2.3 flexbox 布局 3 float 布局 前言 CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局方式有 table 表格布局（早期），float 浮动布局和 flex 布局，还有针对于移动端的响应式布局，不论是工作还是面试都是非常重要的知识...
常见的几种页面内容布局方式
热门推荐
wang839305939的博客
07-27 6万+
常见的页面布局，左右自适应布局
CSS常见的布局方式
weixin_44537944的博客
07-20 1385
这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。...
html+css布局的三种方式
Code-lover's Learning Notes
08-03 2618
1.自然布局。 没有任何修饰的布局是自动靠左的。 2.流动布局 上面讲的float:left的情况。 3.定位布局 相对定位和绝对定位都是相对于父div标签的。 相对——以这个元素的本来应该在的位置为参照点 绝对——以父div标签的原点（左上角）为参照点。由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只
css三种布局方式
weixin_45272209的博客
03-04 1154
css几种布局方式 流体布局 left和right都是浮动元素(脱离文档流)，漂浮于普通文档流上方，使其盖住main设置的margin main(普通文档流)左右两边设置margin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流体布局</title> </head> <body> <div c
css3 实现左右布局
周家大小姐
04-22 3185
.box{ display: flex; justify-content: space-between;//左右平均布局 width:300px; height: 300px; background: pink; } .left ,.right{ background: red; width: 100px; height: 100px; } ...
div+css五行两列布局
10-25
五行两列布局是一种常见的网页布局方式，可以使用div+css实现。具体实现方法如下： 1. HTML结构 ```html <!-- 左侧内容 --> <!-- 右侧内容 --> ``` 2. CSS样式 ```css .container { width: 100%; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值