css重置

css 重置

CSS 重置的主要目标是确保浏览器之间的一致性,并撤消所有默认样式,创建一个空白板。

如今,主流浏览器都实现了css规范,在布局或间距方面没有太大差异。但是通过自定义 CSS 重置,也可以改善用户体验和提高开发者编写CSS的体验。

本文主要讲解以下几条规则:

/*使用盒子模型
*/
*, *::before, *::after {box-sizing: border-box;
}
/*移除浏览器默认的margin值
*/
* {margin: 0;
}
/*调整默认行高
*/
body {line-height: 1.5;
}
/*更合理的媒体标签默认设置
*/
img, picture, video, canvas, svg {display: block;max-width: 100%;
}
/*继承表单控件的文本样式
*/
input, button, textarea, select {font: inherit;
}
/*自动换行
*/
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;
}
/*根堆叠上下文
*/
#root, #__next {isolation: isolate;
}

下面我们来一个个看看:

使用盒子模型

<style>.parent {width: 200px;}.box {width: 100%;border: 2px solid hotpink;padding: 20px;}
</style>
<div class="parent"><div class="box"></div>
</div>

我们先来看看上面的代码,.box元素的宽度是多少呢?

答案是244px

.box元素有width: 100%。 由于其父级宽度为 200px,因此 100% 将解析为 200px

但是200px 宽度应用在哪里呢?默认情况下,它将该大小应用于内容框。

可能有些人会不熟悉,“内容框”是盒模型中实际保存内容的矩形,位于边框和填充内:
在这里插入图片描述
width: 100%声明会将.boxcontent-box属性 设置为 200px。内边距将额外添加 40px(每边 20px)。边框最后添加 4px(每边 2px的边界线条宽度)。当我们进行数学计算时,整个宽度将是 244px宽。

当我们尝试将 244px 的盒子塞进 200px 宽的父盒子中时,它就会溢出。

在这里插入图片描述
通过设置以下规则就可以更改这种溢出:

*, *::before, *::after {box-sizing: border-box;
}

应用此规则后,百分比将根据border-box解析。在上面的图片中,粉红色框将为 200px,内部内容框将缩小到 156px (200px - 40px - 4px)。

在我看来,这是一条必须遵守的规则。它能使 CSS 更易于使用。

删除默认边距

* {margin: 0;
}

浏览器存在默认的边距,就比如html标签的margin就不为0,或者对于h1标签,它的margin值会比普通文本更大。

这些默认值在文档的上下文中是合理的,但对于现代 Web 应用程序来说可能不准确。而且我们在开发时可能更希望元素默认情况下是没有任何边距的。因此直接删除会更好。

调整行高

body {line-height: 1.5;
}

line-height用于控制段落中每行文本之间的垂直间距。默认值因浏览器而异,但通常在 1.2 左右。

这个无单位的数字是基于字体大小的比例。当 line-height 为 1.2 时,每行将比元素的字体大小大 20%。

问题是:对于那些有阅读困难的人来说,这些行太紧密地排列在一起,使其难以阅读。WCAG标准规定 line-height 应至少为 1.5。

更合理的媒体标签默认设置

img, picture, video, canvas, svg {display: block;max-width: 100%;
}

img被认为是“内联”元素。这意味着它们应该用在段落中间,例如<em><strong>

这与我们大多数时候使用img的方式并不相符。通常,我们对待图像的方式与对待段落、标题或侧边栏的方式相同;它们应该是块级元素。

所以我们最好就直接通过display:block设置所有的img。而max-width: 100%是为了防止大图像溢出(如果它们放置在宽度不足以容纳它们的容器中)。

大多数块级元素会自动增大/缩小以适应其父元素,但像img这样的元素很特殊:它们被称为替换元素,并且它们不遵循相同的规则。

如果图像的“原始”尺寸为 800×600,则即使我们将其放入 500px 宽的父元素中,该元素也将是 800px 宽。而max-width: 100%规则将防止该图像超出其容器的范围,这应该是更明智的默认行为。

继承表单控件的字体

input, button, textarea, select {font: inherit;
}

