【转载】font-size:100%有什么作用

最新推荐文章于 2025-06-09 20:24:00 发布
最新推荐文章于 2025-06-09 20:24:00 发布
阅读量144 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zyy711865/archive/2012/09/11/2680582.html
本文探讨了CSS中设置font-size:100%的作用及其重要性。通过具体示例解释了如何通过此设置使标题元素正确继承父元素的字体大小。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

　　h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

　　input,select,textarea,samp {font-size:100%;}

　　看到一些css重设,请问设置font-size:100%的目的和作用是什么?

　　---------------------------------------------------------------------------------------

　　假如你设置body{font-size:12px;}

　　但h1是不会继承这个12px，它会按照一定百分比增加字号，但如果给h1显试指定font-

　　size:100%;它就会继承body设定的字体大小。

　　1. 它改变了默认的大小。

　　2. 这些元素本身不会继承父体的字体大小，设置了font-size:100%后就能自动继承。

转载于:https://www.cnblogs.com/zyy711865/archive/2012/09/11/2680582.html

JS实现购物车动态功能
weixin_30933531的博客
05-25 5830
整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。 该案例购物车主要功能如下： 1、 商品单选、全选、反选功能 2、 商品添加、删除功能 3、 商品价格自动计算 具体效果： 打开效果 添加商品数量（自动计算价格）： 取消选择： 删除商品： 商品显示与隐藏： 做这个案例呢我用了之前自己封装的框架，所以需要的小伙伴，要到我的...
前端如何封装一个组件？怎么造轮子？手写js封装一个dialog弹窗组件。
Python研究所
01-08 2063
此文转载自：https://blog.youkuaiyun.com/clli_Chain/article/details/112307521 文章目录 一、现在要你完成一个Dialog组件，说说你设计的思路？它应该有什么功能？大体功能 二、文档结构三、样式Css文件四、模拟调用场景index.html文件五、dialog弹窗js组件最终效果 一、现在要你完成一个Dialog组件，说...
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%的目的和作用是什么? ————————————————————————————— 假如你设置body{font-size:12px;} 但h1是不会继承这个12px，它会按照一定百分比增加字号，但如果给h1显试指定font- size:100%;它就会继承body设定的字体大小。 1. 它改变了默认的大小。
(转)关于font-size:100%
09-10 338
重设浏览器默认字体大小 h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} 假如你设置body{font-size:12px;}但h1是不会继承这个12px，它会按照一定百分比增加字号，但如果给h1显示指定font-size:100%;它就会继承body设定的字体大小。 1. 它改变了默认的大小。2. 这些元素本身不会...
font-size:100%理解
weixin_30261095的博客
01-14 318
font-size是设置字体的属性 常见设置字体大小有 px, rem,em 但是有一种设置就是设置 font-size为百分比。 font-size:100%; 设置字体属性为默认大小，是相对于浏览器默认字体大小或继承body设定的字体大小来说的 example: body{ font-size:12px; } div{ font-size:100%...
CSS字体设计要点解析
seekgirl
08-25 202
2009-08-25 08:57:30 来源:redbots.cn 【大 中 小】 评论：0 条 我要投稿 主机网全新上线，买空间、服务器就上主机网，安全有保障！CNIDC.COM 乍一听css字体设置很容易，其实真做起来不然，我们工程师使用全力，他们在不同浏览器调整字体的大小知道的得到合适的结果。实际上有一点深入的理解就能起到很大的作用。 font-size 属性： fo...
<template> <view class="container"> <!-- 顶部用户信息区域 --> <view class="user-info-section"> <view class="avatar-container"> <image src="/static/workbanch/banner/workbench/4.jpg" class="avatar-image" mode="aspectFill" /> <view class="avatar-frame"></view> </view> <!-- 用户信息 --> <view class="user-details"> <text class="welcome-text">您好，</text> <text class="username">{{ userName || '加载中...' }}</text> <view class="user-meta"> <text class="user-role">{{ userRole }}</text> <text class="user-dept">{{ userDept }}</text> <text class="user-phone" v-if="userPhone">电话：{{ userPhone }}</text> </view> </view> </view> <!-- 功能板块区域 --> <view class="function-section"> <!-- 重置密码按钮 --> <view class="function-item" @click="handleResetPassword" @touchstart="handleTouchStart('reset')" @touchend="handleTouchEnd('reset')" > <view class="item-left"> <image src="/static/workbanch/icons/reset-password.png" class="item-icon" /> <text class="item-text">重置密码</text> </view> <view class="arrow-icon">›</view> </view> <!-- 分隔线 --> <view class="divider"></view> <!-- 退出登录按钮 --> <view class="function-item logout-item" @click="handleLogout" @touchstart="handleTouchStart('logout')" @touchend="handleTouchEnd('logout')" > <view class="item-left"> <image src="/static/workbanch/icons/logout.png" class="item-icon" /> <text class="item-text">退出登录</text> </view> <view class="arrow-icon">›</view> </view> </view> <!-- 这里添加了function-section的结束标签 --> <!-- 重置密码弹窗 --> <view v-if="showResetModal" class="modal-overlay" @tap="closeModal"> <view class="modal-content" @tap.stop> <view class="modal-header"> <text class="modal-title">重置密码</text> <text class="modal-close" @tap="closeModal">×</text> </view> <view class="input-group"> <!-- 旧密码输入框 --> <view class="input-item"> <image src="/static/workbanch/icons/lock.png" class="input-icon" /> <input class="password-input" :type="showOldPassword ? 'text' : 'password'" v-model="oldPassword" placeholder="请输入旧密码" placeholder-style="color: #aaa;" /> <view class="eye-icon-wrapper" @tap="togglePasswordVisibility('old')"> <image :src="showOldPassword ? '/static/workbanch/icons/eye-open.png' : '/static/workbanch/icons/eye-close.png'" class="eye-icon" /> </view> </view> <!-- 新密码输入框 --> <view class="input-item"> <image src="/static/workbanch/icons/lock.png" class="input-icon" /> <input class="password-input" :type="showNewPassword ? 'text' : 'password'" v-model="newPassword" placeholder="请输入新密码（6-10位）" placeholder-style="color: #aaa;" /> <view class="eye-icon-wrapper" @tap="togglePasswordVisibility('new')"> <image :src="showNewPassword ? '/static/workbanch/icons/eye-open.png' : '/static/workbanch/icons/eye-close.png'" class="eye-icon" /> </view> </view> <!-- 确认密码输入框 --> <view class="input-item"> <image src="/static/workbanch/icons/lock.png" class="input-icon" /> <input class="password-input" :type="showConfirmPassword ? 'text' : 'password'" v-model="confirmPassword" placeholder="请确认新密码" placeholder-style="color: #aaa;" /> <view class="eye-icon-wrapper" @tap="togglePasswordVisibility('confirm')"> <image :src="showConfirmPassword ? '/static/workbanch/icons/eye-open.png' : '/static/workbanch/icons/eye-close.png'" class="eye-icon" /> </view> </view> </view> <!-- 按钮区域 --> <view class="modal-buttons"> <view class="cancel-btn" @tap="closeModal">取消</view> <view class="confirm-btn" @tap="handleSavePassword">保存</view> </view> </view> </view> </view> </template> <script setup> import { ref } from 'vue'; import { onShow, onTabItemTap } from '@dcloudio/uni-app'; // 用户信息相关 const userName = ref(''); const userRole = ref(''); const userDept = ref(''); const userPhone = ref(''); //重置密码 const showResetModal = ref(false); const oldPassword = ref(''); const newPassword = ref(''); const confirmPassword = ref(''); const showOldPassword = ref(false); const showNewPassword = ref(false); const showConfirmPassword = ref(false); // 触摸状态 const touchState = ref({ reset: false, logout: false }); // 页面显示时加载数据 onShow(() => { // console.log('onShow 被触发'); loadUserInfo(); // 加载用户信息 }); // tabbar 页面被点击时触发 onTabItemTap(() => { // console.log('tabbar 页面被点击'); loadUserInfo(); // 强制刷新数据 }); const forceRefresh = true; // 加载用户信息 const loadUserInfo = async () => { try { const userInfo = uni.getStorageSync('userInfo'); // console.log('本地缓存 userInfo:', userInfo); if (!forceRefresh && userInfo && userInfo.userName) { // 使用缓存 userName.value = userInfo.nickName || userInfo.userName || '未知用户'; userRole.value = userInfo.roles?.[0]?.roleName || '普通用户'; userDept.value = userInfo.dept?.deptName || '未分配部门'; userPhone.value = userInfo.phonenumber || '暂无电话'; } else { // console.log('开始请求用户信息...'); const res = await uni.request({ url: 'http://172.26.26.43/dev-api/system/user/profile', method: 'GET', header: { 'Authorization': 'Bearer ' + uni.getStorageSync('token') } }); // console.log('接口返回结果:', res); if (res.statusCode === 200 && res.data.code === 200) { const userData = res.data.data; uni.setStorageSync('userInfo', userData); userName.value = userData.nickName || userData.userName || '未知用户'; userRole.value = userData.roles?.[0]?.roleName || '普通用户'; userDept.value = userData.dept?.deptName || '未分配部门'; userPhone.value = userData.phonenumber || '暂无电话'; } else { uni.showToast({ title: '获取用户信息失败', icon: 'none' }); uni.redirectTo({ url: '/pages/login/login' }); } } } catch (error) { console.error('加载用户信息失败:', error); uni.showToast({ title: '加载用户信息失败', icon: 'none' }); uni.redirectTo({ url: '/pages/login/login' }); } }; // 处理触摸开始 const handleTouchStart = (type) => { touchState.value[type] = true; }; // 处理触摸结束 const handleTouchEnd = (type) => { touchState.value[type] = false; }; // 处理重置密码按钮点击 const handleResetPassword = () => { uni.vibrateShort(); // 添加震动反馈 showResetModal.value = true; // 重置表单 oldPassword.value = ''; newPassword.value = ''; confirmPassword.value = ''; showOldPassword.value = false; showNewPassword.value = false; showConfirmPassword.value = false; }; // 切换密码可见性 const togglePasswordVisibility = (type) => { switch (type) { case 'old': showOldPassword.value = !showOldPassword.value; break; case 'new': showNewPassword.value = !showNewPassword.value; break; case 'confirm': showConfirmPassword.value = !showConfirmPassword.value; break; } }; // 关闭弹窗 const closeModal = () => { showResetModal.value = false; }; // 保存密码 const handleSavePassword = async () => { // 表单验证 if (!oldPassword.value || !newPassword.value || !confirmPassword.value) { uni.showToast({ title: '请填写所有密码字段', icon: 'none' }); return; } if (newPassword.value.length < 6 || newPassword.value.length > 10) { uni.showToast({ title: '密码长度需在6-10位之间', icon: 'none' }); return; } if (newPassword.value !== confirmPassword.value) { uni.showToast({ title: '两次输入的新密码不一致', icon: 'none' }); return; } // 调用API try { const token = uni.getStorageSync('token'); if (!token) { uni.showToast({ title: '请重新登录', icon: 'none' }); return; } const res = await uni.request({ url: 'http://172.26.26.43/dev-api/system/user/profile/updatePwd', method: 'PUT', header: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, data: { oldPassword: oldPassword.value, newPassword: newPassword.value } }); // 处理响应 if (res.statusCode === 200 && res.data.code === 200) { uni.showToast({ title: '密码修改成功，请重新登录', icon: 'success', duration: 2000 }); // 延迟执行跳转 setTimeout(() => { // 清除用户数据 uni.removeStorageSync('token'); uni.removeStorageSync('userInfo'); // uni.removeStorageSync('savedUsername'); // 跳转到登录页 uni.reLaunch({ url: '/pages/login/login' }); }, 2000); closeModal(); } else { const errorMsg = res.data.msg || '密码修改失败'; uni.showToast({ title: errorMsg, icon: 'none' }); } } catch (error) { console.error('修改密码失败:', error); uni.showToast({ title: '请求失败，请稍后再试', icon: 'none' }); } }; // 处理退出登录 const handleLogout = () => { uni.vibrateShort(); // 添加震动反馈 uni.showModal({ title: '确认退出', content: '您确定要退出当前账号吗？', confirmText: '退出登录', confirmColor: '#e74c3c', success: (res) => { if (res.confirm) { // 清除用户相关数据 uni.removeStorageSync('token'); uni.removeStorageSync('userInfo'); uni.removeStorageSync('savedUsername'); // 显示退出提示 uni.showToast({ title: '已退出登录', icon: 'success', duration: 1500 }); // 跳转到登录页 setTimeout(() => { uni.reLaunch({ url: '/pages/login/login' }); }, 1500); } } }); }; </script> <style lang="scss" scoped> .container { padding: 20rpx; background-color: #f5f7fa; min-height: 100vh; } /* 用户信息区域样式 */ .user-info-section { display: flex; align-items: center; padding: 30rpx; margin: 20rpx 0; background: linear-gradient(135deg, #3498db, #8e44ad); color: white; position: relative; overflow: hidden; border-radius: 24rpx; &::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); pointer-events: none; } } .user-phone { display: block; font-size: 24rpx; // margin-top: 10rpx; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.2); padding: 4rpx 12rpx; border-radius: 20rpx; backdrop-filter: blur(10px); } .avatar-container { position: relative; width: 120rpx; height: 120rpx; margin-right: 30rpx; } .avatar-image { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; } .avatar-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4rpx solid rgba(255, 255, 255, 0.3); border-radius: 50%; box-sizing: border-box; } .user-details { flex: 1; } .welcome-text { font-size: 28rpx; opacity: 0.9; } .username { display: block; font-size: 40rpx; font-weight: bold; margin: 8rpx 0; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); } .user-meta { display: flex; flex-wrap: wrap; gap: 15rpx; margin-top: 15rpx; } .user-role, .user-dept { font-size: 24rpx; background: rgba(255, 255, 255, 0.2); padding: 4rpx 12rpx; border-radius: 20rpx; backdrop-filter: blur(10px); } /* 功能板块区域 */ .function-section { background-color: #fff; border-radius: 24rpx; margin: 30rpx 40rpx; /* 左右边距增加 */ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); overflow: hidden; } .function-item { display: flex; align-items: center; justify-content: space-between; padding: 30rpx 35rpx; /* 增加左右内边距 */ position: relative; transition: all 0.2s ease; /* 点击效果 - 缩放 */ &:active { transform: scale(0.98); background-color: #f8f8f8; } /* 触摸效果 - 高亮 */ &.touch-active { background-color: #f0f9ff; transform: scale(0.98); .item-text { font-weight: bold; } } } .logout-item { .item-text { color: #e74c3c; } &.touch-active { background-color: #fff0f0; } } .item-left { display: flex; align-items: center; } .item-icon { width: 44rpx; height: 44rpx; margin-right: 20rpx; transition: transform 0.2s ease; .touch-active & { transform: scale(1.1); } } .item-text { font-size: 32rpx; color: #333; transition: all 0.2s ease; .touch-active & { transform: translateX(5px); } } .arrow-icon { font-size: 40rpx; color: #999; transform: scale(1.5, 1.5); transition: all 0.2s ease; .touch-active & { transform: scale(1.5, 1.5) translateX(-5px); } } .divider { height: 1rpx; background-color: #f0f0f0; margin: 0 35rpx; /* 与内边距一致 */ } /* 动画效果 */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 0.3s ease; } /* 重置密码弹窗*/ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background-color: #fff; width: 80%; max-width: 600rpx; border-radius: 24rpx; overflow: hidden; box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2); animation: slideUp 0.3s ease; } @keyframes slideUp { from { transform: translateY(100rpx); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; background-color: #f8f8f8; border-bottom: 1rpx solid #eee; } .modal-title { font-size: 34rpx; font-weight: bold; color: #333; } .modal-close { font-size: 40rpx; color: #999; padding: 10rpx 20rpx; } .input-group { padding: 30rpx; } .input-item { display: flex; align-items: center; margin-bottom: 30rpx; padding-bottom: 15rpx; border-bottom: 1rpx solid #eee; position: relative; &:last-child { margin-bottom: 0; } } .input-icon { width: 36rpx; height: 36rpx; margin-right: 20rpx; opacity: 0.7; } .eye-icon-wrapper { position: absolute; right: 10rpx; top: 50%; transform: translateY(-50%); width: 60rpx; height: 60rpx; display: none; align-items: center; justify-content: center; z-index: 100; touch-action: manipulation; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; pointer-events: auto; // 确保点击事件有效 &:active { background-color: rgba(200, 200, 200, 0.8); transform: translateY(-50%) scale(0.95); } } .eye-icon { width: 40rpx; height: 40rpx; opacity: 0.7; transition: opacity 0.2s; } .password-input { flex: 1; height: 70rpx; /* 增加高度 */ font-size: 32rpx; color: #333; padding-right: 80rpx; /* 增加右侧内边距 */ } .modal-buttons { display: flex; border-top: 1rpx solid #eee; } .cancel-btn, .confirm-btn { flex: 1; height: 90rpx; line-height: 90rpx; font-size: 32rpx; border-radius: 0; background: none; position: relative; &::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1rpx; background-color: #eee; } } .cancel-btn { color: #666; &:active { background-color: #f8f8f8; } } .confirm-btn { color: #3498db; font-weight: bold; &:active { background-color: #f0f9ff; } } .confirm-btn::after { left: 0; } .cancel-btn::after { display: none; } </style> 我想要点击重置密码弹出的密码输入框动态绑定type，图标设置click事件，v-show控制图标，定义showPassword == false默认闭眼，点击图标时showPassword 取反。showPassword.value == false时，type为password（密码不显示）；showPassword.value == true，type为text（密码显示） ———————————————— 版权声明：本文为优快云博主「sirenaki」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.youkuaiyun.com/m0_69688393/article/details/128250281
最新发布
08-08
2. 或者，如果希望在没有输入内容时隐藏眼睛图标，可以绑定`v-show="oldPassword"`（例如，当有输入内容时才显示眼睛图标）。 但是，根据需求，我们要求“在输入密码后能查看输入的具体内容，哪怕旧密码已经输入...
Qt Qss样式表详解
芒种、的博客
09-24 6472
1         使用Qss设置QT程序界面的样式和皮肤 1.1  Qss的功能 Qt程序界面中控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性可以通过Qss文件来设置，美化UI界面。实现界面和程序的分离，快速切换皮肤。 1.2  QSS基本属性设置 Qss的强大在于组合功能的强大，这里只是简单介绍基本功能，将简单功能组合起来才能实现好看的效果。 Qss背景属性（Backgr
【高频考点精讲】CSS混合模式详解：如何用mix-blend-mode实现酷炫的图片叠加效果
全栈老李的博客
06-09 901
就像CSS里的魔法药水，少量使用能让设计瞬间高级。但记住老李的话——技术是调味料不是主菜，别为了炫技滥用。下期想了解什么CSS黑科技？评论区告诉我。（本文技术观点由全栈老李原创，转载需注明出处）
font-size:100%有什么作用
weixin_30480583的博客
03-21 345
　　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:100%有什么作用?
weixin_34343308的博客
06-16 176
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:100%有什么作用?
abcdefgoup的博客
07-28 901
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} input,select,textarea,samp {font-size:100%;} 看到一些css重设,请问设置font-size:100%的目的和作用是什么? 假如你设置body{font-size:12px;} 但h1是不会继承这个12px，它会按照一
font-size：100%作用是干什么的呢
weixin_46603501的博客
01-11 733
我们都知道一些标签有自己的样式属性，如font-size，padding等。 设置了font-size：100%，它改变了默认的大小，会按父元素的字体大小来显示。
font-size:100% 原因
weixin_30555125的博客
01-27 214
The browser default which is something like 16pt for Firefox, You can check by going into Firefox options, clicking the Content tab, and checking the font size. You can do the same for other browsers ...
`font-size` 属性用来指定文本的字体大小。
2302_82146345的博客
06-07 1011
例如，如果一个元素的 `font-size` 设置为 `2em`，那么这个元素中的文本的字体大小就是父元素字体大小的两倍。这个属性可以用多种单位来定义字体的大小，最常用的是像素 (`px`)，百分比 (`%`)，和 `em` 单位。- 对于响应式设计，建议使用 `em` 或 `rem` 单位，因为它们可以更好地处理不同屏幕尺寸和分辨率下的字体大小。- 当使用 `em` 或 `rem` 单位时，应谨慎处理字体大小的继承和累积效果，以避免不期望的结果。### 使用 `em` 和 `px` 的优点。
font-size字体大小
m0_74172068的博客
10-18 5653
提示：网页文字默认的字体大小是12px，也就是你设置的字体小于12px，默认都会以12px大小显示 面试经常会问到，如何在页面小于12px的字体？font- size用来设置文字，字体大小，常用的单位是px像素，还有%百分比，移动端用的单位em。bloder表示更粗的字符：lighter；设置字体的粗细，通常使用的值有normal和bold两个值，或其对应数字400与700来表示。字体大小以百分比为单位，相对的是父元素font-size大小。百分比相对父元素的font-size大小而言。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值