常见的布局方式

最新推荐文章于 2023-07-21 07:58:47 发布

炒鸡蛋44

最新推荐文章于 2023-07-21 07:58:47 发布

阅读量2.3k

点赞数 1

分类专栏：网页开发文章标签： html css 1024程序员节

本文链接：https://blog.csdn.net/weixin_55643605/article/details/120876523

版权

页面中为了更好的展示数据，需要对页面元素进行布局，常见的布局方式有以下三种：

一.默认布局：

它是默认布局方式，按照代码书写顺序及标签类型从上到下，从左到右依次显示。（适用于页面元素的微调）

 <title>默认布局</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /* 行内块元素 */
            display: inline-block;
        }
        .d1{
            background-color: red;
        }
        .d2{
            background-color: green
        }
        .d3{
            background-color: blue
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>

效果如下：

inlilne-block:如果是同一行显示的内容，会将每一个换行考虑进去，如红绿蓝中间的间隙

解决方案：（将换行删掉）

<body>

<div class="d1"></div><div class="d2"

最低0.47元/天解锁文章

炒鸡蛋44

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
常见的布局方式

页面中为了更好的展示数据，需要对页面元素进行布局，常见的布局方式有以下三种：一.默认布局：它是默认布局方式，按照代码书写顺序及标签类型从上到下，从左到右依次显示。（适用于页面元素的微调） <title>默认布局</title> <style> div{ width: 200px; height: 200px; /* 行内块元素 */ .
复制链接

扫一扫

专栏目录