有关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.rhkb.cn/news/317326.html

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

相关文章

【竞技宝jjb.lol】LOL:MSI首日赛事前瞻

北京时间2024年5月1日,英雄联盟2024MSI季中赛将在今天正式开打,今天将进行两场入围赛的比赛,分别为FLY对阵PSG以及T1对阵EST。入围赛的战队实力差距较大,但如今各大赛区的实力越来越小,即使是外卡赛区的队伍也有爆冷的可能,下面小编就为大家带来MSI首日赛事前瞻。 FLY VS PSG …

做外贸如何主动开发外贸客户

在外贸业务中&#xff0c;主动开发客户是至关重要的一步&#xff0c;它能够帮助你扩大市场覆盖范围&#xff0c;建立稳定的客户基础。以下是一些有效的策略和方法&#xff0c;可以帮助你更有效地主动开发外贸客户&#xff1a; 明确目标市场&#xff1a;首先&#xff0c;你需要确…

一键PDF水印添加工具

一键PDF水印添加工具 引言优点1. 精准定位与灵活布局2. 自由旋转与透明度调控3. 精细化页码选择4. 全方位自定义水印内容5. 无缝整合工作流程 功能详解结语工具示意图【工具链接】 引言 PDF作为最常用的文档格式之一&#xff0c;其安全性和版权保护显得尤为重要。今天&#xff…

启明云端2.4寸屏+ESP32-S3+小型智能调速电动家用除草机案例 触控三档调速,能显示电压故障码

今天给大家分享个启明云端2.4寸屏ESP32-S3小型智能调速电动家用除草机案例&#xff0c;国外有草坪文化&#xff0c;这个机器能智能触控三档调速&#xff0c;带屏能显示电压故障码&#xff0c;数显档位&#xff08;3档最大&#xff09;&#xff0c;触控屏&#xff0c;长按3秒就能…

K-近邻算法的 sklearn 实现

实验目的与要求 掌握基于 K-近邻分类算法的编程方法通过编程理解 K-近邻分类算法和该算法的基本步骤 实验器材 硬件&#xff1a;PC 机&#xff08;参与实验的学生每人一台&#xff09;软件环境&#xff1a;Python3.7 Pycharm 实验内容 使用 sklearn 库中的 neighbors 模块实…

基于python的舞蹈经验分享交流网站django+vue

1.运行环境&#xff1a;python3.7/python3.8。 2.IDE环境&#xff1a;pycharmmysql5.7/8.0; 3.数据库工具&#xff1a;Navicat11 4.硬件环境&#xff1a;windows11/10 8G内存以上 5.数据库&#xff1a;MySql 5.7/8.0版本&#xff1b; 运行成功后&#xff0c;在浏览器中输入&am…

计算机网络——应用层协议(1)

在这篇文章初识网络中&#xff0c;我介绍了关于计算机网络的相关知识&#xff0c;以及在这两篇文章中Socket编程和Socket编程——tcp&#xff0c;介绍了使用套接字在两种协议下的网络间通信方式。本篇文章中我将会进一步介绍网络中网络协议的部分&#xff0c;而这将会从应用层开…

Vue 组件单元测试深度探索:细致解析与实战范例大全

Vue.js作为一款广受欢迎的前端框架&#xff0c;以其声明式的数据绑定、组件化开发和灵活的生态系统赢得了广大开发者的心。然而&#xff0c;随着项目规模的增长&#xff0c;确保组件的稳定性和可靠性变得愈发关键。单元测试作为软件质量的守护神&#xff0c;为Vue组件的开发过程…

FPGA高端项目:FPGA帧差算法多目标图像识别+目标跟踪,提供11套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐FPGA帧差算法单个目标图像识别目标跟踪 3、详细设计方案设计原理框图运动目标检测原理OV5640摄像头配置与采集OV7725摄像头配置与采集RGB视频流转AXI4-StreamVDMA图像缓存多目标帧差算法图像识别目标跟踪模块视频输出Xilinx系列FPGA工程源…