默认情况下,按钮和输入不会从其父级继承文本样式。相反,他们有自己奇怪的样式。

例如,<textarea>将使用系统默认的等宽字体。文本输入将使用系统默认的sans-serif 字体。两者都会选择极其小的字体大小(Chrome 中为 13.333px)。而在移动设备上阅读 13px 文本非常困难。所以为了统一样式,我们可以直接添加让表单控件继承字体样式。

自动换行

p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;
}

CSS 中,如果没有足够的空间容纳单行上的所有字符,文本将自动换行。

默认情况下,浏览器会使用一些的算法来判断是否可以进行分割换行;在英语中,空格和连字符则可以换行,但这因语言而异。

如果一行没有任何软换行机会,并且不适合,则会导致文本溢出:

在这里插入图片描述

这就会导致一些布局问题,在这里,它添加了一个水平滚动条。在其他情况下,它可能会导致文本与其他元素重叠,或滑到图像/视频后面。

根堆叠上下文

#root, #__next {isolation: isolate;
}

通常只有当我们使用像 React 这样的框架时才需要它。

isolation属性允许我们创建一个新的堆叠上下文,而无需设置z-index

它允许我们保证某些高优先级元素(modalmenutooltip这些)始终显示在应用程序中的其他元素之上。没有奇怪的堆叠上下文错误,也不需要手动设置 z-index 的值。

当然我们要根据项目来调整选择器才能在找到顶级元素。例如,create-react-app中使用<div id="root">作为根元素,因此正确的选择器是#root

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

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

相关文章

面试问题总结(1)

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言&#xff0c;数据结构&#xff0c;Linux基础&#xff0c;ARM开发板&#xff0c;网络编程等领域UP&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff0…

23.09.5 《CLR via C#》 笔记5

第六章 类型和成员基础 类型可以定义0或多个以下成员&#xff1a;常量、字段、实例构造器、类型构造器、方法、操作符重载、转换操作符、属性、事件、类型类型的可见性分为public和internal(默认)C#中&#xff0c;成员的可访问性分为private、protected、internal、protected …

UMA 2 - Unity Multipurpose Avatar☀️八.UMA内置实用Recipes插件

文章目录 🟥 UMA内置Recipes位置🟧 CapsuleCollider🟨 Expressions : 表情管理(重点)🟩 Locomotion : 移动测试的插件🟦 Physics : Collider升级版🟥 UMA内置Recipes位置 如下图所示,UMA共内置5种实用Recipes,文件夹内的Text Recipes类型的文件即是实用Recipes. …

mac帧 arp

1.分片 2.MSS max segment size 3.跨网络的本质 就是经历很多的子网或者局域网 4.将数据从A主机跨网络送到B主机的能力 IP和mac IP解决的是路径选择的问题 5.数据链路层 用于两个设备&#xff08;同一种数据链路节点&#xff09;之间进行传递 6.以太网ether 7.局域网通…

初学python(一)

一、python的背景和前景 二、 python的一些小事项 1、在Java、C中&#xff0c;2 / 3 0&#xff0c;也就是整数 / 整数 整数&#xff0c;会把小数部分舍掉。而在python中2 / 3 0.66666.... 不会舍掉小数部分。 在编程语言中&#xff0c;浮点数遵循IEEE754标准&#xff0c;不…

数学建模黄河水沙监测数据分析

数学建模黄河水沙监测数据分析 问题&#xff1a; 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变化和人民生活的影响&#xff0c;以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾等方面都具有重要的理论指导意义。 解题思…

Spark【RDD编程(二)RDD编程基础】

前言 接上午的那一篇&#xff0c;下午我们学习剩下的RDD编程&#xff0c;RDD操作中的剩下的转换操作和行动操作&#xff0c;最好把剩下的RDD编程都学完。 Spark【RDD编程&#xff08;一&#xff09;RDD编程基础】 RDD 转换操作 6、distinct 对 RDD 集合内部的元素进行去重…

微信小程序开发---页面导航

