首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端面试题-HTML+CSS

DOCTYPE>声明必须是 HTML 文档第一行,位于 html 标签之前 HTML5 不基于 SGML,所以不需要引用 DTD。 HTML5 <!...简述一下你对 HTML 语义化理解 简单来说,就是合适标签做合适事情,这样具有以下好处: 有助于构架良好 HTML 结构,有利于搜索引擎建立索引、抓取,利于 SEO 有利于不同设备解析 有利于构建清晰机构...像素px是相对于显示器屏幕分辨率而言 em值并不是固定,会继承父级元素字体大小,代表倍数 rem值并不是固定,始终是基于根元素 ,也代表倍数 5. position...::before 和 :after 双冒号和单冒号有什么区别?解释一下这 2 个元素作用 单冒号 (:) 用于 CSS3 类,双冒号 (::) 用于 CSS3 元素。...(元素由双冒号和元素名称组成), 双冒号是在当前规范引入,用于区分类和元素 12.

97330

【愚公系列】2023年03月 其他-Web前端基础面试题(CSS_42道)

7、隐藏元素方法有哪些? display: none:渲染树不会包含该渲染对象,因此该元素不会在页面占据位置,也不会响应绑定监听事件。...visibility: hidden:元素页面仍占据空间,但是不会响应绑定监听事件。 opacity: 0:将元素透明度设置为 0,以此来实现元素隐藏。...这种方法下,元素仍在页面占据位置,但是不会响应绑定监听事件。 8、图片间隙问题如何解决 两个图片之间和图片下方多出空白间隙可以使用以下方式解决。...10、简述rem布局原理 rem是指相对于根元素字体大小单位,即根据html元素font-size来计算大小。...1.浏览器预先加载css后,可以不必等待HTML加载完毕就可以渲染页面了 2.其实HTML渲染并不会等到完全加载完渲染页面,而是一边解析DOM一边渲染。

3K20
您找到你想要的搜索结果了吗?
是的
没有找到

【CSS】381- 提升你CSS选择器技巧

为什么要这样做呢?我们都知道选择器,但麻烦是随着时间推移,很容易习惯于每个项目中使用相同可信任选择器来实现你需要做事情。...以上所有属性选择器实例都区分大小写。 但是我们有一个技巧, 如果我们结束方括号之前插入一个i,我们可以不区分大小写进行匹配。 ?...最后, :placeholder-shown 匹配占位文字处于显示状态元素,当输入内容后,占位文字不再显示时,该元素不会被匹配;应谨慎使用此选择器,因为它尚未得到广泛支持。...结构选择器 结构选择器非常强大,它是基于元素DOM位置进行匹配。 这类型选择器特殊地方在于它允许通过传入参数方式来操作。...以下是需要我们关注一些内容选择器: ::inactive-selection 匹配当前窗口处于非激活状态下已被选取文档中被用户高亮部分。

1K40

一篇文章带你了解CSS Pseudo-elements(元素)

CSS Pseudo-elements 元素是一个附加至选择器末关键词,允许对被选择元素特定部分修改样式。CSS元素是一种样式化文档元素方法,这些元素没有由文档树位置明确定义。...当只想为段落第一个字母设置样式以创建首字下沉效果,或者只想通过样式表元素之前或之后插入一些内容等情况下,这将非常有用。 CSS3 为元素引入了新双冒号(::)语法,以区分元素类。...元素新语法可以通过以下方式给出: /*选择器::元素{ 属性:值 ; }*/ 二、::first-line 第一行元素 该::first-line元素应用特殊样式添加到文本第一行。...例:(规则设置了段落第一行文本格式。第一行长度取决于浏览器窗口或包含元素大小)。 <!...例:(规则将显示所有段落第一个字母class="article",以绿色,大小为xx-large。) <!

60710

2021前端面试高频 HTML + CSS

