HTML与CSS面试重点：布局、样式与DOM理解

"这是一份关于CSS和JavaScript面试题的文档，包含了HTML表格宽度定义、DOM元素的区别、HTML页面布局中的position属性、CSS居中布局、选择器的含义、CSS的作用以及CSS+DIV在Web开发中的优势等核心知识点。此外，还提到了HTML文档的基本结构、注释方式以及CSS样式的引用方法。" 1、HTML中定义表格的宽度用80px与80%的区别在于，px是固定像素单位，表示表格宽度为80个像素；而80%表示表格宽度是相对于父元素宽度的80%，会随浏览器窗口大小变化而调整。 2、DIV元素通常用于组织和布局网页内容，它是一个块级元素，会独占一行。SPAN元素是内联元素，用于在同一行内组合文本或其他内联元素。 3、HTML页面布局中，position属性有static（默认值）、relative、absolute、fixed和inherit五种值。static表示元素遵循正常的文档流，不进行定位；relative表示相对于其正常位置定位；absolute相对于最近的非static祖先元素定位；fixed相对于浏览器窗口定位；inherit表示从父元素继承position属性。 4、要让一个200px*200px的层垂直居中，可以使用CSS样式代码如下： ``` <style> .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; } </style> <div class="centered"></div> ``` 5、在CSS中，.（句点）后面跟的名称代表类选择器，用于选取具有特定class属性的元素；#（井号）后面跟的名称代表ID选择器，用于选取具有特定ID的唯一元素；内嵌样式通常写在元素的style属性内。 6、CSS全称为层叠样式表（Cascading Style Sheets），它用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS将内容与表现分离，提高了网页设计的灵活性和可维护性，便于页面样式的统一管理和修改。 7、CSS+DIV开发Web页面的优势主要包括内容与样式的分离，简化页面结构，提高搜索引擎优化（SEO），提升页面加载速度，易于维护和升级，以及支持动态皮肤切换。 8、一个HTML文档的基本结构包括html、head和body元素，其中html是根元素，head包含元数据（如标题、链接到样式表等），body则包含可见内容。 9、HTML文档内联注释以`<!--`开始，以`-->`结束。 10、引用CSS样式有三种主要方法：通过`<link>`标签导入外部CSS文件、在`<style>`标签内直接编写CSS代码（内联样式表）、或者直接在HTML元素的style属性内声明样式（内联样式）。 这些面试题涵盖了HTML和CSS的基础知识，是评估开发者前端技能的重要参考。理解和掌握这些知识点对于Web开发至关重要。