有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)

        前言:在练习CSS排版的时候,我们经常会遇到一些排版上的问题,那么我们如何去解决这些问题呢?本篇文章给出了一些新手在练习排版时候可能会遇到的问题的解决方案。


✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

先让我们看一下本篇文章的大致内容:

目录

1.清除默认样式问题

        (1)方案一:使用通配选择器

        (2)方案二:链接reset.css

        (3)方案三:Normalize.css

2.元素居中问题

        (1)水平居中

        (2)垂直居中

3.元素之间的空白问题

4.行内块的幽灵空白问题


1.清除默认样式问题

        我们知道,元素一般都些默认的样式,例如:

1. p 元素有默认的上下margin 。
2. h1~h6 标题也有上下margin ,且字体加粗。
3. body 元素有默认的8px 外边距。
4. 超链接有默认的文字颜色和下划线。
5. ul 元素有默认的左pading 。

但是这些默认样式对于我们对网页的排版真的友好吗?

在早期,元素默认样式,能够让我们快速的绘制网页,但如今网页的设计越来越复杂,内容越来越
多,而且很精细,这些默认样式会给我们绘制页面带来麻烦;而且这些默认样式,在不同的浏览器
上呈现出来的效果也不一样,所以我们需要重置这些默认样式。

那么我们如何去清除这些默认的属性呢?—— 其方案有三种:

        (1)方案一:使用通配选择器

* {margin: 0;padding: 0;......
}

但是这种方案也有着其不足:

此种方法,在简单案例中可以用一下,但实际开发中不会使用,因为 * 选择的是所有元素,而并不是所有的元素都有默认样式;而且我们重置时,有时候是需要做特定处理的,比如:想让a 元素的文字是灰色,其他元素文字是蓝色。

        (2)方案二:链接reset.css

首先让我们了解一下什么是reset.css:

reset.css,又叫做 CSS 重写或者 CSS 重置,在写具体的样式之前,我们要适应兼容目前各个浏览器的版本差异,会对其进行样式的统一处理,而reset.css就是用于改写HTML标签的默认样式的。

经过reset 后的网页,好似“一张白纸”,这样我们开发人员就可以根据设计稿,精细的去添加具体的样式。

当然reset.css有很多,我们可以去网上下载自己需要的reset.css即可。

        (3)方案三:Normalize.css

首先让我们了解一下什么是Normalize.css:

对于Normalize.css,其是一种最新方案,它在清除默认样式的基础上,保留了一些有价值的默认样式。

这里我们附上官网地址:http://necolas.github.io/normalize.css/

而对于Normalize.css来说,其相对于 reset.css , 有如下优点:

1. 保护了有价值的默认样式,而不是完全去掉它们。
2. 为大部分HTML元素提供一般化的样式。
3. 新增对 HTML5 元素的设置。
4. 对并集选择器的使用比较谨慎,有效避免调试工具杂乱。

注:

       Normalize.css 的重置,和reset.css 相比,更加的温和,开发时可根据实际情况进行
选择。

这样我们就呆滞的了解了为什么要清除默认样式以及如何去清除默认样式。

2.元素居中问题

        在学习CSS排版的时候,必不可少的就是让元素处于居中位置,那么对于不同类型的元素,我们应该如何让其居中呢?

对于居中,我们知道可以分为:水平居中垂直居中

        (1)水平居中

        【1】子元素为块元素

        这时我们只需要给父元素加上: margin: 0 auto; 即可 。

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.28.css">
</head>
<body><div>这是想要居中的元素</div>
</body>
</html>

CSS代码:

div {width: 300px;height: 200px;background-color: orange;margin: 0 auto;
}



这样我们就完成了块级元素的水平居中对齐。

        【2】子元素为行内元素、行内块元素

        这时我们只需要给给父元素加上: text-align:center;即可

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.28.css">
</head>
<body><div><span>这是想要居中的元素</span></div>
</body>
</html>

