一、文字溢出问题 ---- 在元素对象内部显示文字 , 如果文本过长 , 则会出现文本溢出的问题 ; 下面的示例中 , 在 150x25 像素的盒子中 , 显示 骐骥一跃，不能十步;驽马十驾，功在不舍;...; 显示效果 : 二、文字溢出处理方案 ---- 文字溢出处理方案 : 首先 , 强制文本在一行中显示 ; white-space: nowrap...文本显示方式 : 默认方式 : 显示多行 ; white-space: normal; 显示一行 : 强行将盒子中的文本显示在一行中 ; white-space: nowrap; text-overflow...省略号 ; text-overflow : clip; 显示省略号 : 文本溢出时 , 显示 ....../title> div { width: 150px; height: 25px; border: 1px solid red; /* 首先 强制文本在一行中显示
* 行高相关的现象和解决方案 * 行高的调整 * 底线 顶线，底线和顶线 之间 是文本占据的区域。 * 基线(base line)，英文文字的对齐线。...* 原因：img也是inline的，因此img要遵守 行高的构成，img会按照baseline对齐，而 在基线和底线之间 是留有空隙的。...但是overflow-wrap和word-wrap都是指的同一个东西。...Hack 用来处理特定浏览器的办法，来兼容不同浏览器，在一部分浏览器上生效的css。...伪类是表示 一种状态的(比如某元素 处在 鼠标悬停其上的状态hover)。 2. 伪元素 是真实存在的状态，在页面中是可以显示内容的。 3. 伪元素使用双冒号，伪类单冒号。
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号。...对于文本的溢出，我们可以分成两种形式： 单行文本溢出 多行文本溢出 实现方式 单行文本溢出省略 理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现 实现方式也很简单，涉及的css属性有： text-overflow...：规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space：设置文字在一行显示，不能换行 overflow：文字长度超出限定宽度，则隐藏超出的内容 overflow设为hidden，...： -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性） display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示...9.Js 动画与 CSS 动画区别及相应实现 CSS3 的动画的优点 在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化 代码相对简单 缺点 在动画控制上不够灵活 兼容性不好 JavaScript
三、不要使用图像来表示文本 使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力，但是它们的加载速度很慢。...这种方法也适用于 CSS，因为浏览器会缓存外部化的文本，而（在 HTML 页面自身中）以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。...有时候，您必须使用表格（并且它们被认为是显示表格数据的出色实践）。如果是这样，明确地指定表格单元格、行和列的宽度和高度，否则，浏览器必须执行许多操作来计算如何显示它们，这会降低页面加载速度。...十一、设置图像大小 与表格单元格、行和列一样，当您未明确设置图像大小时，浏览器需要执行计算来显示图像，这会降低处理速度。...因此，频繁加载但未进行更新的内容可以存储在 Gears 数据库中，该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有 next 请求都可以从数据库（而不是服务器）直接加载。
如果屏幕宽度大于1300像素，则6张图片并排在一行。 如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。 如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。...如果屏幕宽度在400像素以下，则6张图片分成三行。 mediaqueri.es上面有更多这样的例子。 这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。...: 600px)" href="smallScreen.css" /> 如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。...除了用html标签加载CSS文件，还可以在现有CSS文件中加载。 ...有很多方法可以做到这一条，服务器端和客户端都可以实现。 （完）
Studio Code 微软出品 Microsoft Sublime Text WebStorm 和PyCharm出自同一个公司VSCode操作面板 创建文件的两种方式 创建文件，手动保存文件，不推荐...+tab键 html5+tab键 常用标签01 h1~h6 header 标签 img标签 src:图片路径 alt: 图片加载失败时显示，数据分析及搜索引擎收录图片 title:光标放在图片上提示.../css/main.css"> CSS书写方式小结 临时设置某一个标签的样式，或测试等可以选择行内式网站首页用嵌入式，优点加载快，网页显示快 工作中常用外链式，其他界面，...实现HTML和CSS的分离和复用 15-CSS常用选择器01 标签选择器类选择器 层级选择器 16-CSS常用属性 文本属性 font-size 字体大小 color 文字颜色 font-family...+ B 在指定浏览器打开
默认情况下，块级元素会独占一行。例如都是块级元素，当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。...行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。例如等，对于行内元素，不能设置其高度和宽度。 还有一种元素是行内块级元素，比如元素等。...这些元素可以和其他行内元素位于同一行，同时可以设置其高度和宽度。 15、如何用DIV+CSS实现3栏布局（左右固定200pX，中间自适应）？...）上定义网格行（ grid row）和网格列（grid column）来为每一个网格项目定义位置和空间。...块标签的特征有独占一行，换行显示，可以设置宽、高，块可以套块和行。 51、常用的行内属性标签及其特征有哪些？
如果屏幕宽度大于1300像素，则6张图片并排在一行。 ? 如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。 ?...这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。 二、允许网页宽度自动调整 "自适应网页设计"到底是怎么做到的？其实并不难。...600px)" href="smallScreen.css" /> 如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。...除了用html标签加载CSS文件，还可以在现有CSS文件中加载。...有很多方法可以做到这一条，服务器端和客户端都可以实现。 自适应的好处是为移动端带来更好的用户体验，所以一个网站如果手机版，那么就应该拥有一个自适应！
基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。 — title 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。..." title="鼠标悬浮提示文本" alt="图片替代文本" width="100" height="100" > 属性解释: src : 图片所存放的地址 (推荐写相对路径) title : 当鼠标在图片上停留时的显示文本...在同一个页面中 id 应该是唯一的 我的名字 我们可以使用 #username { } 这样可以选择指定 id 的元素 类选择器 类选择器的用法和 Id...如果 JavaScript 在 HTML 和 CSS 就位之前加载运行，就会引发错误。...比如，我们回到第一个例子中的 JavaScript 代码： img 这里我们选定一个文本段落（第 1 行)，然后给它附上一个事件监听器（第 3 行），使得在它被点击时，updateName() 代码块
通常我们使用于强制一行显示内容 white-space:normal ；默认处理方式 white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。...注意： 一定要首先强制一行内显示，再次和overflow属性 搭配使用 4.3 总结三步曲 /*1....CSS精灵技术（sprite) 重点 5.1 为什么需要精灵技术 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。...为什么需要使用精灵图技术： 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 问题症状：常见症状是IE6中后面的一块被顶到下一行。...伪类和伪元素的区别 伪类本质上是为了弥补常规CSS的不足，以便获取更多信息。 伪元素的本质是创建了一个可以设置内容和样式的虚拟容器。 可以同时使用多个伪类，但只能使用一个伪元素。...CSS选择器优先级、权重计算 CSS选择器的优先级 选择器的优先级分为两种：1. 选择器在同一级别时。2. 选择器在不同级别时。 CSS选择器在不同级别时 在属性后面使用!...important > id选择器 > class选择器 > 标签选择器 > 通配符选择器 > 浏览器默认属性 CSS在同一级别时 同一级别的选择器，后声明的会覆盖之前声明的。...关于这一点，normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
通常我们使用于强制一行显示内容 white-space:normal ；默认处理方式 white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。...，而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...） 注意： 一定要首先强制一行内显示，再次和overflow属性 搭配使用 ?...CSS精灵技术（sprite) 重点 5.1 为什么需要精灵技术 ? 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。...pink老师告诉你我们为什么需要精灵技术： 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。 出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
)的缩写,gif支持透明色，使得Gif图像在网页的背景和一些多层特效的显示上使用得非常多，另外gif格式还支持动画，这是它最突出的一个特点；Bmp格式在windows操作系统中使用的比较多，他是位图(Bitmap...内部样式表 将CSS代码写在标签中的标签中，与html内容位于同一个HTML文件中，这就是内部样式表 选择器{属性:属性值} <...外部样式表两种方法的区别 link标签属于xhtml范畴 而导入式是CSS2.1所特有的 使用链接式的CSS使客户端浏览网页时先将外部CSS文件加载到网页中再进行编译显示，所以这种情况下即使网速比较慢显示的网页与预期也会相同...1.4.4 CSS的选择器 选择器是CSS中非常重要的概念。在CSS中有三种最基本的选择器，分别是标签选择器、类选择器以及ID选择器。...1.5.3 背景样式 div标签 块级元素 独占一行 ， 可以将页面分割出一块独立的、不同的部分 背景属性 背景颜色 在css中使用backgroun-color来设置背景颜色，与color用法相同
1 选择器（1） 基本规则 ;是分隔符,而不是语句结束符 选择器 浏览器是从右往左解析的,继续向左解析只是验证,如此一来,性能极大提高...选择器的分类 选择器权重 非布局样式-字体 非布局样式-行高 背景 非布局样式（边框） 非布局样式（滚动） 内容超出容器大小...非布局样式（文本折行） 单词空格换行 把单词尽量当一个整体 不把单词当一个整体,打断所有 就不换行!...非布局样式（装饰性属性） hack和案例（1） hack和案例（2） CSS实现 checkbox 面试题
具体来说，这五个CSS属性可以分为以下三类： 书写显示（渲染性能的提升（和属性）; 创建新的花式设计（） 在开始之前，我想提醒一下，当处理新的CSS属性时，检查他们的支持和潜在的跨浏览器问题是一个好习惯...实际上，在浏览器等待自定义字体加载的过程中，用户在一定的时间内只能看到空白的内容。我们知道，如果内容加载过慢，用户将会离开页面。内容空白的时间取决于所使用的浏览器，通常为3秒左右。...属性在声明时使用。借助它，我们可以通过一行简单的CSS来控制字体的显示方式，而不需要使用基于JavaScript的解决方案。这意味着我们的网页可以减小体积，（很可能）提高性能。...在使用时，您可以使用以下五个值之一： ：默认值。这相当于根本不使用该属性，结果是浏览器隐藏文本，当自定义字体完成加载后再显示文本。 ：浏览器在等待自定义字体加载时隐藏文本的时间减少了（例如1秒）。...与台式机相比，它们有限的RAM和GPU存储器使得一些CSS操作更难以执行（在页面加载速度或图形影响方面）。如果浏览器可以在发生之前知道会发生什么，是不是这样会增加页面的响应性？
了解如何使用自定义字体以及加载它们需要多少时间是非常重要的一点。实际上，在浏览器等待自定义字体加载的过程中，用户在一定的时间内只能看到空白的内容。我们知道，如果内容加载过慢，用户将会离开页面。...font-display属性在@font-face声明时使用。借助它，我们可以通过一行简单的CSS来控制字体的显示方式，而不需要使用基于JavaScript的解决方案。...在使用font-display时，您可以使用以下五个值之一： auto：默认值。这相当于根本不使用该属性，结果是浏览器隐藏文本，当自定义字体完成加载后再显示文本。...block：浏览器在等待自定义字体加载时隐藏文本的时间减少了（例如1秒）。如果这段期间自定义字体未加载好，文本会应用备用字体呈现出来。...fallback: 使用自定义字体渲染的文本在短时间内 (大约 100ms) 不可见，之后浏览器将持续加载自定义字体，这个期间，文本将以无样式的状态呈现，当自定义字体加载好了之后，文本将会被赋予自定义的字体
Photoshop、FW（测量、剪裁、编辑） 2>语言（至少花95%的时间） 至少要学习： html css js这三种基本的语言 HTML 超文本标记语言 语言：和浏览器认识的语言...strong:加粗 ins:下划线 em:倾斜 del:删除线 可以使用有语义化的意思 Img标签 作用：在页面显示一张图片 src 图片显示的路径 alt 如果图片加载不出来会显示这个属性中的文字...内嵌 1.可以在一行显示 2.不支持宽高，不支持上下的margin和padding等样式的问题 3.宽度由内容撑开 4.代码换行被解析 那如何判断他们是块状还是内联？...块和内嵌的转换？ 1.display:block; 显示为块 2.Display:inline;显示为内嵌 块状元素如何在同一行显示？...(问题) 分页的练习 块元素如何在同一行显示？
浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。...如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。...表单 名称 区别 默认值显示 用于场景 input type=”text” 文本框 只能显示一行文本 单标签，通过value显示默认值 用户名、昵称、密码等 textarea 文本域 可以显示多行文本...name 名称 用于指定表单的名称，以区分同一个页面中的多个表单。 GET 和 POST 的区别 GET在浏览器回退时是无害的，而POST会再次提交请求。...注：当浏览器刚开始加载一个地址之后，标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容，并没立即替换为百度首页的页面。因为需要等待提交文档阶段，页面内容才会被替换。
全局事件属性 onload:在页面加载结束之后触发 onunload：在用户从页面离开时发生，如点击跳转，页面重载，关闭浏览器窗口等。...tr> 表头 单元格 表格合并 同一行内，合并几列colspan="2" 同一列内，合并几行rowspan="2" 表单标签 表单是可以把浏览者输入的数据传送到服务器端...css代码通常存放在style标签内 css样式由选择符和声明组成，而声明由属性和值组成 选择符{属性：值} 选择符，叫选择器 css放置 直接书写在标签的style属性中，不建议使用 内联样式表...italic文本斜体显示 oblique文本倾斜显示 文本属性 行高line-height 文本水平对齐方式 text-align left,center,right 文本所在行高的垂直对齐方式...，需要将css样式重置，保证在不同浏览器中显示一致。
若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点） 表格一行 表格中的一行 表格单元格...认识CSS样式： CSS：层叠样式表（Cascading Style Sheets），主要用于定义HTML内容在浏览器内的显示样式 语法： 选择符{ 属性: 值}...内联元素： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。...内联块状元素： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。 ...因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”） 2. em 假定 font-size设定 14px，那么 1em=14px 3.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