行内元素 与 块级元素 HTML4 元素被分为两大类:inline 行内元素 和 block 块级元素 「行内元素」: 一个 行内元素只占据它自身空间大小。...空元素定义 ❝标签内没有内容html 标签称为 空元素。空元素开始标签关闭。 常见空标签有: br hr img input link meta ❞ 6....页面初始渲染,这是开销最大一次重排 添加/删除可见DOM元素 改变元素位置 改变元素尺寸,比如边距、填充、边框、宽度和高度等 改变元素内容,比如文字数量,图片大小等 改变元素字体大小 改变浏览器窗口尺寸...包括table-related元素,基于top, right, bottom, 和 left值进行偏移。偏移值不会影响任何其他元素位置。 「元素跨越特定阈值前为相对定位,之后为固定定位。」...rem rem是CSS3新增一个相对单位,使用rem为元素设定字体大小时,仍然是相对大小,但相对只是HTML元素

90340

前端面试实录CSS篇(最近一周)

权重差异: • 样式:link 样式权重高于 @import 权重吗,例如: /* @import "03.css"; */ body, html { background-color:...1. display: none;: 不会渲染该元素不会占位,也不会响应绑定监听事件 2. visibility: hidden;: 会渲染,但是不会显示且会占位,也不会响应绑定监听事件 3. opacity...• 区别: • 类操作对象是文档树种已有的元素或样式 • 元素则是创建一个文档树以外元素或样式 • : 表示类 • :: 表示元素 • 作用: • 类:通过元素选择器上加入类改变元素状态... CSS2.1 元素都是使用 单冒号 来表示元素,但在 CSS3 规范元素语法被修改为使用 双冒号 17. CSS 预处理器/后处理器是什么?为什么要使用他们?...即使窗口是滚动它也不会移动: • static: HTML 元素默认值,即没有定位,遵循正常文档流对象。静态定位元素不会受到 top, bottom, left, right影响。

9010

近一年web前端经典面试题整理

2.使用after对象清除浮动  该方法只适用于非IE浏览器。具体写法可参照以下示例。使用需注意以下几点。...一、该方法必须为需要清除浮动元素对象设置 height:0,否则该元素会比实际高出若干像素;   #parent:after{   content:"....此外,元素在读屏软件也会被隐藏;   Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素内容。...1.display:none是彻底消失,不在文档流占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0效果, 文档流占位,浏览器会解析该元素;...2.使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility, 页面产生回流(当页面一部分元素需要改变规模尺寸、布局、显示隐藏等

1.3K20

面试题整理|45个CSS面试题

是一种用来表现HTML(标准通用标记语言一个应用)或XML(标准通用标记语言一个子集)等文件样式计算机语言。 Q2、为什么需要CSS?...CSS元素是添加到选择器关键字,可用于设置所选元素特定部分样式。 “first-line” 元素用于向文本首行设置特殊样式,只能用于块级元素!...vmax vw和vh较大那个。 % 相对父元素 *提示: rem与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对只是HTML元素。...4、元素元素 – 此类别包括元素名称和元素,比如 h1、div、:before 和 :after。 Q29.CSS字体相关属性有哪些?...这些元素不会影响其他元素位置。 固定 fixed 将元素从页面流移除,并将其放置相对于视口指定位置,并且滚动时不会移动。 粘性sticky 粘性定位是相对定位和固定定位混合。

4K30

前端学习资料整理

所以如果 JSX 中含有转义后实体字符比如 © (©) 最后显示到 DOM 不会正确显示,因为 React 自动把 © 特殊字符转义了。...兼容模式,页面以宽松向后兼容方式显示,模拟老式浏览器行为以防止站点无法工作。 HTML5 为什么只需要写 ?...解释一下这2个元素作用。 单冒号(:)用于CSS3类,双冒号(::)用于CSS3元素。 如何修改chrome记住密码后自动填充表单黄色背景 ?...)简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈存储; 引用数据类型存储堆(heap)对象,占据空间大、大小不固定,如果存储,将会影响程序运行性能;引用数据类型存储了指针...采用这种方法,页面就不会被脚本搞得一团糟,易于阅读,每个页面,总可以同一个位置找到脚本。 移动端点击事件有延迟,时间是多久,为什么会有? 怎么解决这个延时?

3.4K20

前端硬核面试专题之 HTML 24 问

