CSS 学习笔记 1

作者：虾仁疙瘩汤

2022-10-24
山东
本文字数：1379 字
阅读完需：约 5 分钟

css 布局

对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。

本篇文章总结了四十二种 CSS 的常见布局，这四十二种布局可以细分为如下几类：

水平居中
垂直居中
水平垂直居中
两列布局
三列布局
等分布局
Sticky Footer 布局
全屏布局

这些内容也正是本篇文章的目录。

一、水平居中

实现水平布局比较简单，方法也比较多，这里总结了 7 种常用的布局方法，其公共的 CSS 代码如下所示：

其 HTML 结构也是固定的，就是一个父级，其宽度继承了 <body> 的宽度，还有一个子级，这里是固定的 300px*300px，代码如下：

最终的实现效果如下：

使用 text-align 属性

若元素为行内块级元素，也就是 display: inline-block 的元素，可以通过为其父元素设置 t ext-align: center 实现水平居中。实现的 CSS 代码如下：

.parent {  /* 对于子级为 display: inline-block; 可以通过 text-align: center; 实现水平居中 */  text-align: center;}.child {  display: inline-block;}

复制代码

定宽块级元素水平居中(方法一)

对于定宽的的块级元素实现水平居中，最简单的一种方式就是 margin: 0 auto;，但是值得注意的是一定需要设置宽度。实现 CSS 代码如下：

.child {  /* 对于定宽的子元素，直接 margin:0 auto; 即可实现水平居中 */  margin: 0 auto;//表示上下外边距为0，左右为自动，最终实现效果为水平居中}

复制代码

定宽块级元素水平居中(方法二)

对于开启定位的元素，可以通过 left 属性和 margin 实现。实现 CSS 代码如下：

.child {  /* 开启定位 */  position: relative;  left: 50%;  /* margin-left 为 负的宽度的一半 */  margin-left: -150px;}

复制代码

定宽块级元素水平居中(方法三)

当元素开启决定定位或者固定定位时， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。

实现 CSS 代码如下：

.parent {  position: relative;//相对定位  height: 300px;}.child {  /* 开启定位 父相子绝 */  position: absolute;//绝对定位  /* 水平拉满屏幕 */  left: 0;  right: 0;  width: 300px;  /* 拉满屏幕之后设置宽度，最后通过 margin 实现水平居中 */  margin: auto;}

复制代码

定宽块级元素水平居中(方法四)

当元素开启决定定位或者固定定位时， left 属性和 transform 属性即可实现水平居中。

实现 CSS 代码如下：

.parent {  position: relative;}.child {  /* 开启定位 */  position: absolute;  /* 该方法类似于 left 于 -margin 的用法，但是该方法不需要手动计算宽度。 */  left: 50%;  transform: translateX(-50%);}

复制代码

Flex 方案

通过 Flex 可以有很多方式实现这个居中布局的效果。弹性布局

实现 CSS 代码如下

.parent {  height: 300px;  /* 开启 Flex 布局 */  display: flex;  /* 通过 justify-content 属性实现居中 */  justify-content: center;}.child {  /* 或者 子元素 margin: auto*/  margin: auto;}

复制代码

Grid 方案

通过 Grid 实现居中布局比通过 Flex 实现的方式更多一些。

实现 CSS 代码如下：

.parent {  height: 300px;  /* 开启 Grid 布局 */  display: grid;  /* 方法一 */  justify-items: center;  /* 方法二 */  justify-content: center;}.child {  /* 方法三 子元素 margin: auto*/  margin: auto;}

复制代码

以上就是水平居中布局常用的几种方式。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/fa07f02368ced37138230b430】。文章转载请联系作者。

虾仁疙瘩汤

关注

还未添加个人签名 2022-10-23 加入

还未添加个人简介

发布

暂无评论

创作场景

CSS 学习笔记 1

css 布局

一、水平居中

虾仁疙瘩汤

评论