前端知识点回顾——HTML，CSS篇

前端知识点回顾篇——是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记，个人目的性很强，仅供参考。

---

doctype 有什么用

doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。

浏览器本身分为两种模式，一种是标准模式，一种是怪异模式（混杂模式），浏览器通过doctype来区分这两种模式，doctype在html中的作用就是触发浏览器的标准模式，如果html中省略了doctype，浏览器就会进入到Quirks模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异（页面会以一种比较宽松的向后兼容的方式显示），而html标准和dom标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在html开头使用doctype。

容器级标签？文本级标签？块级元素？行内元素？

CSS的三种引用方式？

1. 内联样式(行间样式):直接在标签内部通过使用style属性添加CSS样式　

   <p style="color:red;font-size:12px;">这是一个段落</p>
   

2. 内部样式:在标签里面通过使用<style>标签来引进CSS样式

3. 外部样式：先在外部新建一个外部样式表，然后在标签里面通过标签进行关联

优先级：内联样式>内部样式>外部样式

CSS命名规范

• 以字母开头

  1. 必须以字母开头命名选择器,这样可保证在所有浏览器下都能兼容;
  2. 不允许单个字母的类选择器出现;
  3. 允许命名带有广告等英文的单词,例如ad,adv,adver,advertising,已防止该模块被浏览器当成垃圾广告过滤掉.

• 全小写,并使用 - 连字符

  1. 下划线 _ 禁止出现在class命名中,统一使用-连字符
  2. 禁止驼峰式命名
  3. 不要出现-数字连接

标准文档流的微观现象

1. 空白折叠。比如，如果我们想让img标签之间没有空隙需要紧密连接。

<img src="img/00.jpg"/><img src="img/02.jpg"/>

1. 高矮不齐，底边对齐。

如果又有图片且图片参差不齐的,又有文字。则会出现高矮不齐,底边对齐的情况。

1. 自动换行。

浮动的性质

与标准文档流的渲染定位（脱标），能互相贴靠且设置宽高（贴边），字围效果（字围），默认宽为文本宽度（收缩）。

IE6的伴生属性

css属性前加下划线是IE6认识的专有属性，称伴生属性 hack

IE6浏览器兼容问题

1. IE6不支持小于12px的盒子，看起来都大

   将盒子的字号设置小（小于盒子的高） _font-size : 0px;

2. IE6不支持用overflow:hidden;来清除浮动

   追加一条 _zoom:1; (原义是放大倍数，追加是为了触发浏览器的hasLayout机制)

3. IE6双倍margin bug：当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。

   使浮动的方向和margin的方向相反；

   单独给队首的元素，写一个一半的margin：ul li.no1{_margin-left:20px;}

4. 3px bug：儿子右浮动用margin-right踹了父亲，结果IE6中多踹出3px。

   不用管，因为根本不允许用儿子踹父亲，出现了这个bug说明你的代码不标准。

层叠顺序

结构性伪类选择器

• li: first-of-type
• li: last-of-type
• li: only-of-type
• li: nth-of-type(n)
• li: nth-last-of-type(n)
• li: first-child
• li: last-child
• li: only-child
• li: nth-child(n)
• li: nth-last-child(n)
• p:not(.box)
• E:: selection

表单伪类

:focus+获得焦点时/ :disabled+选取不能操控的/ :enabled+选取可以操控的/ :checked+选取被选择的

opacity和rgba的区别？

rgba是透明颜色，顶多控制一个元素的背景颜色，父透子不透。 opacity是控制整个元素的透明程度，父透子也透。IE8以下：

filter: alpha(opacity=0~100);

iframe？

<!-- iframe通过name属性与a标签的target联系，使得点击a标签可以让iframe跳转到指定的地址 -->
<iframe src="http://www.tmall.com" frameborder="0" scrolling='auto' name="iframe"></iframe>
<a href="http://www.baidu.com" target='iframe'>baidu</a>

动画animation

div{
    /*动画名称 持续时间 延迟时间 */
    animation: move 2s;
}
/*自定义动画*/
@keyframes move{
    from{width: 100px;background: red;}
    to{width: 500px;background: blue;}

    /*0%{} 100%{}*/
}

css变换

1. transform: rotate() 变换焦点：transform-origin: x y; （默认居中）
2. transform: scale() 放大倍数>0
3. transform: translate(x, y)
4. transform: skew()

CSS的background属性

语法：background : bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

• position：left center right & top center bottom(只给一个值另外一个设置为center) / x% y%(以父元素的宽高作为参考，左上角为0%0%，右下角为100%100%) / xpos ypos 可理解为定位的left和top值

• size：xlen ylen(只给一个值另外一个设置为auto) / x% y%(相对于父元素的百分比) / cover(保持宽高比完全覆盖定位区域) / contain(保持宽高比以适应定位区域)

• origin：padding-box 默认 / content-box / border-box 指定position属性的相对定位位置

• clip：border-box 默认 / padding-box / content-box 背景从哪里的外面减掉

• attachment: scroll 默认 / fixed 固定

弹性布局与em

来源：https://www.w3cplus.com/css/px-to-em

Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”，弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。

em是一个相对于父元素font-size的一个垂直测量长度单位，1em等于一个任何字体中的字母所需要的垂直空间，可指定到小数点后三位。

• 设置body的font-size

在中设置一个正文文本所需的字体大小，或者设置为“10px”，相当于（“0.625em或62.5%”），这样为了方便其子元素计算

CSS设置： body{font-size: 0.625em;} 如果是IE浏览器要加上html{font-size: 62.5%;}

• 如何使用em作为单位

一个元素如果没有设置font-size，则它的em都是指父元素的字体的大小

如果它设置了font-size，则font-size中em是指父元素的字体的大小，其他属性的em是它自己字体的大小

响应式布局

媒体类型

all 所有媒体/screen 彩屏设备/print打印机

关键词

and 并且/not 排除某种指定媒体/only 仅限某种媒体

媒体特性

(width:600px) 宽/(max-width:600px) <=600px/(min-width：480px) >=480px/(orientation:portrait) 竖屏/(orientation:landscape) 横屏

媒体查询

• 方法1： @media [not|only] mediatype/all [and] (media feature-1) [and] (media feature-2…){CSS-Code;} 内嵌式（写在style里面）
  
  @media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}
• 方法2：@import url('index.css') [not|only] mediatype [and] (media feature) [and] (media feature); 内嵌引用外部（写在style里面）
  
  @import url("css/reset.css") screen;
• 方法3： 外部式引用

视口 viewport

在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示

<meta name='viewport' content='width=device-width initial-scale=1  minimum-scale=1 maximum-scale=1 user-scalable=no'/>  <--!将视口的宽度设置为移动端屏幕的宽度-->

width/height/initial-scale 初始比例/minimum-scale 允许缩放最小比例/maximum-scale 允许缩放最大比例/user-scalable 是否允许缩放（yes|no 或1|0）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <--!视口兼容-->

视口改变后如何改变rem的大小：

(function(win,doc){
    var docEl = doc.documentElement || document.body;//获取HTML标签
    //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
    var resize = 'orientationchange' in win ? 'orientationcha nge':'resize';                 function rem(){
        var w = docEl.clientWidth/720>1?720:docEl.clientWidth;
        docEl.style.fontSize= 100*(w/720)+'px';
    }
    doc.addEventListener('DOMContentLoaded',rem,false);         //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么 执行rem函数
    win.addEventListener(resize,rem,false);         //win下监听resize事件,如果resize事件，那么执行rem函数
})(window,document)

em和rem的区别

链接:http://caibaojian.com/rem-vs-em.html

• rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
• em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。