CSS代码:

div {text-align: center;
}

小总结:

行内元素、行内块元素,可以被父元素当做文本处理。即:可以像处理文本对齐一样,去处理:行内、行内块在父元素中的对齐。例如使用: text-align 、line-height 、text-indent 等属性。

这样我们就完成了行内元素、行内块元素的水平居中对齐。

那么说完了水平对齐,接下来说垂直居中对齐。

        (2)垂直居中

        【1】子元素为块元素

        这时我们只需要给子元素加上: margin-top 属性即可 ,值为:(父元素content -子元素盒子总高) / 2。

例:我们想让绿色方块在橙色方块的垂直居中位置:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.28.css">
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

CSS代码:

.outer {width: 500px;height: 400px;/* 防止margin溢出 */overflow: hidden;background-color: orange;
}
.inner {width: 200px;height: 100px;margin-top: 150px;background-color: green;
}

     

           

        【2】子元素为行内元素、行内块元素

        这时我们只需要设置父元素的 height = line-height 即可。

例:我们想让文字处于橙色方块的垂直居中位置:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.28.css">
</head>
<body><div><span>这是一段文字</span></div>
</body>
</html>

CSS代码:

div {width: 500px;height: 300px;background-color: orange;line-height: 300px;
}

这样我们就大致了解完了如何使元素水平或者垂直居中了。

3.元素之间的空白问题

        首先让我们了解一下什么是元素之间的空白问题:(如图)

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.28.css">
</head>
<body><span>这是第一段文字</span><span>这是第二段文字</span>
</body>
</html>


我们会发现在两段文字之间出现了一个空格,但是我们在代码中并没有编写空格,这就是——元素之间的空白问题。

那么元素之间的空白问题产生的原因是什么呢?

产生的原因:

行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。

了解了元素之间的空白产生的原因了,那么我们如何去解决这个问题呢?

解决方案:

1. 方案一: 去掉换行和空格(不推荐)。
2. 方案二: 给父元素设置 font-size:0 ,再给需要显示文字的元素,单独设置字体大小(推
荐)。

CSS代码:

/* 父元素 */
div {font-size: 0px;
}
/* div中包含的子元素 */
span {font-size: 20px;
}

这样我们就可以解决元素之间的空白问题了。

4.行内块的幽灵空白问题

        首先让我们了解一下什么是行内块的幽灵空白问题:(如图)

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.4.28.css">
</head>
<body><div><img src="./fish.jpg" alt="fish"></div>
</body>
</html>

CSS代码:

div {background-color: orange;
}
img {width: 200px;
}

我们会发现在图片的下方出现了一些橙色的背景,但是按理来说我们没有设置父类的高度,其高度应该由其内容撑开,但是结果中又溢出了一点背景,这种现象就是好——行内块的幽灵空白问题。

了解了什么是行内块的幽灵空白问题,那么它的产生原因是什么呢?

产生原因:

行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。

了解了什么是行内块的幽灵空白问题的产生原因之后,那么我们该如何解决呢?

解决方案:

方案一: 给行行内块设置vertical ,值不为 baseline 即可,设置为 middel 、bottom 、
top 均可。
方案二: 若父元素中只有一张图片,设置图片为 display:block 。
方案三: 给父元素设置 font-size: 0 。如果该行内块内部还有文本,则需单独设置fontsize。

这里只演示方案一,方案二和方案三读者可以自行验证:

我们将上面的CSS代码改写一下:

CSS代码:

div {background-color: orange;
}
img {vertical-align: bottom;width: 200px;
}

我们可以看到内块的幽灵空白的问题就解决了!!!

这样我们就了解并知道了如何解决行内块的幽灵空白问题了。

想了解其他CSS知识,浏览------------------------------------>CSS_秋刀鱼不做梦的博客-CSDN博客


以上就是本篇文章的所有内容了~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/830862.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【消息队列】RabbitMQ五种消息模式

