HTML+CSS
文章平均质量分 94
前端基础HTML+CSS的主要概念知识
Sco_Jing1031
Succès ou échec dans celui-ci
展开
-
【前端优化】重排(reflow)和重绘(reapint)
在页面的生命周期中,一些效果的交互都有可能发生重排(Layout)和重绘(Painting),这些都会使我们付出高额的性能代价。 浏览器从下载文件至本地到显示页面是个复杂的过程,这里包含了重绘和重排,二者也是最耗时的部分,一旦触发重排,我们对DOM的修改引发了DOM几何元素的变化,渲染树需要重新计算, 使浏览器需要根据新的属性进行绘制。更比而言,重排会产生比重绘更大的开销。所以,我们在实际生产中要严格注意减少重排的触发。原创 2021-12-10 08:57:22 · 712 阅读 · 4 评论 -
前端优化 之 图片预加载和懒加载
欢迎学习交流!!!持续更新中…文章目录预加载什么是预加载为什么要用预加载预加载的实现懒加载什么是懒加载为什么要用懒加载懒加载的实现懒加载优化预加载和懒加载的比较预加载什么是预加载 资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。为什么要用预加载  .原创 2021-11-30 19:48:22 · 3049 阅读 · 2 评论 -
CSS居中方案-----超全
欢迎学习交流!!!持续更新中…文章目录HTML代码水平居中行内元素text-align: center;块级元素margin: auto;绝对定位 + left:0;right:0;margin:0 auto;绝对定位 + 负值的margin-leftCSS3中新增的transform属性垂直居中行内元素单行文字垂直居中:设置 line-height = height块级元素绝对定位 + margin: auto;(未知宽高)绝对定位 利用 transform 属性(未知宽高)绝对性定位 利用 ca.原创 2021-11-14 21:18:50 · 417 阅读 · 2 评论 -
js动画与css3动画的区别
欢迎学习交流!!!持续更新中…文章目录JS动画(逐帧动画)css3(补间动画)总结JS动画(逐帧动画) 首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以其可操作性很高,几乎可以完成任何想要的动画形式。但是由于逐帧动画的帧序列内容不一样,会增加制作负担,且资源占有比较大。 但它的优势也很明显:因为它相似与电影播放模式,很.原创 2021-11-12 15:43:50 · 1536 阅读 · 2 评论 -
HTML5新增多媒体属性(加入视频、音频)、CSS3高级应用(过渡、变形、动画)、精灵图
文章目录HTML5新增的多媒体标签视频``音频``CSS3高级应用过渡变形动画HTML5新增的多媒体标签视频<video>当前<video>元素支持三种视频格式:尽量使用mp4格式浏览器MP4WebMOggInternet Explorer√××Chrome√√√Firefox√ 从Firefox 21 版本开始 Linux系统从Firefox 30 开始√√原创 2021-05-01 23:33:37 · 1990 阅读 · 8 评论 -
DIV+CSS之页面布局、布局常用属性(浮动、清除、定位、溢出、层叠)、布局类型
文章目录1. 浮动(float)1.1 传统网页布局的三种方式1.2 标准流(普通流、文档流)1.3 浮动1.4 浮动特性1.5 浮动元素经常和标准流父级搭配使用1.6 清除浮动1.7 额外标签法2.div+CSS进行页面布局2.1 常见的页面布局2.2 如何布局2.3 页面元素的定位机制3. 布局常用属性3.1 浮动属性(float)3.2 清除属性(clear)3.3 定位属性(position)3.4 溢出属性(overflow)3.5 层叠属性(z-index)4.布局类型4.1单列布局4.2 双列原创 2021-04-23 18:01:05 · 4783 阅读 · 2 评论 -
CSS的元素显示模式、盒子模型、背景(颜色、图片、平铺、图片位置、图像固定)
文章目录1.CSS的元素显示模式1.1 什么是元素显示模式1.2 块元素1.3 行内元素1.4 行内块元素1.5 元素显示模式总结1.6 元素显示模式转换2.盒子模型:网页布局的基础2.1 外边界/距(margin)2.1.1 外边距典型应用2.2 填充/内边距(padding)2.3 边框(border)2.3.1 盒子的边框线2.3.2 表格的细线边框2.4 清除页面元素的默认内外边距3. 背景3.1 背景颜色3.2 背景图片3.3 背景平铺3.4 背景图片位置3.5 背景图像固定(背景附着)3.6 背原创 2021-04-23 14:36:01 · 2153 阅读 · 4 评论 -
CSS层叠性、继承性、优先级、常见选择器、列表的样式
这里写目录标题1.CSS的层叠性2.CSS的继承性3.CSS的优先级:要看选择器的权重4. 块级标签5. 常见选择器5.1 属性选择器5.2 复合选择器5.3 关系选择器5.4 伪类选择器6.列表的样式规则1.CSS的层叠性指多种CSS样式可以叠加,即一个标签上可以应用多个样式2.CSS的继承性指在书写CSS样式表时,子标签会继承父标签的某些样式 p { color:"red"; } <p> 西安 <span&原创 2021-04-22 16:28:19 · 425 阅读 · 8 评论 -
CSS简介、基础选择器、字体属性、文本属性、尺寸和图像表示方式
CSS简介CSS主要使用场景就是美化网页,布局页面的HTML局限性HTML只关注内容的语义,比如<h1>表明这是一个大标题,<p>表明这是一个段落,<img>表明这儿有一个图片,<a>表示此处有链接。HTML可以做简单的样式,但是有一个共同的特点:丑,并且带来无尽的臃肿和繁琐。CSS-网页的美容师CSS是层叠样式表的简称,也会称为CSS样式表或级联样式表。CSS也是一种标记语言。CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等原创 2021-04-19 23:05:13 · 256 阅读 · 0 评论 -
HTML之列表、表格、表单标签
列表标签表格是用来显示数据的,那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表。无序列表无序列表:列表项没有先后顺序<ul type="项目符号"> <li>列表项</li> <li>列表项</li> <li>列表项</li></ul>type属性:表示的是项目符号的类原创 2021-04-16 18:24:11 · 230 阅读 · 0 评论 -
HTML基础之概念与常用标签
HTML基础什么是HTML网页常用的浏览器及其内核常用的浏览器浏览器内核Web标准为什么需要Web标准Web标准的构成HTML、CSS、JavaScript之间的关系HTML的版本HTML路径HTML的标签标签的结构什么是HTML●HTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。●HTML不是一种编程语言,而是一种标记语言。●标记语言是一套标记标签。所谓超文本,有两层含义:它可以加入图片、声音、动画、多媒体等内容(超越了文本限制原创 2021-04-14 22:27:49 · 261 阅读 · 4 评论