HTML以及CSS测试笔记

一、页面导入样式时，使用link和@import有什么区别？

• link属于XHTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS。
• 页面被加载时link会被同时加载，而@import引用的CSS只能在页面加载完再加载。
• @import是CSS2.1提出的，只能在IE5以上被识别，link是XHTML标签，无兼容性问题。
• link支持js控制DOM去改变样式，而@import不支持。

二、常见的行内元素与块级元素以及空元素

• 行内元素有：a b span img input select strong
• 块级元素有：div ul ol li dl dt dd h1 h2…h6 p
• 空元素有：br hr img input link meta

三、cookies、sessionstorage、localstorage的区别？

• 相同点：都是存储在客户端。
• 不同点：
  （1）存储大小：cookie存储大小不超过4k；sessionstorage和localstorage虽然存储大小也有限制但是比cookie大得多，达到5M或更大。
  （2）有效时间：localstorage存储持久数据，浏览器关闭后数据不会丢失除非主动删除；sessionstorage在浏览器窗口关闭之后数据自动删除；cookie在cookie设置的过期时间之前一直有效，浏览器关闭也会存在。
  （3）数据与服务器交互方式：cookie的数据会自动传递到服务器，服务器端也可以写到cookie客户端；sessionstorage和 localstorage只会保存在本地。

四、浏览器内核

• Trident-----------------------------------IE浏览器（IE6–IE10所用）
• Gecko------------------------------------火狐浏览器Firefox
• Presto------------------------------------Opera前内核，现在使用Blink
• Webkit------------------------------------苹果Safari
• Blink---------------------------------------谷歌和Opera
• edge---------------------------------------IE11所使用内核

五、display:none;与visibility:hidden;区别

相同：它们都可以是元素不可见。
不同点：

• display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility:hidden;不会让元素从渲染树中消失，渲染元素继续占据空间，只是内容不可见。
• display:none;是非继承属性，visibility:hidden;是继承属性，子孙节点消失是继承了hidden，设置visibility:visible;可以让子孙节点显示。
• 修改常规流中元素的display通常会造成文档重排，修改visibility属性只会造成本元素的重绘。
• 读屏器不会读取display:none;元素内容，会读取visibility:hidden;元素内容。

六、CSS有哪些常见的继承属性

font、text-align、text-indent、text-shadow、line-height、color、letter-spacing、word-spacing、text-transform等

七、标准的CSS盒模型，低版本IE盒模型有什么不同？

• 两种，IE盒子模型和W3C盒子模型；
• 盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
• 标准盒模型(W3C)：元素宽度=width+padding+border+margin；
• IE盒模型：元素宽度=width+margin；
• 区别：IE盒模型的content把border和padding计算进去了；
• 标准浏览器通过设置CSS3的box-sizing：border-box；属性来设置成IE盒模型；

八、position定位有哪些值？

• absolute：绝对定位
• relative：相对定位
• fixed：固定定位（相对于浏览器窗口）
• static：默认值，没有定位。
• z-index：设置定位元素显示的层级

九、CSS3有哪些新特性？

• 新增选择器 p:nth-child(n)
• 弹性盒模型 display:flex;
• 多列布局 column-count:5;
• 媒体查询
• 个性化字体
• 颜色透明度color:rgba(0,0,0,0.8)
• 圆角border-radius：5px；
• 渐变 background:linear-gradient（red，green，yellow）
• 阴影box-shadow:3px 3px 3px red;
• 倒影box-reflect:below 2px；
• 文字溢出text-overflow
• 背景效果background-size
• 边框效果border-image
• 动画@keyframes
• 转换transform

十、用纯CSS创建一个三角形的原理

/*把上左右三条边隐藏掉（颜色设置为transparent）*/
#demo{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent red transparent;
}

十一、li与li之间有看不见的空格是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车/空格）的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设置为0，就可以解决了。

十二、CSS定义的权重

权重排列以4位数呈现例如abcd则分别对应行内style、id、class、标签
例如：
*{}-------------------------------------------------优先级=0000
li{}-------------------------------------------------优先级=0001
ul li{}----------------------------------------------优先级=0002
ul li a{}--------------------------------------------优先级=0003
ul ol li.red----------------------------------------优先级=0013
#aa------------------------------------------------优先级=0100
style=""-------------------------------------------优先级=1000

十三、浮动与清除浮动

• 浮动：
  浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。由于浮动框不会在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样，浮动的块框会漂浮在文档普通流的块框上。
• 清除浮动：
  父级div定义伪类:after和zoom

.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat{
zoom:1;
}

十四、请列举几种隐藏元素的方法

1. visibility:hidden;
2. display:none;
3. opacity:0;
4. position:absolute;(设置一个很大的left负值定位)
5. transform:scale(0);(将元素缩放为无限小，不可见，但元素原来位置被保留)
6. height:0;
7. filter:blur(0);(将一个元素的模糊度设置为0)

十五、rgba()和opacity的透明效果有什么不同？

• opacity作用于元素以及元素内的素有内容的透明度
• rgba()只作用于自身的颜色或者背景颜色，子元素不会继承透明效果

十六、CSS样式中px、em、rem有什么区别？

• px相对于显示器屏幕分辨率，无法使用浏览器字体放大功能
• em值并不是固定的，会继承父级的字体大小：em=像素值/父级font-size
• rem是CSS3新增的一个相对单位，rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。一般用于移动端设定。

十七、CSS优化、提高性能的方法有哪些？

1. 多个css合并尽量减少HTTP请求
2. 将css文件放在页面最上面
3. 移除空的css规则
4. 选择器优化嵌套，尽量避免层级过深
5. 充分利用css继承属性，减少代码量
6. 属性值为0时不加单位

十八、a标签四个伪类的执行顺序

link----->visited----->hover----->active

十九、class和id的区别

对于css而言，id和class都是选择器，唯一不同的地方在于权重不同。对于html而言，id和class都是dom元素的属性值，不同的地方在于id属性的值是唯一的，而class的值可以重复。id还可以用于锚点实现。
直观地说：id用于js，class用于css（趋势）

html5有哪些新特性？

1. 绘画canvas
2. 用于媒体回放的video和audio元素
3. 本地离线存储localstorage 长期存储数据，浏览器关闭后数据不丢失
4. sessionstorage的数据在浏览器关闭后自动消失
5. 语义化更好的内容比如article、footer、header、nav、section
6. 表单控件calendar、date、time、email、url、search
7. 新的技术webworker、websocket、Geolocation