PDF高效编辑器,支持修改PDF文档并转换格式从PDF文件转换成图片文件,轻松管理你的文档世界!

PDF文件已成为我们工作、学习和生活中不可或缺的一部分。然而&#xff0c;传统的PDF阅读器往往只能满足简单的查看需求&#xff0c;对于需要频繁编辑、修改或转换格式的用户来说&#xff0c;就显得力不从心。现在&#xff0c;我们为您带来一款全新的PDF高效编辑器&#xff0c;让…

绿色便携方式安装apache+mysql+tomcat+php集成环境并提供控制面板

绿色便携方式安装带控制面板的ApacheMariaDBTomcatPHP集成环境 目录 绿色便携方式安装带控制面板的ApacheMariaDBTomcatPHP集成环境[TOC](目录) 前言一、XAMPP二、安装和使用1.安装2.使用 三、可能的错误1、检查端口占用2、修改端口3、JDK原因导致 前言 安装集成环境往往配置复…

paddlehub的简单应用

1、下载安装 pip install paddlehub -i https://pypi.tuna.tsinghua.edu.cn/simple 报错&#xff1a; Collecting onnx<1.9.0 (from paddle2onnx>0.5.1->paddlehub)Using cached https://pypi.tuna.tsinghua.edu.cn/packages/73/e9/5b953497c0e36df589fc60cc6c6b35…

[1688]jsp工资投放管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 工资投放管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0…

TDengine写入2000万数据查询体验

最近在寻找时序数据库&#xff0c;想应用在公司的项目上。 上一篇文章实验了InfluxDB:windows上使用influx2.7学习,还学习了flux语言&#xff0c;最后发现宽表查询比较困难&#xff0c;就放弃了&#xff0c;于是决定试试国产时序数据库TDengine 参考 官方文档&#xff1a;htt…

Vitis HLS 学习笔记--IDE软件高效操作指引

目录 1. 简介 2. 实用软件操作 2.1 C/RTL Cosimulation 选项 2.2 Do not show this dialog again 2.3 New Solution 2.4 对比 Solution 2.5 以命令行方式运行&#xff08;windows&#xff09; 2.6 文本缩放快捷键 2.7 查看和修改快捷键 2.8 将Vitis HLS RTL 导入 Viv…

Postgresql源码(127)投影ExecProject的表达式执行分析

无论是投影还是别的计算&#xff0c;表达式执行的入口和计算逻辑都是统一的&#xff0c;这里已投影为分析表达式执行的流程。 1 投影函数 用例 create table t1(i int primary key, j int, k int); insert into t1 select i, i % 10, i % 100 from generate_series(1,1000000…

前端性能优化知识梳理

1.重要性 当我们面试的时候&#xff0c;前端性能优化方面算是必考的知识点&#xff0c;但是工作中我们又很少会重点的对项目进行前端优化&#xff0c;它真的不重要吗&#xff1f; 如果我们可以将后端响应时间缩短一半&#xff0c;整体响应时间只能减少5%~10%。而如果关注前端…

【C语言】——数据在内存中的存储

【C语言】——数据在内存中的存储 一、整数在内存中的存储1.1、整数的存储方式1.2、大小端字节序&#xff08;1&#xff09;大小端字节序的定义&#xff08;2&#xff09;判断大小端 1.3、整型练习 二、浮点数在内存中的存储2.1、引言2.2、浮点数的存储规则2.3、浮点数的存储过…

mac用Homebrew安装MySQL并配置远程登录

1. 简介 MySQL 是一个开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;由瑞典 MySQL AB 公司开发&#xff0c;后被 Oracle 公司收购。MySQL 使用 SQL&#xff08;Structured Query Language&#xff09;作为查询语言&#xff0c;并提供了强大的功能和性能…

python安卓自动化pyaibote实践------学习通自动刷课

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文是一个完成一个自动播放课程&#xff0c;避免人为频繁点击脚本的构思与源码。 加油&#xff01;为实现全部电脑自动化办公而奋斗&#xff01; 为实现摆烂躺平的人生而奋斗&#xff01;&#xff01;&#xff…