HTML 为什么利用多个域名来存储网站资源会更有效 ? 确保用户不同地区能用最快速度打开网站,其中某个域名崩溃用户也能通过其他域名访问网站。 ---- window 常用属性与方法有哪些 ?...,resize 程序窗口大小窗口操作系统。...标准模式排版和 JS 运作模式都是以该浏览器支持最高标准运行。兼容模式,页面以宽松向后兼容方式显示,模拟老式浏览器行为以防止站点无法工作。 ---- HTML5 为什么只需要写 < !...2、html 语义化让页面的内容结构化,结构更清晰, 3、便于对浏览器、搜索引擎解析; 4、即使没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读; 5、搜索引擎爬虫也依赖于 HTML...sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。 存储大小 cookie 数据大小不能超过 4k。

1.1K20

知识整理之CSS篇

如对HTML知识点感兴趣,可移步至:知识整理之HTML篇 CSS Hack CSS Hack就是针对不同浏览器或不同版本浏览器写特定CSS样式达到让浏览器兼容过程。...类由一个冒号:开头,冒号后面是名称和包含在圆括号可选参数。 任何常规选择器可以再任何位置使用类。类语法不区别大小写。一些作用会互斥,另外一些类可以同时被同一个元素使用。...CSS3对于元素定义 元素DOM创建了一些抽象元素,这些对象不存在与常文档流元素由两个冒号::开头,然后是元素名称。 使用两个冒号::是为了和类(CSS2并没有区别)做区分。...当涉及到可视化布局时候,Block Formatting Context提供了一个环境,HTML元素在这个环境按照一定规则进行布局。一个环境元素不会影响到其它环境布局。...关于这一点,normalize.css修复问题包含了HTML5元素显示设置、预格式化文字font-size问题、IE9SVG溢出、许多出现在各浏览器和操作系统与表单相关bug。

1.5K20

Java学习笔记-全栈-web开发-03-JavaScript基础

alert("alert用于弹窗"); 3.2 js写在head 这种办法通常用于对特定页面写特定js alert...BOM 主要处理浏览器窗口和框架,不过通常浏览器特定 JavaScript 扩展都被看做 BOM 一部分。...这些扩展包括: 弹出新浏览器窗口 移动、关闭浏览器窗口以及调整窗口大小 提供 Web 浏览器详细信息定位对象 提供用户屏幕分辨率详细信息屏幕对象 对 cookie 支持 IE 扩展了 BOM...HTML DOM 是: HTML 标准对象模型 HTML 标准编程接口 W3C 标准 HTML DOM 定义了所有 HTML 元素对象和属性,以及访问它们方法。 ?...XML DOM每个元素都会被解析为一个节点Node,而常用节点类型又分为 元素节点 Element 属性节点 Attr 文本节点 Text 文档节点 Document HTML DOM 定义了针对

70120

CSS技术入门

CSS 指层叠样式表 ( Cascading Style Sheets )样式定义如何显示 HTML 元素样式通常存储样式表把样式添加到 HTML 4.0 ,是为了解决内容与表现分离问题外部样式表可以极大提高工作效率外部样式表通常存储...:before是元素,并且它生成包含放置元素内容之前生成内容元素。使用content 属性来指定要插入内容。默认情况下,生成元素是内联,但这可以使用属性显示更改。...position定位Static 定位HTML 元素默认值,即没有定位,元素出现在正常。静态定位元素不会受到 top, bottom, left, right 影响。...注意: 如果两个定位元素重叠,没有指定 z - index,最后定位在 HTML 代码元素将被显示最前面。...CSS3可以指定背景图片,让我们重新不同环境中指定背景图片大小。您可以指定像素或百分比大小。你指定大小是相对于父元素宽度和高度百分比大小

2.8K61

面试官:CSS 面试题集锦

