常见的布局方法有哪些

最新推荐文章于 2022-11-16 10:48:34 发布

Annifan6666

最新推荐文章于 2022-11-16 10:48:34 发布

阅读量3.9k

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/Annifan6666/article/details/122226316

版权

页面布局常用的方法有浮动、定位、flex、grid网格布局、栅格系统布局

浮动：

优点：兼容性好。
缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。

绝对定位

优点：快捷。
缺点：导致子元素也脱离了标准文档流，可实用性差。

flex 布局（CSS3中出现的）

优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。

网格布局（grid）

CSS3中引入的布局，很好用。代码量简化了很多。

利用网格布局实现的一个左右300px中间自适应的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }
        /* 重要：设置容器为网格布局，宽度为100% */
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-templat

最低0.47元/天解锁文章

Annifan6666

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
常见的布局方法有哪些

页面布局常用的方法有浮动、定位、flex、grid网格布局、栅格系统布局浮动：优点：兼容性好。缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。绝对定位优点：快捷。缺点：导致子元素也脱离了标准文档流，可实用性差。 flex 布局（CSS3中出现的）优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。网格布局（grid） CSS3中引入的布局，很好用。代码量简化了很多。利用网格布局实现
复制链接

扫一扫