我们看到： 或者： 甚至是： 显然，在知识和知识的应用之间，有些东西丢了。 理论上，理论和实践之间并没有什么不同。遗憾的是，我们生活在实践中。 让我们看一下到底发生了什么。...在这方面，Vincent De Oliveira 曾写过一篇经典的文章“深入理解 CSS：字体参数、行高和垂直对齐”。 下面是一些实际的例子。...图 标 图标就像是与文本排成一行的小矩形。因此，所有由文本和行高引起的问题这里也都存在。众所周知，将文本与旁边的图标对齐是一项艰巨的任务。...结果就像下面这样： macOS 10.14 → macOS 10.15 操作符不再是垂直对齐的，而且还很模糊。这都是因为切换到图标字体所致。...我们能做些什么：图标字体 不要再使用字体图标。 使用普通的图片格式。为了帮你做出决策，我画了下面这张图： 看看苹果公司怎么费力地将复选标记放入矩形内，以及将矩形放到文本标签旁： 然而他们还是失败了！
总结： 如果遇到一些结构和样式比较简单的小图标，就用字体图标 如果遇到一些结构和样式较复杂的小图标，仍然选用精灵图 3.3 字体图标使用 字体图标是一些网页常见的小图标，我们直接网上下载即可。...此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。...必须满足三个条件： /* 1.先强制一行内显示文本 */ /*默认 normal 是自动换行，nowrap是强制一行显示文本*/ white-space: nowrap; /* 2.超出的部分隐藏...; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式...文字围绕浮动元素 巧妙运用浮动元素不会压住文字的特性 7.3 行内块巧妙运用 页码在页面中间显示 把这些链接盒子转换为行内块，之后给父级指定 text-align: center 利用行内块元素中间有缝隙
： 可以让一行文本在盒子中垂直居中对齐。...导航栏案例 使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。...通常我们使用于强制一行显示内容 normal : 默认处理方式 nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。...让子元素在父容器中间显示 space-between 项目位于各行之间留有空白的容器内。...不换行，则 收缩（压缩） 显示 强制一行内显示 wrap 规定灵活的项目在必要的时候拆行或拆列。 wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
一、连续排列的链接图片样式及核心要点 1、实现效果 实现如下效果 , 在下面的布局中 , 水平放置 3 个图片链接 ; 每个图片链接 占 宽度的 1/3 ; 2、标签结构设置 将布局中的 三个 链接图片..., 放置在 单独的 标签中 , 每个 标签中放置一个 链接标签 , 在 链接标签中包裹一个 图片 ; 在布局的 左上角 和 右上角 都有一个圆角 , 并且矩形图片超过圆角的部分被隐藏了 , 设置圆角和超出部分隐藏样式 : .brand { /* 设置圆角后 超过圆角的图片不再显示 */...height: 45px; } .app ul li { /* 设置左浮动 令列表元素水平排列 */ float: left; /* 设置高度 45 像素 = 行高 垂直居中...图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素 可以设置宽高 */ display
: 40px; /* 上下 10 像素外边距 */ margin: 10px 0; } 5、设置文本 在链接中的文本 , 放在 标签中 , 该标签宽度默认充满父容器 , 高度自适应...; 将其设置为 block 块级元素 , 就可以放置在图片下方 ; 文本 span 样式为 : nav a span { /* 导航栏中的文本 设置为 块级元素 */ display...设置字体颜色值 */ color: #666; /* 取消链接的底部横线样式 */ text-decoration: none; } .clearfix:after {...height: 45px; } .app ul li { /* 设置左浮动 令列表元素水平排列 */ float: left; /* 设置高度 45 像素 = 行高 垂直居中...图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素 可以设置宽高 */ display
3.字体图标iconfont 字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。...style.css，复制如图代码引入我们自己的CSS文件中 3.html标签内添加小图标 我们打开解压文件中的 demo.html ，复制想要的图标，粘贴进 标签中 mac...官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效 让图片和文字垂直居中，修改的是img或者textarea属性,行内块元素都可以 图片底侧空白缝隙解决： bug.../* 1.先强制一行内显示文本 */ white-space: nowrap; /*默认 normal 是自动换行，nowrap是强制一行显示文本*/ /* 2.超出的部分隐藏 *...; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式
, 在垂直或水平方向上填充剩余空间 ; class Expanded extends Flexible { /// Creates a widget that expands a child of...Row 组件 中会自动填充水平方向上的剩余空间 ; Expanded 组件 在 Column 组件 中会自动填充垂直方向上的剩余空间 ; 代码示例 : // 普通样式的 Row Row( children...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色..., 居中显示 alignment:Alignment.center, // 设置装饰器..., 居中显示 alignment:Alignment.center, // 设置装饰器
### 19.设置形状水平/垂直翻转 在形状的属性中可以对形状进行【水平翻转】和【垂直翻转】的操作。 ### 20.设置列表框的内容 下拉列表框与列表框都可以设置内容-列表项。...### 24.设置图片文本 设置图片文本需要在图片上点击，选择【编辑文本】，方可进行图片上的文字编辑 ### 25.切割/裁剪图片 在图片的元件属性中，设有切割和裁剪功能的图标，点击即可使用相应功能...例如，使用少量特殊字体或者图标字体时，即可将元件转换为图片，避免在未安装字体的设备上浏览原型时不能正常显示。...页面居中是指在浏览器中查看原型时页面内容居中显示。 ### 33.设置页面背景（图片/颜色） 在页面【样式】中可以编辑页面的背景颜色以及背景图片。...在Web字体设置中，点击【+】添加新的配置，勾选【链接到“.CSS”文件】选项，将该字体官方网站提供的“.CSS”文件地址填入超链接中即可。这样只要浏览原型时有网络支持，即可正常显示字体。
, 始终在最上方显示 */ position: fixed; /* 防止外边距塌陷进行的设置 */ overflow: hidden; /* 搜索栏宽度充满全屏 */...设置字体颜色值 */ color: #666; /* 取消链接的底部横线样式 */ text-decoration: none; } .clearfix:after {...下面是搜索栏样式 */ .search-wrap { /* 第二排搜索栏样式 */ /* 该样式在滑动时 , 始终在最上方显示 */ position: fixed;...*/ width: 40px; height: 44px; } .search-btn::before { /* 在 指定的标签元素内部的 前面 插入内容 */ /*...图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素 可以设置宽高 */ display
指定的标签元素内部的 前面 插入内容 */ /* 左侧按钮盒子中 插入 JD 图片 */ content: ""; /* 显示模式设置为块级元素 */ display:...JD 图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素 可以设置宽高 */ display...图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素 可以设置宽高 */ display...设置字体颜色值 */ color: #666; /* 取消链接的底部横线样式 */ text-decoration: none; } .clearfix:after {...图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素 可以设置宽高 */ display
em ; 百分比 ; line-height: 24px; 文本垂直居中 : 设置 行高 = 高度 样式 , 文本即可在 盒子模型 中 垂直居中 ; div { height: 200px;...: 默认属性 , 没有装饰 , 取消链接的下划线 ; ( 常用 ) underline : 保留链接的下划线 ; ( 常用 ) overline : 在文本上面划一条线 ; ( 基本不用 ) line-through...不同的情景使用不同类型的标签 ; 块级元素 : div 标签 独占一行显示 , 对应 块标签 ; 行内元素 : span 标签可以 在一行放置多个进行显示 , 对应 行内标签 ; 块级元素 特点 :...的 100% 宽度 ; 容器特点 : 块级元素 作为 容器 , 可以在其中 放置 块级元素 和 行内元素 ; 2、行内元素 行内元素 可以 在一行中 同时放置多个 , 常见的行内元素有 : 链接标签...文本 或 行内元素 , 不能存放 块级元素 ; 3、行内块元素 行内块元素 标签 是 特殊的标签 , 可以在 一行内显示多个 , 但是同时也可以为其设置 宽高属性 和 对齐属性 ; 图片标签 : <img
P98.后代选择器 P99.子选择器 P100.随堂练习 P101.并集选择器 P102.伪类选择器 P106.元素显示模式 P114.垂直居中 P115.背景样式 P129.css的三大特性 P62....右键]->[空白处]->[检查] 2.使用调试工具 检查: 左边html代码,右边css代码 ctrl+滚轮/±: 调整代码显示大小 黑框+箭头图标可以查看所选页面对应的html和css...特点: 宽和高直接设置是无效的 默认宽度就是它本身内容的宽度 行内元素只能容纳文本和其他行内元素 特殊的:行内元素-a链接元素内不能再放链接(不然我点哪个),a链接元素里可以放块元素...P114.垂直居中 首先css没有提供文字垂直居中的代码,我们采用让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中.... 这里我们并没有给p标签设置样式,但是给p标签的父标签设置了文本颜色和字体的样式,子标签p就继承过来了 这个其实我们早就用过,我们之前在body
不需要这个技术 2.需要测量每个小背景图片的大小和位置 3.给盒子指定小的背景图片时，背景定位基本都是负值 ## 字体图标 优势：浏览器支持性比较好，灵活性大；体积小，加载速度快，节省带宽流量；减轻服务器压力...2.在html文件标签里面添加结构 3.在html文件样式style里面声明字体：告诉代码和别人使用我们自己自定义的字体（一定注意路径问题） 4.给盒子设置字体即可 追加字体图标 原来的不能删除，继续使用...轮廓线 outline: 0/ none; ----- 去掉轮廓线 防止文本域拖拽 resize:none; vertical-align 垂直对齐方式 如果让单行文本垂直居中 -- 使用line-height...，如果处理图片和文本的垂直对齐方式，line-height=高 不可以实现！...*/ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp
使用 标签作为父盒子 , 其中容纳三个 链接 标签 , 每个链接标签中包含一个 标签 ; <!...; } 使用结构伪类选择器 , 分别对 第一个 标签和第二三个 标签进行设置 , 前者占 50% 宽度 , 后者占 25% 宽度 ; .news a:nth-child(1) {...height: 45px; } .app ul li { /* 设置左浮动 令列表元素水平排列 */ float: left; /* 设置高度 45 像素 = 行高 垂直居中...下面是搜索栏样式 */ .search-wrap { /* 第二排搜索栏样式 */ /* 该样式在滑动时 , 始终在最上方显示 */ position: fixed;...图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素 可以设置宽高 */ display
一、顶部固定定位搜索栏 需求 : 制作如下搜索栏 ; 1、固定定位盒子居中对齐 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; /* 固定定位盒子始终显示在浏览器中指定的位置...0 , 只要有一个子项目设置了 flex: 1; 样式 , 那么该子项目就会自动占据剩余的所有空间 ; 4、二倍精灵图设置 下图中的 放大镜图片 和 头像图标 都定义在精灵图中 , 二倍精灵图设置步骤...= 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */ height...行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */ height: 26px; line-height:...上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */ height: 26px;
作用 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。...line-height: 24px; 行高测量 行高测量方法： 行高测量方法行高我们利用最多的一个地方是：可以让单行文本在盒子中垂直居中对齐。 文字的行高等于盒子的高度。...行高 = 上距离 + 内容高度 + 下距离 上距离和下距离总是相等的，因此文字看上去是垂直居中的。...通常我们使用于强制一行显示内容 white-space:normal ；默认处理方式 white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。...「注意」： 一定要首先强制一行内显示，再次和overflow属性 搭配使用 4.3 总结三步曲 /*1. 先强制一行内显示文本*/ white-space: nowrap; /*2.
文章目录 一、案例效果 二、核心要点说明 1、网页默认样式 2、盒子模型居中显示 3、设置渐变背景 4、设置列表浮动 5、设置文本水平垂直居中 6、设置链接文本样式 7、设置鼠标经过的样式 三、完整代码示例...设置总体背景 : 为 body 标签设置背景颜色或图片即可 图片自适应填充 : 设置 标签的内容宽度为 100% 即可 , 目的是令图片自适应缩放 ; /* 清除标签默认的内外边距 *...盒子模型居中显示 : 此处涉及到了 顶部的 Banner 图片 , 和 下方的 导航栏 需要居中显示 , 设置 margin: auto; 和 margin: 0 auto; 都可以实现该效果 ;...; 5、设置文本水平垂直居中 设置 text-align: center; 样式 , 可以使文本水平居中 ; 设置 行高 = 内容高度 , 可以设置文字垂直居中 ; /* 设置链接尺寸 */...*/ text-align: center; 6、设置链接文本样式 链接一般需要设置 字体大小 , 颜色 , 取消文本装饰 ( 链接的下划线 ) ; /* 设置字体大小 */ font-size
15 像素 */ .box { margin-top: 15px; } 3、左侧文本盒子尺寸测量和样式 标题盒子判定 , 上面的标题 , 可以将其设置为 垂直居中 的样式 , 垂直居中 , 需要行高...30 像素 */ margin-right: 30px; /* 设置文本颜色和字体大小 */ font-size: 12px; color: #a5a5a5; } 完整代码 : /* 清除标签默认的内外边距...: skyblue;*/ } /* 鼠标经过链接时的样式 */ .nav ul li a:hover { /* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom...的文本颜色 这是所有的文本样式 课程在链接里面 由 a 标签设置样式 除 a 标签外 只剩下竖线 的样式*/ .goods-item { float: left; color:...#bfbfbf; } /* 链接标签的样式 */ .goods-item a { /* 设置 链接 字体大小和颜色值 */ font-size: 16px; color: #050505;
-- 外部样式，引入使用link标签，写在head标签中,是单标签，但是rel属性和href属性是必须的，且rel="stylesheet"是固定的引入外部样式才可以生效,href属性指定外部文件的资源路径...常用图片与文字垂直对其； 值 说明 middle 垂直居中 top 顶部 bottom 底部 居中 --> img,span{ vertical-align: middle; } 3.4 文本阴影 在标准的 HTML 中那样分开显示。...，当过了设置的时间值后才会被触发 ； 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 ； 0：默认值，元素过渡效果立即执行； 7.3 过度的触发机制 1.伪类触发 ：hover 鼠标悬停和划过时的显示效果
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
