HTML+CSS知识点
文章平均质量分 76
HTML+CSS知识点、面试问题、工作上遇到的问题...总结分享。
星辰迷上大海
饮水思源,行胜于言。这盛世如你所愿!运动使我健康,旅行使我记忆,学习让我懂得思考。
展开
-
用 CSS 实现一个三角形、用 CSS 实现一个自适应的正方形、CSS写一个简单的幻灯片页面效果
可以根据需要调整 `border` 属性和 `width/height` 属性的值来改变三角形的大小。原创 2024-01-06 07:45:00 · 1150 阅读 · 0 评论 -
什么是外边距重叠?css中可以让文字在垂直和水平方向上重叠的两个属性是什么?重排和重绘如何触发、如何避免、区别? 居中为什么要使用 transform(为什么不使用 marginLeft/Top)?
外边距重叠是指相邻的两个元素垂直外边距发生重叠;CSS中可以让文字在垂直和水平方向上重叠的两个属性是text-align:center和line-height;重排是文档发生变化,浏览器重新计算元素的位置和大小,重绘是样式发生变化,浏览器重新绘制元素;要避免重排和重绘可以采用减少DOM 操作、使用虚拟化技术、使用 CSS3 动画代替 js 等;使用 transform 居中是为了避免 margin的影响,同时可以实现更流畅的动画效果。原创 2024-01-05 07:45:00 · 859 阅读 · 0 评论 -
stylus、sass、less区别, Sass 、LESS是什么?大家为什么使用它们呢?postcss的作用
Stylus、Sass和Less是三种流行的CSS预处理器。它们的主要目的是帮助开发者更高效地编写和维护CSS代码。原创 2024-01-04 07:45:00 · 974 阅读 · 0 评论 -
几种常见的CSS三栏布局?介绍下粘性布局(sticky)?自适应布局?左边宽度固定,右边自适应?两种以上方式实现已知或者未知宽度的垂直水平居中?
使用Flexbox布局优点: 简单、直观,能够轻松实现左右布局,且支持响应式设计。缺点: 对于一些较老版本的浏览器支持不够完善,需要额外处理兼容问题。原创 2024-01-06 07:15:00 · 1070 阅读 · 0 评论 -
对px、rpx、 em、rem、vw、vh 的了解,px 和 em 的区别?在网页中的使用奇数还是偶数的字体?自定义字体的使用场景?如何实现小于12px的字体效果?实现多行文本溢出省略效果,考虑兼容性
px是最常用的单位,rpx用于小程序中的自适应布局,em和rem用于相对于父元素和根元素的字体大小,vw和vh用于相对于视窗宽度和高度的单位。原创 2024-01-05 07:15:00 · 953 阅读 · 0 评论 -
css3有哪些新增属性、新增伪类、伪类和伪元素的区别?
伪类用于选择元素的特殊状态或位置,例如悬停、点击等,而伪元素用于在元素的特定位置或内容前后插入样式。伪类用于选择已存在的元素,而伪元素则用于创建新的元素或部分。原创 2024-01-03 07:45:00 · 1202 阅读 · 0 评论 -
清除浮动的几种方式,各自的优缺点、如何垂直居中一个浮动元素? 水平居中的方法、垂直居中的方法?
清除浮动的方式有直接设置浮动父元素高度 height、额外标签法、单伪元素清除法 :after 和 zoom 、伪元素清除法,各有优缺点;垂直居中浮动元素可以使用 Flexbox 布局实现;垂直居中一个 可以使用 CSS 的 vertical-align 属性;原创 2024-01-02 07:45:00 · 941 阅读 · 0 评论 -
display 、float 、position的关系 display作用是什么?display:inline-block会不会显示间隙?行内元素float:left后是否变为块级元素?flex 布局
使用Flex布局可以轻松实现响应式设计、等高布局、对齐等复杂的布局需求,比传统布局方式更加灵活方便。原创 2024-01-03 07:15:00 · 2073 阅读 · 0 评论 -
BFC、IFC、GFC 和 FFC,BFC块级格式化上下文(block formatting context),创建和作用
所谓 BFC,块级格式上下文,指的是一个独立的布局环境,BFC 内部的元素布局与外部互不影响。IFC,行内格式化上下文,将一块区域以行内元素的形式来格式化。GFC ,网格布局格式化上下文,将一块区域以 grid 网格的形式来格式化。FFC ,弹性格式化上下文,将一块区域以弹性盒的形式来格式化。原创 2023-12-27 18:54:42 · 347 阅读 · 0 评论 -
为什么要初始化CSS样式? link与@import的区别、什么是FOUC,文档样式短暂失效如避免、::before 和 :after中双冒号和单冒号的区别、作用? css的content属性作用?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的, 如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。原创 2024-01-01 13:33:56 · 351 阅读 · 0 评论 -
css属性opacity: 0;display: none;visibility: hidden的区别;隐藏页面中的某个元素的方法有哪些?rgba()和opacity的透明效果有什么不同?
opacity: 0;、visibility: hidden;、display: none; 三者都是让对应的元素不可见。原创 2023-12-29 23:00:00 · 897 阅读 · 0 评论 -
css中sprite(css精灵)是什么,有什么优缺点
将多个小图片拼接到一个图片中 。通过 background-position 和元素尺寸调节需要显示的背景图案。原创 2023-12-28 22:00:00 · 666 阅读 · 0 评论 -
Base64的理解及优缺点?png8、png16、png32的区别,png 的压缩原理?如何优化图片,网页制作会用到的图片格式有哪些?优化大量图片加载的方法?
Base64是一种将任意二进制数据转换为纯文本的编码方式,它可以将二进制数据转换为普通文本,以便在网络上更方便地传输和存储数据。原创 2024-01-04 07:15:00 · 3432 阅读 · 0 评论 -
性能优化、渲染优化、网页验证码、渐进增强和优雅降级、为什么利用多个域名来存储网站资源会更有效?从用户刷新网页开始一次js请求一般情况下有哪些地方会有缓存处理?如何使用CSS实现硬件加速?
小图标优势在于:减少 HTTP 请求、避免文件跨域、修改及时生效原创 2023-12-27 18:40:20 · 936 阅读 · 0 评论 -
块级元素有哪些? 行内元素有哪些?空元素有那些?行内元素和块级元素有什么区别?
通过CSS的display属性可以改变元素的默认类型,将块级元素设置为行内元素,或将行内元素设置为块级元素,从而改变它们的显示和布局方式。原创 2023-12-28 21:30:00 · 704 阅读 · 0 评论 -
HTML全局属性(global attribute)有哪些?web开发中会话跟踪的方法有哪些?对浏览器内核的理解? HTTP request报文结构是怎样的?
渲染引擎:负责取得网页的内容 ( HTML 、 XML 、图像等等) 、整理讯息 (例如加入CSS 等), 以及计算网页的显示方式,然后会输出至显示器或打印机 。浏览器的内核的不 同对于网页的语法解释会有不同,所以渲染的效果也不相同 。所有网页浏览器 、电子邮件客户端以及其它需要编辑 、显示网络内容的应用程序都需要内核。原创 2023-12-08 10:56:36 · 258 阅读 · 0 评论 -
什么是HTML语义化,有什么好处?
HTML 语义化以外,良好的命名,简明扁平的结构,良好的无障碍设计,清晰的导航和分区,一定程度上,也能弥补语义的欠缺,提升代码的机器阅读体验,搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,提高索引权重。用正确的标签做正确的事情,语义类标签是对内容的补充,表达标题摘要、文章结构、强调重点、丰富含义、避免歧义。HTML 语义化就是让页面的内容结构化,便于对浏览器 、搜索引擎解析。原创 2023-12-01 07:45:00 · 35 阅读 · 0 评论 -
你知道SEO中的TDK吗?iframe的作用以及优缺点?从浏览器地址栏输入url到显示页面的步骤由哪些?
在SEO中,TDK其实就是title、description、keywords 这三个标签,title 表示标题标签,description 是描述标签,keywords 是关键词标签。原创 2023-12-02 12:14:22 · 215 阅读 · 0 评论 -
Canvas和SVG有什么区别?a元素除了用于导航外,还有什么作用?如何在页面上实现一个圆形的可点击区域?
svg 输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会失真和锯齿 。而canvas 输出标量画布,就像一张图片一样,放大会失真或者锯齿。原创 2023-12-03 10:28:45 · 65 阅读 · 0 评论 -
HTML5新增了哪些新特性?移除了哪些元素?怎么处理HTML5新标签兼容问题?HTML5的离线储存的工作原理、 如何使用,浏览器是怎么对HTML5的离线储存资源进行管理和加载的
在用户没有与因特网连接时, 可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。原创 2023-12-03 15:00:00 · 60 阅读 · 0 评论 -
H5和HTML5区别、知道什么是微格式吗?谈谈理解,在前端构建中应该考虑微格式吗?
H5是一个产品名词,包含了最新的HTML5、CSS3、ES6等新技术来制作的应用。原创 2023-12-01 10:54:20 · 63 阅读 · 0 评论 -
对于Web标准以及W3C的理解、对viewport的理解、xhtml和html有什么区别?
XHTML(可扩展超文本标记语言)是HTML(超文本标记语言)的一种变体,它比HTML更严格,更注重文档结构的准确性和规范性。原创 2023-12-01 23:00:00 · 277 阅读 · 0 评论 -
CSS两种盒模型以及区别、CSS合并方法、CSS文件合并方法、label的作用是什么?如何美化CheckBox?
CSS 中有两种盒模型:标准盒模型(content-box)和IE 盒模型(border-box)。主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时,IE 的 content 部分把 border 和 padding 计算了进去,而 W3C 盒模型并不会。使用 CSS 的 box-sizing 属性可以指定盒模型的类型,将其设置为 border-box 可以启用 IE 盒模型。原创 2024-01-02 07:15:00 · 985 阅读 · 0 评论 -
行内元素和块级元素分别有哪些?有何区别?怎样转换?
使用行内元素需要注意的是:行内元素设置宽度width无效。行内元素设置height无效,但是可以通过line-height来设置。设置margin只有左右有效,上下无效。设置padding只有左右有效,上下无效。原创 2023-12-02 06:30:00 · 97 阅读 · 0 评论 -
前端页面构成有哪些,分别是什么?
前端页面由:结构层、表示层、行为层,三大层构成。原创 2023-12-01 13:19:48 · 290 阅读 · 0 评论 -
img的title和alt有什么区别、strong与em的异同? b 与 strong 的区别、i 与 em 的区别?src和href的区别、title 与 h1 的区别
alt属性是图像的替代文本,让用户能够知道图像的内容,用于在图像无法加载或阅读器无法解析时展示,或者在以纯文本形式阅读网页时提供图像描述,这样用户还能看到丢失了的一些信息,相对来说比较友好。原创 2024-01-01 13:12:27 · 502 阅读 · 0 评论 -
src和href的区别
src是用于嵌入到文档中的资源,href是用于链接到文档之外的资源。src会直接影响文档的加载和显示,href只会影响到引用的资源的使用。使用时,我们需要根据需求和资源类型,选择适当的属性来引用资源。原创 2023-11-24 08:45:00 · 74 阅读 · 0 评论 -
DOCTYPE是什么,有何作用、 使用方式、渲染模式、严格模式和怪异模式的区别?
DOCTYPE是HTML5的文档声明,通过它可以告诉浏览器,使用那个HTML版本标准解析文档。原创 2023-11-07 09:15:00 · 146 阅读 · 0 评论