目录 一、页面导航的概念 二、页面导航的实现 &#xff08;1&#xff09;声明式导航 1、概念 2、导航到tabBar页面 3、导航非tabBar页面 4、后退导航 &#xff08;2&#xff09;编程式导航 1、导航到tabBar页面 2、导航到非tabBar页面 3、后退导航 三、导航传参 &…

算法:轮转数组---循环取模运算

1、题目&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 2、分析特点&#xff1a; 轮转 > 取模运算 我们可以使用额外的数组来将每个元素放至正确的位置。用 n 表示数组的长度&#xff0c;我们遍历原数组&a…

酷克数据与华为合作更进一步 携手推出云数仓联合解决方案

在一起&#xff0c;共迎新机遇&#xff01;8月25-26日&#xff0c;2023华为数据存储用户精英论坛在西宁召开。酷克数据作为国内云原生数据仓库的代表企业&#xff0c;也是华为重要的生态合作伙伴&#xff0c;受邀参与本次论坛&#xff0c;并展示了云数仓领域最新前沿技术以及联…

JavaScript设计模式(五)——发布订阅模式、桥接模式、组合模式

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…

Mysql5.7开启SSL认证且支持Springboot客户端验证

Mysql5.7开启SSL认证 一、查看服务端mysql环境 1.查看是否开启了ssl,"have_ssl" 为YES的时候,数据库是开启加密连接方式的。 show global variables like %ssl%;2.查看数据库版本 select version();3.查看数据库端口 show variables like port;4.查看数据库存放…

前后端分离项目-基于springboot+vue的it职业生涯规划系统的设计与实现(内含代码+文档+报告)

it职业生涯规划系统在jdk环境中&#xff0c;使用Java语言进行编码&#xff0c;使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务。总之&#xff0c;it职业生涯规划系统集中管理信息&#xff0c;有着保密性强&#xff0c;效率高&#xff0c;存储空间大…

【深度学习】实验08 TensorBoard案例

文章目录 TensorBoard可视化TensorBoard案例附&#xff1a;系列文章 TensorBoard可视化 import tensorflow as tf# 定义命名空间 with tf.name_scope(input):# fetch&#xff1a;就是同时运行多个op的意思# 定义名称&#xff0c;会在tensorboard中代替显示input1 tf.constant…

高忆管理:六连板捷荣技术或难扛“华为概念股”大旗

在本钱商场上名不见经传的捷荣技术&#xff08;002855.SZ&#xff09;正扛起“华为概念股”大旗。 9月6日&#xff0c;捷荣技术已拿下第六个连续涨停板&#xff0c;短短七个生意日&#xff0c;股价累积涨幅逾越90%。公司已连发两份股票生意异动公告。 是炒作&#xff0c;还是…

springMVC的简单数据绑定

java //获得传递过来的参数//方式1RequestMapping("/add")public String add(HttpServletRequest request){String id request.getParameter("id");System.out.println(id);return "success";}//方式2RequestMapping("/add2")public …

Linux命令200例:mkfs用于创建文件系统

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0…

软件架构设计(九) 架构评估(复审)

我们上一节讲到了架构的复审,也说明架构复审对应了现在的架构评估。 我们学习架构评估之前先了解一下为什么要进行架构评估呢?架构苹果到底评估什么?架构评估该如何评估?我们先了解这几个为什么之后,理解了这几个为什么去学习会更加有效。 1、为什么要有架构评估,评什么…

Pytest系列-fixture的详细使用和结合conftest.py的详细使用(3)

介绍 前面一篇讲了setup、teardown可以实现在执行用例前或结束后加入一些操作&#xff0c;但这种都是针对整个脚本全局生效的。 Fixture是pytest的非常核心功能之一&#xff0c;在不改变被装饰函数的前提下对函数进行功能增强&#xff0c;经常用于自定义测试用例前置和后置工作…

恭贺弘博创新2023下半年软考(中/高级)认证课程顺利举行

为迎接2023年下半年软考考试&#xff0c;弘博创新于2023年9月2日举行了精品的软考中/高级认证课程&#xff0c;线下线上学员都积极参与学习。 在课程开始之前&#xff0c;弘博创新的老师为学员们提供了详细的学习资料和准备建议&#xff0c;以确保学员们在课程中能够跟上老师的…