css中h1~h6是多少像素 Font-size:100% 默认的大小

最新推荐文章于 2023-09-12 17:48:26 发布
最新推荐文章于 2023-09-12 17:48:26 发布
阅读量1.1w 收藏 7
点赞数 4

一般的浏览器默认字体是14px的大小,但是个别浏览器是16px。

经过亲自测试得出:
浏览器默认为body:100%=16px;
浏览器计算得出
h1=32px
h2=24px
h3=18.72px
h4=16px
p=16px
h5=13.28px
h6=12px

易.金
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
知识普及之CSS: body{font-size: 62.5%;}这种写法的原因
12-07
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，1em则=16px*62.5%=10px,1.2em则=12px，这是不是就简单多了，准确多了呢~~ CSS Code复制内容到剪贴板 Set body font-size to 62.5% for Easier 
html 字号 h1 h2 h3,html标题标签（<h1>，</h1> <h2>，</h2> <h3>等）的默认字体大小（以像素为单位）是什么？</h3>...
weixin_36458030的博客
05-31 4210
要获得实际证据，请使用默认的Mozilla Firefox样式查看html.css(171 - 237)：h1 {font-size: 2em;}h2 {font-size: 1.5em;}h3 {font-size: 1.17em;}h4 {font-size: 1.00em;}h5 {font-size: 0.83em;}h6 {font-size: 0.67em;}整个css是：h1 {...
CSS字体样式属性
lhrdlp的学习笔记
09-19 1530
css字体样式属性 1、font-size字体大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以是使用苦厄对长度单位。其中，较为常用的是相对长度单位，推荐使用像素单位px，在实际应用中，绝对长度单位使用较少。 使用方法：p {font-size: 14px}; 相对长度单位 说明 em 相对于当前对象内文本字体的尺寸 px ...
html标签默认属性
weixin_47056553的博客
04-02 1004
浏览器 google 版本 46.0.2490.86 m 转载自：开源博客 niuhongxia 大佬 body 默认 margin:8px; font-size:16px; (1em) h1 默认 font-size:32px; --(2.0em) margin:21px 0; h2 默认 font-size:24px; --(1.5em) margin:20px 0; h3 默认 font-size:18px; --(1.17em) margin:18.px 0; h4 默认 f
CSS从入门到精通——文本与字体样式1.0
qq_45823118的博客
03-31 2589
1.字体颜色、类型与大小任务描述相关知识字体颜色color字体类型font-family字体系列字体栈字体大小font-size设置方式常用单位像素em百分比结合 em 任务描述 请在右侧的编辑框中修改style.css文件。 设置 h1， h2 的font-family 为：PingFang SC, Verdana, Helvetica Neue,Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif,WenQuanYi Micro Hei,
h1到h6的字体大小（93）
weixin_45147894的博客
07-06 6944
不同浏览器默认的字体大小不同，若按照16px的话，h1到h6的大小如下： 浏览器默认为body:100%=16px; 计算得出： h1=32px h2=24px h3=18.72px h4=16px p=16px h5=13.28px h6=12px
html中最小的标题元素是hl,html <h3> 标题标签元素
weixin_36303283的博客
05-31 1146
html标题问题标签元素之标签元素一、h3标签简介html h3标签主要用于组织问题、栏目类模式，h3与h1最大题目的签比照，h1标签一样平常一个网页中使用一次，而h3标签笼统在一个网页中多次使用。默认CSS h3又比h2翰墨大小小一点。html h3标签常见使用处所：栏目题目大约使用h3标签文章标题问题大约使用h3标签文章问题列表概略使用h3标签(一般图文列表中，图片使用img引入，文章题目文字...
CSS中你可能不知道的Selectors特性
奇舞周刊
12-26 664
CSS中你可能不知道的Selectors特性本文作者为奇舞团前端开发工程师引言最近看了2022年全球CSS调查报告，发现了一些不常见的伪类和伪元素。伪类:has()html<div> <h1>H1</h1> <h2>H2</h2> <p>h1{margin:000.25rem0}</p> &lt...
Html有关字体大小粗细的相关知识(Hbuilder)
热门推荐
babytowhere的博客
02-23 1万+
1.  一个普通字体默认大小为16px;1em=1个汉字大小。当默认大小由于font-size而改变时，1em就相当于是一个新的字体的大小了。 2..标签字体大小为32.5px,；标签字体大小为24.5px,；标签字体大小为19px,；标签字体大小为16.5px,；标签字体大小为13.5px,；标签字体大小为12.25px。当然，还带加粗效果。       3.font-weight没有单位，
Bootstrap的标题类(标题样式h1~h6、small标签、display类)
昊虹AI笔记
09-05 693
使用Bootstrap的标题类(标题样式h1~h6)
font-size:100%的目的和作用是什么
01-19
复制代码代码如下: h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} input,select,textarea,samp {font-size:100%;} 看到一些css重设,请问设置font-size:100%的目的和作用是什么? ——————————...
使用font-size：0px 来制作跨浏览器的inline-block css属性
12-13
像下面图中的布局，如果排列的元素是登高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用inline-block来布局。 现代...
web前端学习71-76（CSS字体属性---字体系列、大小、粗细、文字样式、字体复合属性）
weixin_51249285的博客
11-14 2629
文章目录3 CSS文字属性3.1 文字系列3.2 字体大小3.3 字体粗细3.4 文字样式3.5 字体复合属性3.6 字体属性总结 3 CSS文字属性 CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。 3.1 文字系列 CSS使用font-family属性定义文本的字体系列。 p { font-family:"微软雅黑";} div {font-family: Arial, "MicrosoftYahei","微软雅黑";}/*系统会先识别第一种字体，如果没有就下一
CSS基础知识
chenqiuqian的博客
09-28 254
1.CSS规则 我们大概了解了什么事HTML文档，现在来介绍一下CSS的规则，怎么为HTML元素都有一组样式性，可以通过CSS来设定。这些属性涉及元素显示的不同方面，例如文本内容的字体，大小、颜色等。CSS就是一种先选择HTML元素，然后设定选中元素CSS属性的机制。CSS选择符和应用的样式构成了一条CSS规则。 2.1解析CSS规则 举例说明：将段落标签的文本内容设置为红色 HTML代码： <p>hello world</p><!—段落标签--> C
css字号 h5_H5页面中字体大小动态配置
weixin_29972227的博客
01-17 2257
html 元素是文档的根元素，对html设置了字体大小，其子元素会继承html字体的大小。不同的浏览器默认有的默认html的字体是16px，有的是14px。同时浏览器字体的大小还会受到你自己在手机里配置的系统字体大小的影响。这么多因素，如果只靠css里配置html字体大小，子元素基于html的rem是不能保证在不同的手机端适配的。所以可以通过js动态来计算html应该配置多大的字体。functio...
CSS基础选择器
无区新手的博客
05-02 1642
1.标记选择器 标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。 标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;} 该语法中，所有的HTML标记名都可以作为标记选择器，如body、h1、p、strong等。用标记选择器定义的样式对页面中该类型的所有标记都生效。标记选择器最大的优点是能快捷为页面中同类型的标记统一样式，同时这...
CSS font-size 属性
shengyin714959的博客
09-12 164
font-size 属性用于设置字体大小。默认值：medium继承：yes版本：CSS1object/* ，绝对大小值 */ font-size: xx-small;/* ，相对大小值 */ font-size: larger;/* ，长度值 */ font-size: 12px;/* ，百分比值 */ font-size: 80%;
7—css的字体系列、字体大小、字体粗细、文字样式、字体的复合属性
qq_64073631的博客
10-22 339
day7—css的字体属性
node-v12.16.3-x86.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
优化下面代码.bg { width: 100%; height: 100vh; background-image: url('../../assets/img/info-bg.png'); background-size: 100% 100%; background-repeat: no-repeat; position: relative; font-family: AlibabaPuHuiTiR; .goBack { position: absolute; top: 34px; right: 65px; cursor: pointer; color: #ffffff; width: 181px; padding: 15px 10px; background: rgba(24, 31, 30, 0.52); border: 1px solid #4a524e; border-radius: 5px; font-size: 18px; font-family: AlibabaPuHuiTiR; z-index: 111; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .home-left { position: absolute; top: 18%; left: 40px; width: 41%; height: 76%; font-size: 24px; color: #ffffff; } .unit { font-size: 24px; color: #636363; } .home-left-title { font-size: 24px; color: #ffffff; line-height: 36px; } .home-right { position: absolute; top: 18%; right: 88px; width: 46%; height: 78%; } .model { display: flex; justify-content: center; align-items: center; height: 90%; } #threeContained { width: 100%; height: 100%; } .model-qk-img { width: 82%; height: 90%; background-image: url('../../assets/img/howo.png'); background-size: 100% 100%; background-repeat: no-repeat; } .model-zk-img { width: 56%; height: 90%; background-image: url('../../assets/img/heavyT.png'); background-size: 100% 100%; background-repeat: no-repeat; } .model-gj-img { width: 82%; height: 90%; background-image: url('../../assets/img/transit.png'); background-size: 100% 100%; background-repeat: no-repeat; } .car-online { margin-bottom: 50px; } } .day-data { display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 29%; margin-left: 30px; } .day-val { width: 40%; } .prefix { display: inline-block; width: 6px; height: 14px; background: #ffffff; margin-right: 20px; } .zh-title { margin-left: 30px; padding-top: 30px; font-size: 30px; font-weight: 700; text-align: left; color: #ffffff; line-height: 32px; letter-spacing: 0.3px; font-family: AlibabaPuHuiTiB; } .en-title { margin-left: 30px; font-size: 14px; font-weight: 400; text-align: left; color: #ffffff; line-height: 32px; letter-spacing: -0.91px; font-family: AlibabaPuHuiTiR; }
05-31
Here are some suggestions to optimize the code: 1. Use shorthand properties whenever possible. For example, instead of writing `background-size: 100% 100%;`, you can write `background-size: cover;`. 2. Consolidate similar styles into classes, instead of repeating them for every element. For example, you can create a class for the font family and apply it to all elements that use that font. 3. Remove unnecessary styles that are not being used or overwritten by other styles. 4. Use more specific selectors to target elements, instead of relying on the order of elements in the HTML. This will make the code more robust and easier to maintain. 5. Consider using a CSS preprocessor like Sass or Less, which can help you write cleaner and more organized code. Here's an example of how the code could be optimized: ``` .bg { width: 100%; height: 100vh; background: url('../../assets/img/info-bg.png') no-repeat center center / cover; position: relative; font-family: AlibabaPuHuiTiR; } .goBack { position: absolute; top: 34px; right: 65px; cursor: pointer; color: #fff; width: 181px; padding: 15px 10px; background: rgba(24, 31, 30, 0.52); border: 1px solid #4a524e; border-radius: 5px; font-size: 18px; font-family: AlibabaPuHuiTiR; z-index: 111; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .home-left { position: absolute; top: 18%; left: 40px; width: 41%; height: 76%; font-size: 24px; color: #fff; } .unit { font-size: 24px; color: #636363; } .home-left-title { font-size: 24px; color: #fff; line-height: 36px; } .home-right { position: absolute; top: 18%; right: 88px; width: 46%; height: 78%; } .model { display: flex; justify-content: center; align-items: center; height: 90%; } #threeContained { width: 100%; height: 100%; } .model-qk-img { width: 82%; height: 90%; background: url('../../assets/img/howo.png') no-repeat center center / cover; } .model-zk-img { width: 56%; height: 90%; background: url('../../assets/img/heavyT.png') no-repeat center center / cover; } .model-gj-img { width: 82%; height: 90%; background: url('../../assets/img/transit.png') no-repeat center center / cover; } .car-online { margin-bottom: 50px; } .day-data { display: flex; justify-content: space-between; align-items: center; height: 29%; margin-left: 30px; } .day-val { width: 40%; } .prefix { display: inline-block; width: 6px; height: 14px; background: #fff; margin-right: 20px; } .zh-title { margin-left: 30px; padding-top: 30px; font-size: 30px; font-weight: 700; text-align: left; color: #fff; line-height: 32px; letter-spacing: 0.3px; font-family: AlibabaPuHuiTiB; } .en-title { margin-left: 30px; font-size: 14px; font-weight: 400; text-align: left; color: #fff; line-height: 32px; letter-spacing: -0.91px; font-family: AlibabaPuHuiTiR; } .font-alibaba { font-family: AlibabaPuHuiTiR; } .font-alibaba-bold { font-family: AlibabaPuHuiTiB; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值