06.font&background------05.行高

最新推荐文章于 2024-05-30 15:07:12 发布
最新推荐文章于 2024-05-30 15:07:12 发布
阅读量181 收藏
点赞数
文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52551539/article/details/121084433
版权

行高：1.指的是字体实际所占的高度

         2.使用line-height来设置行高（单位可以是px或em，也可以是一个整数，若为整数，则行高的就是字体大小的整数倍，如line-height：5；font-size：20px，则表示行高为100px）

        3. 行高在字体框上下均匀分布

        4. 可以通过行高来设置行间距：行间距=行高-字体大小（font-zise）

        5. 将行高设置为与元素高度相等，则会使单行字体在元素中垂直居中

字体框：字体框实际上就是字体存在的格子，设置font-size实际上就是设置字体框的高度

向北航行五万里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS网页制作 表单button的行高问题
01-19
表单button的行高问题 下面我们先来看一个Demo的实例： HTML Code 复制代码代码如下: <input type=”submit” id=”button” value=”engage”/> CSS Code 复制代码代码如下: #button { border: 2px solid #06f; color: #06f; background-color: #6cf; font: bold 12px Arial, Helvetica, sans-serif; line-height: 50px; } 浏览器下的截图： 多效果图中，明显的告诉我们，在Firefox和O
CSS实现垂直居中的4种思路详解
12-30
行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和行高设置成相同的值，但高度其实没必要设置。实际上，文本本身就在一行中居中显示。在不设置高度的情况下，行高撑开高度。 <style&...
CSS笔记——font、line-height知识点及图片间隙、文本溢出等解决方案
bqiuer的博客
09-25 521
：指定字体的名称或类别。可以指定多个字体族，用逗号分隔，浏览器会按照指定的顺序依次寻找可用字体。：指定字体的大小。：指定字体的粗细。：指定字体的风格。：指定字体的大小写形式。：指定字体的紧缩或扩张程度。：指定文本行的高度。可取值：绝对单位：如"px"、“pt”、“mm”、“cm”、“in”。相对单位：如"em（相对父元素的大小）"、“rem（相对根元素的大小）”、“ex（小写字母高度）”、“ch”、“vw”、“vh”、“vmin”、“vmax”。数字：表示字体大小的倍数。
零基础CSS（四）行高 字号、background-系列
libufan的博客
03-31 299
一、行高和字号 1.1 行高 CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。换句话来说，padding距离是边框与行之间的距离，而不是边框与文字之间的距离。 文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么： 为了严格保证字在行里面居中，我们有一个约定：行高、字号，一般都是偶数。这样，它们的差...
11.行高/font
前端学习笔记
04-16 543
行高line-height文字是在行高里居中的//行高最好大于字号 （在行高撑起父元素高度时）行高-字号为偶数则上下平分，奇数则下面比上面多1， 字号：font-size,行高line-height 多行文本垂直居中：padding-top+padding-bottom+多个line-height font:14px/24px "宋体","微软雅黑";//font-size,line-height...
【夯实基础--CSS】=＞ 字体样式（font）、外观属性(行高)
小小前端攻城狮的博客
05-15 997
CSS字体样式 font字体 「1. font-size」 font-size属性用于设置字号(字体大小) 谷歌浏览器默认的文字大小为16px 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。 p { font-size:20px; } 单位 相对长度单位、绝对长度单位 「2. font-family」 font-family属性用于设置哪一种字体。 p { font-family:"微软雅黑";} 指定多个字体，如果
行高
The_last_knight的博客
01-19 967
行高   在之前我们有提到这个属性line-height,该属性用来设置行高，并且我们用它来设置过行间距。为了明白行高指的是什么之间的距离，我们需要明白下面这个图   一个文本内容被四条线划分，而行高指的就是基线与基线之间的距离，当不设置行高时，行高的大小为字体的大小，所以行与行之间是紧贴着的。   在导航栏练习中，为了使文字能够垂直居中对齐，我们让line-height的大小等于盒子的大...
css 宋体_CSS行高和字号的设置
weixin_39707478的博客
11-29 363
CSS行高和字号的设置1. 行高CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。基本语法：line-height: 40px;文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么：注意：1)为了严格保证字在行里面居中， 行高、字号一般都是偶数。这样，它们的差，就是偶数，就能够被2整除；2)如果行高不是偶数，则文字下面...
06.font&background------06.字体的简写属性（font）
weixin_52551539的博客
11-02 175
font：使用font可以设置字体相关的所有属性：如字体的大小（font-size），字体族（font-family）、行高（line-height）、斜体（font-style设置字体的风格）、加粗（font-weight，设置字体的字重）等样式，需要注意的是除字体的大小和字体族不可以省略不写外，其他的都可以省略，省略后使用默认值，注意属性之间用空格隔开 font语法：字体的大小/行高 字体族； 非简写斜体：font-style设置字体的风格，font-style有两个可选值：nomal（正常）、i.
【前端开发】Vue + Fabric.js + Element-plus 实现简易的H5可视化图片编辑器
热门推荐
go
11-11 1万+
目录前言一 、实战效果技术选型核心功能代码实现二、Fabric.js 简介安装创建画布监听画布事件鼠标事件监听设置画布背景设置背景颜色向画布添加图层对象获取当前选中的对象控制图层层级将画布导出成图片下载为图片画布状态记录清除对象/图层清除画布 前言 canves 绘图的运用是前端必知必会的基础，但是canves 本身并不好用，而fabric.js是基于canves的一个绘图框架库，用起来可比canves友好多了！接下来带你看看案例和初识fabric.js~ 一 、实战效果 编辑前： 编辑中： 技术选型
常用css样式属性大全（中文注释）
01-19
一 CSS文字属性：color : #999999; /*文字颜色*/font-family : 宋体,sans-serif;... /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text
CSS属性简写和选择器的优先级问题
01-19
font 属性涉及到字体、字号、行高等好几个属性，使用简短写法的时候可以节省好多代码量。虽然并非所有属性都要定义，但是一般来说 font-size 和 font-family 是必不可少的，以下是 font 的几个属性与其对应的默认值...
超全面CSS样式整理
01-21
一 字体属性：(font)  大小 {font-size: x-large;}(特大)xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD  样式 {font-style: oblique;}(偏斜体)italic;(斜体) normal;(正常)  行高 {line-...
CSS------4.行高(line-height)，背景以及三大特性
m0_60237095的博客
03-15 467
目录 3.行高 3.1 行高测量 3.2 单行文本垂直居中 CSS 背景(background) 4.2 背景图片(image) 4.3 背景平铺（repeat） 4.4 背景位置(position) 重点 4.5 背景附着 4.6 背景简写 4.7 背景透明(CSS3) 4.8 背景总结 02-CSS三大特性 5.CSS 三大特性 5.1 CSS层叠性 5.2 CSS继承性 5.3 CSS优先级（重点） CSS注释规则： 3.行高 3.1 行高测量 行高的测
说明 1px、1em、1rem、1vw、1vh 的区别
Hlleo Wrold
05-29 237
htmlvwvh。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 335
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 412
记录一次前端页面崩溃的产生及处理
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 877
Web前端三大主流框架介绍：Angular、React、Vue
button { color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 18rpx; border-radius: 3rpx; width: 70%; height: 96%; line-height: 20rpx; } .toCart{ background-color: #977fee; } .favorite{ background-color: rgb(245, 102, 126); } .cart{ background-color: rgb(238, 39, 39); } .buy{ background-color: red; }帮我换一个漂亮一点的样式文件
06-01
以下是一个美化后的样式文件示例： ``` button { color: #fff; text-align: center; text-decoration: none; display: inline-block; font-size: 18rpx; border-radius: 50rpx; width: 90%; height: 96%; line-height: 96%; margin: 2%; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.24); transition: all 0.3s ease-in-out; } .toCart { background-color: #977fee; } .favorite { background-color: rgb(245, 102, 126); } .cart { background-color: rgb(238, 39, 39); } .buy { background-color: red; } button:hover { box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.36); transform: translateY(-2rpx); } ``` 解释一下： - `color: #fff`：设置字体颜色为白色。 - `text-align: center`：设置文本居中对齐。 - `text-decoration: none`：去掉下划线。 - `display: inline-block`：将元素设置为行内块级元素，方便设置宽高和边距。 - `font-size: 18rpx`：设置字体大小为 18 像素。 - `border-radius: 50rpx`：设置圆角半径为 50 像素，让按钮看起来更加圆润。 - `width: 90%`：设置宽度为父元素的 90%，让按钮占据足够的空间。 - `height: 96%`：设置高度为父元素的 96%，让按钮紧贴父元素的边缘。 - `line-height: 96%`：设置行高为父元素的 96%，让按钮内的文本居中对齐。 - `margin: 2%`：设置外边距为父元素的 2%，让按钮之间有一定的间距。 - `box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.24)`：设置按钮的阴影效果，让按钮看起来有立体感。 - `transition: all 0.3s ease-in-out`：设置动画过渡效果，在鼠标悬停时实现按钮的微小缩放和阴影放大。 - `.toCart`, `.favorite`, `.cart`, `.buy`：为不同的按钮分别添加样式类名，方便在样式文件中单独设置样式。 - `background-color`：设置按钮的背景色。 - `button:hover`：设置鼠标悬停在按钮上时的样式效果。 - `box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.36)`：将按钮的阴影放大，增强立体感。 - `transform: translateY(-2rpx)`：将按钮向上移动 2 像素，让按钮看起来有被按下的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值