至此这个选择器匹配结束,所有还在集合元素满足。 大体就是这样,不过浏览器还会有一些奇怪优化。 注意: 1、为什么从后往前匹配因为效率和文档流解析方向。...block元素通常被现实为独立一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。...要注意是这个是个大概说法,每个特定元素能包含元素也是特定,所以具体到个别元素上,这条规律是不适用。 比如 P 元素,只能包含inline元素,而不能包含block元素。...display:inline inline元素不会独占一行,多个相邻行内元素会排列同一行里,直到一行排列不下,才会新换一行,其宽度随元素内容而变化。...它特殊之处在于它不用像absolute疯狂“找爸爸”,它天生参照于浏览器窗口!当为对象设置固定定位后,该对象即处于浏览器窗口画面固定位置,无视文档长短、窗口大小和滚条滚动。

3.3K30

前端基础:CSS

CSS 可以定义 HTML 元素如何显示。 CSS 大大提高工作效率,可以将 HTML 代码与样式代码分离,让原本 HTML 不能描述效果,通过 CSS 描述出来。...样式可以规定在单个 HTML 元素 HTML元素,或在一个外部 CSS 文件。甚至可以同一个 HTML 文档内部引用多个外部样式表。...CSS 类 CSS 类可对 CSS 选择器添加一些特殊效果 锚类: 支持 CSS 浏览器,链接不同状态都可以不同方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态...所有 HTML 元素可以看作盒子, CSS ,box model 这一术语是用来设计和布局时使用。 盒子模型允许在其它元素和周围元素边框之间空间放置元素。...分类属性 CSS 分类属性允许控制如何显示元素,设置图像显示于另一元素何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素可见度。

2.4K20

「资深前端工程师总结」前端面试知识点大全—CSS篇

Html/Css --> 属性级HACK: _:选择IE6及以下。连接线(划线)(-)亦可使用,为了避免与某些带划线属性混淆,所以使用下划线更为合适。 *选择IE7及以下。...具体写法可参照以下示例。使用需注意以下几点。该方法必须为需要清除浮动元素对象设置 height:0,否则该元素会比实际高出若干像素; 清除浮动是为了清除使用浮动元素产生影响。...26、::before 和 :after双冒号和单冒号 有什么区别?解释一下这2个元素作用。 单冒号(:)用于CSS3类,双冒号(::)用于CSS3元素。...(元素由双冒号和元素名称组成)双冒号是在当前规范引入,用于区分类和元素。不过浏览器需要同时支持旧已经存在元素写法。...::before就是以一个子元素存在,定义元素主体内容之前一个元素。并不存在与dom之中,只存在在页面之中。同理,after是主体内容之后显示

1.5K30

【Java 进阶篇】HTML 与 CSS 结合详解

内联样式 HTML,可以使用内联样式(inline style)来为单个元素定义样式,这样样式规则仅适用于特定元素。...ID 选择器 ID选择器用于选择页面唯一元素。与类不同,每个ID文档只能出现一次。...以下是一些常见布局和定位属性: display属性:用于定义元素显示类型,例如block、inline、inline-block等。不同显示类型决定了元素如何排列和定位。...这些属性可以帮助你调整元素之间间距以及元素内部空白。 z-index属性:用于控制元素堆叠顺序。当多个元素重叠时,z-index值较大元素显示较小元素上方。 8....类和元素 CSS引入了类(pseudo-class)和元素(pseudo-element),它们允许你选择页面上特定部分,以便应用样式或添加特效。

23420

Visual Studio 中断模式下检查和修改数据

“监视”窗口、“快速监视”、“自动”窗口和“局部变量”窗口中都可看到内存特定位置初变量内容,但在“内存”窗口中可看到尺寸较大图像。...可视化工具 通过可视化工具可以以有意义方式查看对象或变量内容。 例如,可以使用 HTML 可视化工具来查看 HTML 字符串,因为这样可以解释该字符串并在浏览器显示出来。...为什么 “即时”窗口中输入“$env=0”会显示被调试进程所有环境变量? “$env”是一个变量。变量是用于“局部变量”窗口或“快速监视”窗口显示某些信息术语。...对于变量“$env”,如果试图“即时”窗口中修改它值,那么就会将所有的环境变量显示出来,而不是显示环境块大小。...对于变量“$CMDLINE”,如果试图“即时”窗口中修改它值,那么就会将启动程序命令行字符串显示出来,而不是字符串大小

1.6K30
领券