RabbitMQ RabbitMQRabbitMQ安装 常见的消息模型基本消息队列SpringAMQPWorkQueue消息预取发布订阅模式Fanout ExchangeDirectExchangeTopicExchange 消息转换器 RabbitMQ RabbitMQ是基于Erlang语言开发的开源消息通信中间件 官网地址&#xff1a;https://www.rabbitmq.com/ R…

【VUE】Vue中实现树状表格结构编辑与版本对比的详细技术实现

Vue中实现树状表格结构编辑与版本对比的详细技术实现 在Vue中&#xff0c;创建一个可编辑的树状表格并实施版本对比功能是一种需求较为常见的场景。在本教程中&#xff0c;我们将使用Vue结合Element UI的el-table组件&#xff0c;来构建一个树状表格&#xff0c;其中包含添加、…

速盾:什么是cdn架构

CDN&#xff08;Content Delivery Network&#xff09;即内容分发网络&#xff0c;是一种分布式的架构&#xff0c;用于提高互联网上的内容传输速度和用户体验。CDN架构通过将内容分发到全球多个节点&#xff0c;使用户能够从最近的节点获取内容&#xff0c;从而减少延迟和网络…

第15届蓝桥杯-蒟蒻の反思与总结

基本情况 第15届蓝桥杯&#xff0c;参加c大学A组&#xff0c;完整做出的只有两道填空题。 然后后面的题目基本只拿了20%这样的分数&#xff0c;最后两道15分题目空白。 满分100分&#xff0c;估计总分在15-20分这样。 对于二分答案还是没有太熟练&#xff0c;考试的时候没有…

深入探究C++四大关键特性:初始化列表、友元函数、内部类与static成员

目录 1. 构造函数不为人知的那些事 1.1 构造函数体赋值与初始化列表对比 1.2 explicit关键字与构造函数隐式转换 2. static成员 2.1 static成员的概念 2.2 static成员的特性与应用 2.3 小结 3. C11 成员变量初始化新用法 4. 友元 4.1 友元函数 4.2 友元类 5. 内部类…

数字孪生需要的世界模型

今天看到这篇文章&#xff0c;提到了世界模型&#xff0c;仅是数据驱动的数字孪生已经不能满足需要了&#xff0c;需要应用世界模型使数字孪生具备推理、判断、感知世界的能力。 由于人工智能和机器学习的兴起&#xff0c;使用数据驱动建模来表示复杂系统已变得普遍&#xff0…

Python 中的花卉矩阵组合

使用场景描述 (rib) 协议编写脚本的基础知识。通过创建在 3D 空间中转换的基本几何图形,解决了 xyz 坐标系的基础知识。初步渲染是使用基本着色完成的,因此可以更容易地看到几何体。RenderMan 图1 图 1 是我作为作业参考的示例图片,并尝试匹配 中的图片。为了完成这项任务…

Python | Leetcode Python题解之第61题旋转链表

题目&#xff1a; 题解&#xff1a; class Solution:def rotateRight(self, head: ListNode, k: int) -> ListNode:if k 0 or not head or not head.next:return headn 1cur headwhile cur.next:cur cur.nextn 1if (add : n - k % n) n:return headcur.next headwhi…

JS从入门到精通

1.JS概述 window.sessionStorage.setItem("flag", flag);原生JS也可以存SessionStorage 尚硅谷的视频教程&#xff1a; 不用在服务端&#xff0c;在客户端就验证了。 解释型VS编译型&#xff1b;事件驱动&#xff1b;客户端的脚本语言&#xff1b;脚本语言&#xff0…

机器学习的两种典型任务

机器学习中的典型任务类型可以分为分类任务&#xff08;Classification&#xff09;和回归任务&#xff08;Regression&#xff09; 分类任务 回归任务 简单的理解&#xff0c;分类任务是对离散值进行预测&#xff0c;根据每个样本的值/特征预测该样本属于类 型A、类型B 还是类…

