CSS常用的几种布局

最新推荐文章于 2024-06-21 16:09:32 发布

可可爱爱的你吖

最新推荐文章于 2024-06-21 16:09:32 发布

阅读量302

点赞数

分类专栏： css

开心

本文链接：https://blog.csdn.net/weixin_45324044/article/details/103962420

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.table布局

优点：表格中的内容可以自动居中，也加入了 display：table;dispaly:table-cell 来支持 teble 布局（让标签元素以表格单元格的形式呈现，使元素类似于td标签）

缺点： table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)。

2.流动布局（Flow 默认的）

对于块级元素来说，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
（每一个便签都显示着自己本来默认的那个宽高）

在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

3.float浮动布局

首先，什么是浮动？
浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。
那么它有什么特点呢

对自身的影响
- float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高
- 浮动元素的位置尽量靠上
- 尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉
对兄弟元素的影响
- 不影响其他块级元素的位置
- 影响其他块级元素的文本
- 上面靠非 float 元素旁边靠 float 元素或者边框
对父级元素的影响
- 从布局上 “消失”
- 高度坍塌

3.1高度坍塌

对高度坍塌举个例子

<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 200px;
    background-color:red;
}

.left{
    background-color: yellow; 
    float: left;
    height: 50px;
    width:50px;
}
.right{
    background-color: yellow; 
    float: right;
    height: 50px;
    width:50px;
}
</style>
<body>
    <div class=container>       
        <span class=left>float</span>
        <span>我是字</span>
        <span class=right>float</span>
    </div>
    <div class="container" style="height: 200px;background: blue">      
    </div>
</body>
</html>

结果如下
在这里插入图片描述
从图中可以看出，两个 float 元素虽然包含在第一个 container 中，但是却超出了第一个 container 的范围，在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
解决办法：

父元素设置 overflow: auto 或者 overflow: hidden
结果如图：
给父元素加一个 after 伪类

 .container::after{
        content:'';
        clear:both;
        display:block;
        visibility:hidden;
        height:0; 
    }

结果如图：
在这里插入图片描述

3.2三栏布局

思路主要是左边一个浮动元素，右边一个浮动元素。这里有个小问题，中间的元素要写在最后，因为中间元素假设有块级元素的话，会影响右边浮动元素的定位，这里演示一下

<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}

.left{
    background-color: yellow; 
    float: left;
    height: 100%;
    width:100px;
}
.right{
    background-color: green; 
    float: right;
    height: 100%;
    width:100px;
}
.middle{
    background-color: red; 
    margin-left: 100px;
    margin-right: 100px;
    height:100%;
}
.container::after{
    content: '';
    display: block;
    visibility: hidden;
    clear: both
}

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

结果：
在这里插入图片描述
因为浮动元素会把块级元素的位置空出来，所以这里右边的浮动元素把上面的位置空了下来，所以正确的写法应该是

<div class=container>       
        <div class=left></div>
        <div class=right></div>
        <div class="middle"></div>
</div>

在这里插入图片描述

4. flex 布局

flex布局的属性和介绍在另一篇flex布局中有详细的介绍，这里就不多说了。
主要说一下层模型（Layer）：
层模型有三种形式：

1、相对定位(position: relative) 

2、绝对定位(position: absolute)

3、固定定位(position: fixed)。

这里也提一下z-index：
利用z-index，可以改变元素相互覆盖的顺序。
z-index值较大的元素将叠加在z-index值较小的元素之上（适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象））。

5.响应式布局

5.1 meta 标签
最简单的处理方式是加上一个 meta 标签

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

5.2使用 rem
rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应
5.3利用媒体查询

以上高度坍塌和三栏布局的代码和图片结果引用的是一个大佬的，原文地址链接为：
原文链接：https://blog.csdn.net/zhang6223284/article/details/81909600

可可爱爱的你吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用的几种布局

1.table布局优点：表格中的内容可以自动居中，也加入了 display：table;dispaly:table-cell 来支持 teble 布局（让标签元素以表格单元格的形式呈现，使元素类似于td标签）缺点： table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间...
复制链接

扫一扫

专栏目录