html&css面试笔记

摘要：什么叫优雅降级和渐进增强渐进增强针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

选择器类型：

id选择器      （ # myid）
类选择器      （.myclassname）
标签选择器    （div, h1, p）
相邻选择器    （h1 + p）
子选择器      （ul > li）
后代选择器    （li a）
通配符选择器  （ * ）
属性选择器    （a[rel = "external"]）
伪类选择器    （a:hover, li:nth-child）

选择器优先级：就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;

优先级为:!important > id > class > tag，同时important 比内联优先级高

权重的规则：标签的权重为1，class的权重为10，id的权重为100；如果权重相同，则最后定义的样式会起作用

px：像素，绝对单位，指定是多少就是多少，计算比较容易；

em：相对单位，相对于父元素的字体大小，如果当前对象没有设置字体尺寸，则相对于浏览器默认字号，em的值不固定，并且em会继承父级元素的字体大小；

rem：相对单位，相对于HTML根元素的字体大小；

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

浮动

父元素flex布局，左侧子元素flex-basis:200px，右侧子元素flex:1；

浏览器内核：IE-Trident，Firefox-Gecko，Opera-Blink，Chrome-Webkit，Safari-Webkit，360-兼容模式Trident+极速模式Webkit

    

 .box{
    width:200px;
    height:200px;
    border:1px solid #06C;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    *font-family:simsun;
    *font-size:200px;
}
.box img{
    vertical-align:middle;
} 

父元素没有给定高度的前提下，父元素内整体浮动的元素无法撑开父元素，需要清除浮动。

父级上增加属性overflow：hidden

.parent{
    overflow:hidden;
}

在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）

    12
    12
    12
    12
    12
    12
    12
    12
    

使用成熟的清浮动样式类，clearfix

.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

效果上的不同：opacity方案，子元素文字内容同时透明；rgba方案，子元素内容不透明

#lamp{
    width: 400px;
    height: 40px;
    background: #ff0000;
}
#lamp:hover{
    animation: rotate 2s;
    -webkit-animation: rotate 2s; /* Safari and Chrome */
}
@keyframes rotate
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。
这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

实现方法有很多种，以下是其中一种实现：

//HTML结构：

     



//CSS：
.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均设置为0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin设置为auto*/
    margin:auto;
    border: 1px solid green;    
} 

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

补充：link和@import的区别

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

当图片不输出信息的时候，会显示alt信息，鼠标放上去没有信息，当图片正常读取，不会出现alt信息

当图片不输出信息的时候，会显示alt信息 鼠标放上去会出现title信息
当图片正常输出的时候，不会出现alt信息，鼠标放上去会出现title信息

title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签

title属性的功能是提示。额外的说明信息和非本质的信息请使用title属性。title属性值可以比alt属性值设置的更长

title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。

当不对doctype进行定义时，会触发怪异模式。

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
CSS3的box-sizing
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

分为边框、背景，渐变，阴影、2D转换 3D转换、过渡、动画、弹性盒子等。

比如：边框(border-radius、border-shadow、border-image)之类的 。

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：

// 1、条件Hack

// 2、属性Hack
.test{
    color:#0909; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
}
// 3、选择符Hack
* html .test{color:#090;}       /* For IE6 and earlier */
* + html .test{color:#ff0;}     /* For IE7 */

百分比布局+媒体查询

同向margin的重叠：
在最外层的div中加入overflow:hidden;zoom:1
在最外层加入padding:1px;属性
在最外层加入：border:1px solid #cacbcc;

异向重叠问题：
float:left（只能解决IE6浏览器中的异向重叠问题，可以解决IE8以上、chorme、firefox、opera下的同向重叠问题）

absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 left位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 规定应该从父元素继承 position 属性的值。

渲染的流程如下：
1.解析HTML文件，创建DOM树。自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式3.将CSS与DOM合并，构建渲染树（Render Tree）;
4.布局和绘制，重绘（repaint）和重排（reflow）;

标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。
可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
还有一个用途是可以添加服务器发送到浏览器的http头部内容

新的语义标签和属性

表单新特性

视频和音频

Canvas绘图

SVG绘图

地理定位

拖放API

display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

使用visibility:hidden性能要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。