Django后台项目开发实战四

用户可以浏览工作列表以及工作详情 第四阶段 在 jobs 文件夹下创建 templates 文件夹&#xff0c;在里面创建 base.html 网页&#xff0c;内容如下 <!-- base.html --> <div style"text-align:center;"><h1 style "margin:auto; width:50%;&…

MATLAB - 自定义惯性矩阵

系列文章目录 前言 一、关键惯性约定 Simscape 多体软件在惯性定义中采用了一系列约定。请注意这些约定&#xff0c;因为如果手动进行惯性计算&#xff0c;这些约定可能会影响计算结果。如果您的惯性数据来自 CAD 应用程序或其他第三方软件&#xff0c;这些约定还可能影响到您需…

Mac好用又好看的终端iTerm2 + oh-my-zsh

Mac好用又好看的终端iTerm2 1. iTerm2的下载安装2. oh-my-zsh的安装2.1 官网安装方式2.2 国内镜像源安装方式 3. oh-my-zsh配置3.1 存放主题的路径3.2 存放插件的路径3.3 配置文件路径 1. iTerm2的下载安装 官网下载&#xff1a; iTerm2 2. oh-my-zsh的安装 oh-my-zsh是一…

C语言 | Leetcode C语言题解之第60题排列序列

题目&#xff1a; 题解&#xff1a; char* getPermutation(int n, int k) {int factorial[n];factorial[0] 1;for (int i 1; i < n; i) {factorial[i] factorial[i - 1] * i;}--k;char* ans malloc(n 1);ans[n] \0;int valid[n 1];for (int i 0; i < n; i) {val…

飞书API(6):使用 pandas 处理数据并写入 MySQL 数据库

一、引入 上一篇了解了飞书 28 种数据类型通过接口读取到的数据结构&#xff0c;本文开始探讨如何将这些数据写入 MySQL 数据库。这个工作流的起点是从 API 获取到的一个完整的数据&#xff0c;终点是写入 MySQL 数据表&#xff0c;表结构和维格表结构类似。在过程中可以有不同…

【Leetcode每日一题】 动态规划 - 简单多状态 dp 问题 - 按摩师(难度⭐)(64)

1. 题目解析 题目链接&#xff1a;面试题 17.16. 按摩师 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 一、状态定义 在解决这类动态规划问题时&#xff0c;首先我们需要明确状态的定义。对于本题&#xff0c;我们…

在mac上安装node.js及使用npm,yarn相关命令教程

1、安装node.js 官网&#xff1a;Node.js — Download Node.js 选择需要的版本&#xff0c;点击DownLoad 2、点击继续&#xff0c;直到安装成功。 2.1打开终端输入命令node -v 显示版本号则说明已安装成功 3、全局安装yarn命令 1、sudo npm install --global yarn &#xf…

Git学习笔记(五)IDEA使用Git

在前面几篇文章中&#xff0c;我们已经介绍了git的基础知识&#xff0c;知道了其主要作用是用来进行代码的版本管理&#xff1b;并且已经介绍了Git操作的常用命令。在日常的开发环境下&#xff0c;除了通过Bash命令行来操作Git之外&#xff0c;我们另外一种常用的操作方式则是直…

Redis从入门到精通

第一章> 1、Redis概述 2、Mysql的演进 3、当今企业的架构分析 4、到底什么是nosql 5、阿里巴巴数据架构演进 第二章> 6、NoSql四大分类 7、Redis概述 8、Windows安装redis…

基于STC12C5A60S2系列1T 8051单片机的Proteus中的单片机发送一帧或一串数据给串口调试助手软件接收区显示出来的串口通信应用

基于STC12C5A60S2系列1T 8051单片机的Proteus中的单片机发送一帧或一串数据给串口调试助手软件接收区显示出来的串口通信应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机串口通信介绍STC12C5A60S2系列1T 8051单片机串口通信的结构基于STC12C5A60S2系列…