2021-05-30

HTML+CSS试题总结

1.link 和@import 的区别是?
（1）link属于HTML标签，而@import是CSS提供的;
（2）页面被加载的时，link会同时被加载，而@import会等CSS被加载完再加载;
（3）import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
（4）link方式的样式的权重 高于@import的权重.

2.visibility和display 的隐藏有什么区别？
（1）display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
（2）使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

3.如何理解语义化？
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

4.中alt和tittle的区别?
alt：图片显示不出来了就提示alt
title：鼠标划过图片显示的提示

5.解释css sprites如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

6.重绘和重排的区别
重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

7.px和em和rem的区别
px 实际上就是像素，用px设置字体大小时，比较稳定和精确。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。
em 就是根据基准来缩放字体的大小,是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem 相对于根元素 ，这样就意味着，我们只需要在根元素确定一个参考值。rem是CSS3新增的一个相对单位。
rem特点:
rem 相对单位，相对于根元素 ;
相对大小和绝对大小的优点于一身;
修改根元素就成比例地调整所有字体大小;
避免字体大小逐层复合的连锁反应.

8.什么是BFC?
BFC全称为块格式化上下文(Block Formatting Context) 。
产生影响：
根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素，
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动

9.get和post的区别？
get:会在地址栏里显示传值信息，不安全；针对中文乱码解决能力较差;传值数量有限
post:相对安全,针对中文乱码解决较强，传值数量较多

10.Src和href的区别？
href表示超文本引用，表示与页面有关联的，在link和a等元素使用，src便是来源地址，是页面上必不可少的一部分，是引入，在img，iframe上引用

11.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
（1）block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
（2）absolute生成绝对定位的元素，相对于static以外的父元素进行定位。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，忽略top, bottom, left, right声明。
inherit 规定从父元素继承 position 属性的值。

12.html5\CSS3有哪些新特性、移除了那些元素？
（1）语意化更好的内容元素，比如 article、footer、header、nav
表单控件，date、time、email、url
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器， 多背景
（2）.center，font,u，frame，frameset

13.如果孩子都为浮动，父类会没有高度，如何解决？
（1）给父类设置相应的高度
（2）创建一个孩子对象，设置清除浮动
（3）设置父类为overflow：hidden
（4）设置：afterhe before清除浮动

14.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
（1）id选择器（ # myid）
（2）类选择器（.myclassname）
（3）标签选择器（div, h1, p）
（4）相邻选择器（h1 + p）
（5）子选择器（ul < li）
（6）后代选择器（li a）
（7）通配符选择器（ * ）
（8）属性选择器（a[rel = “external”]）
（9）伪类选择器（a: hover, li: nth - child）
可继承： font-size font-family color, UL LI DL DD DT;
不可继承 ：border padding margin width height ;
优先级就近原则，样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:行内为1000，id为100，class为10，标签为1
!important > 内联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 > 通配选择器
important 比内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择p的第一个兄弟元素。
p:last-of-type 选择p的最后一个兄弟元素。
p:only-of-type 选择只有一个兄弟元素。
p:only-child 选择只有一个孩子元素。
p:nth-child(2) 选择第几个孩子元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。

15.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，
比如div默认display属性值为“block”，成为“块级”元素；
span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素： <br><hr><img><link><meta><embed>

16.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

17.CSS的盒子模型有几种？各有什么特点？
（1）两种，IE 盒子模型、标准 W3C 盒子模型；
（2）标准盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
IE盒模型：content部分包含了 border 和 pading;

18.如何居中div,如何居中一个浮动元素?
给div设置一个宽度，然后添加margin:0 auto属性
div{width:200px;margin:0 auto;}
居中一个浮动元素
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
19.什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

20.web标准网站有那些优点？
（1） Web标准网站结构和布局分离，使网站的访问和维护更加容易
（2） Web标准网站结构，布局以及页面访问都标准化，使网站能在更多的web标准设备中访问，兼容性更好
（3） Web标准网站语义化更好，语义化的XHTML不仅对用户友好，对搜索引擎也友好。