html+css 核心知识总结

摘要：空元素，主要讲下可算内联元素，因为可与其他元素同行，且宽高对其起作用。提示对内联元素宽高起作用，请使用谈谈对定位的理解生成绝对定位的元素，相对于定位以外的第一个父元素进行定位。

Html 1.解释

，
主要从utf-8展开，utf-8是一种字符编码，该编码是全世界通用的，意思是假如项目涉及多语言，那么只能使用该编码方式。

是使用html5文档类型。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 抛弃之前的html4的4中文档类型

2.语义化的理解

**what?**
    根据内容的结构（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
**why?**
    为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
    用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
    有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
    方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
    便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
**how?**
    尽可能少的使用无语义的标签div和span；
    在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
    不要使用纯样式标签，如：b、font、u等，改用css设置。
    需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
    使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
    表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
    每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

3.Iframe的优缺点， 如何用

iframe的优点：
 iframe能够原封不动的把嵌入的网页展现出来。
 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)

iframe的缺点
 1、页面样式调试麻烦，出现多个滚动条；
 2、浏览器的后退按钮失效；
 3、过多会增加服务器的HTTP请求；
 4、小型的移动设备无法完全显示框架；
 5、产生多个页面，不易管理；
 6、不容易打印；
 7、代码复杂，无法被一些搜索引擎解读。
 8、iframe会阻塞主页面的Onload事件；

4.谈谈对Label的理解

 功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
 用法：姓名

CSS 5.谈谈对css选择符的理解

选择符有9种

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 ;

优先级
相同的样式优先级就近原则，样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级算法是权重计算法，id=100，class=10 ,标签是1
一般而言

   !important >  id > class > tag  
   important 比 内联优先级高

6.对css元素的理解

种类
块元素:block：p,ul,li ,dl,ol,dt,h1~h6,hr,div,pre,table. form , fieldset
内联元素:inline： a、span、img、input、label、select、strong、textarea br, code, sup, sub；
知名的空元素：

区别
块元素：能容纳块和内联等其他元素，不能与其他元素同行，对于宽高起作用.（即能设宽高，独占一行）
内联元素：只能容纳文本和内联元素，容许其他内联元素与其同行，宽高对其不起作用。 inline不响应垂直margin,和padding（有但请避免）, width, height, max/min width/height 等属性声明。
空元素，主要讲下input 可算内联元素，因为可与其他元素同行，且宽高对其起作用。

提示：对内联元素宽高起作用，请使用display:inline-block

7.谈谈对定位的理解

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 
fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static  默认值。没有定位，元素出现在正常的流中  （忽略 top, bottom, left, right z-index 声明）

谈谈对盒模型的理解

盒模型是有两种标准的，一个是标准模型w3c，一个是IE模型。

标准盒子的宽 等于 width+margin +padding+border；width就是内容的宽高
IE的盒模型：width=内容(content)+填充(padding)+边框(border)的总宽高）

css如何设置两种模型：box-sizing:content-box; border-box;
注意事项：input、button元素默认border-box ，还是基于传统的ie 盒子模型。但文档类型是标准模式，则所有元素都是w3c盒模型

9.边距重叠与BFC：

边距重叠的问题：
父元素没有设置margin-top，而子元素设置了margin-top：20px;可以看出，父元素也一起有了边距
相邻的上下元素margin-top和margin-bottom也会重叠

边距重叠/外边距合并的注意事项：
外边距合并只出现在块级元素上；
　浮动元素不会和相邻的元素产生外边距合并；
　绝对定位元素不会和相邻的元素产生外边距合并；
　内联块级元素间不会产生外边距合并；
　根元素间不会不会产生外边距合并（如html与body间）；
　设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并

边距重叠的解决方案 （BFC）

float属性不为none（脱离文档流）
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
根元素

BFC的适用场景
 自适应两栏布局
 清除内部浮动
 防止垂直margin重叠

10.对浮动的理解

工作原理：
 对块元素设置浮动属性后，它就脱离了当前的文档流布局的方式，漂浮到他的父级元素的左边或者右边。如果想让多个块显示在同一行中，可以将这些块都设置成浮动，并且浮动方向相同。

为什么要清除浮动
浮动的缺点：
1.当元素有默认属性，且每个浏览器默认属性值不同，而编写者不清楚具体是多少及多大事，会对父元素（如对父元素的background属性，margin属性有影响）和后面元素产生影响，造成布局错乱。
2.浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
故需对父元素使用Clear，进行清除浮动

清除浮动的3种办法：
1.添加一个附加层，：#haa{display：block;clear:both;height:20px;}
2.给父元素添加overflow：hidden;属性。但是IE6不支持，还需给父元素添加zoom:1属性。
3.利用伪类after的方法
例： .cf:after{content:" "；height:0； display:block； clear:both；line-height:0; Visibility:hidden；} .cf{zoom:1} /IE6不支持通过clear:both和行高为0的方式清除浮动，需增加zoom:1/
注意：使用时：浮动布局的时候，在ie6环境中会出现双倍边距的bug（即元素浮动方向和边距方向一致的时候边距会是原来的两倍。）解决的办法是给元素添加display:inline;属性。

11.为何初始化css样式表

 方法一、reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的效果。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。
 方法二、 normalize.css是一个可以定制的css文件，它让不同的浏览器在渲染元素时形式更统一。

12.CSS sprite vs 字体图标

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

13.实现水平和垂直居中的方式

实现div的水平居中和垂直居中
1.适用: 宽高已定
设置position: absolute(父元素记得设置: relative), 然后top和left设置50%, 50%, 再设置margin-left=宽/2, margin-top:宽/2
2.只适用: 固定宽高; 如果宽高随意,想靠内部撑开的话, 会占满整个父div
依然是利用position：子div的上下左右都设置成0，然后margin设置auto。关键是要设置position：子absolute，父relative。
3.适用: 不论是否固定宽高都可用. 问题在于兼容性. ie9及以下不支持
设置父级flex属性: display:flex; justify-content:center; align-items: center;
4.适用: 要设宽度, 否则会使得宽度为父级div的宽度
父级元素设置display:table-cell ，然后vertical-align：middle。这种方法可以设置垂直居中. 这时候只要在子元素里设置margin:auto即可实现水平居中
但是这种方法好像会使父元素的居中无效。
5.适用: 可不指定宽高
使用transform居中. 设置父级position:relative; 子级position:absolute. 然后top: 50%; left:50%; transform:translate(-50%,-50%)
6.适用: 指定宽高百分比
保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。但是这种方法不能由内部元素自动调节div的宽高，而是通过父元素大小控制的
7.使用display:inline-block加伪元素
box 容器通过 after或者before 生成一个高度 100% 的「备胎」，他的高度和容器的高度是一致的，相对于「备胎」垂直居中，在视觉上表现出来也就是相对于容器垂直居中了
8.多元素水平居中

1) 把子级div设置成display:inline-block; 然后父级div设置text-align:center;
2) 更方便灵活的做法还是使用flex-box, 设置水平居中 justify-content: center

9.使用栅格化布局
10.使用flex

14.CSS3新特性：

 新增各种CSS选择器 (: not(.input): 所有class不是“input”的节点）
 圆角border-radiuis
 多列布局：multi-column layout
 阴影和反射： multi-column layout
 文字特效：text-shadow
 线性渐变： gradient
 旋转：transform
 缩放，定位，倾斜，动画，多背景：transform: scale(0.85,0.90) translate(0px, -30px) skew(-9deg, 0deg) Animation

15.对css的优化有哪些（压缩 合并 图片 规范）

 题目中好像已经写了答案了。详情参考后面的前端优化

16.常见问题与解决方法

1.如何清除图片下方出现几像素的空白间隙？
方法1：img{display:block;}
方法2：img{vertical-align:top;}
方法3：.test{font-size:0;line-height:0;}
.test为img的父元素

2.如何使页面文本行距始终保持为n倍字体大小的基调？
方法：body{line-height:n;}

3.如何容器透明，内容不透明？
方法1：容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上
方法2 :正常的子父容器法，对附容器用background:rgba(0,0,0,0.3);

ps:透明度的问题：filter:alpha(opacity=20) opacity:0.2

4.如何使文本溢出边界显示为省略号？
.test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

5.如何使连续的长字符串自动换行？
.test{width:150px;word-wrap:break-word;}

6.使文本溢出边界不换行强制在一行内显示？
.test{width:150px;white-space:nowrap;}

7.去掉chrome 登录页中 记住密码后，输入框的黄色背景
回答: input:-webkit-autofill{ background-color:#fff !important; -webkit-box-shadow:0 0 0 40px #fff inset; }

8.分页不能正常跳转至对应的页面：
回答: form表单中增加 return false

9.对表格table的td明明设置了width，为何不起作用？
方法: 可能你的表格被设置了：table-layout:fixed; 去掉此属性即可

10.audio标签 在chrome下支持ogg mp3 wav的模式，但在ie11下 仅支持mp3格式；但有的ie11 啥都不行，不知道为何。。。

高阶 1.对less 和sass的理解

定义：Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
优点：
写的更快，变量和函数的功能：方便制作主题，利于维护，便于扩充。（换肤）
区别？

2.实现一个栅格系统

Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性

1.行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment）和内补（padding）。
2.通过行（row）在水平方向创建一组列（column）。
3.自己内容应当放置于列（column）内，并且，只有列可以作为行（row）的直接子元素。
4.类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化布局。
5.通过为列设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消为.container元素设置的padding，也就间接为行（row）所包含的列（column）抵消掉了padding。
6.栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。
7.如果一行（row）中包含了的列（column）大于12，多余的列所在的元素将作为一个整体另起一行排列。
8.栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕覆盖栅格类。
如下图所示为栅格系统在多种屏幕上的应用说明。

详情请见 bootstrap官网：https://v3.bootcss.com/css/#grid

3.谈下flex

Flex 布局教程：语法篇 阮一峰
http://www.ruanyifeng.com/blo...^%$

4.px em rem pt vw vh的区别

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 IE无法调整那些使用px作为单位的字体大小；
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em会继承父级元素的字体大小。
rem 是相对单位，相对的是html根元素 是字体的单位
pt ：印刷业上常使用的单位，磅的意思，一般用于页面打印排版。
关系：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。pt=px3/4
用法：对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
vw相对于视口的宽度。视口被均分为100单位的vw 算比例的时候，不用去算父元素 然后一级一级的百分比下来
vh相对于视口的高度。视口被均分为100单位的vh
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

5.渐进增强和优雅降级

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

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

FOUC（无样式内容闪烁）

FOUC - Flash Of Unstyled Content 文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法简单的出奇，只要在之间加入一个或者

![图片上传中...]

前端必读：浏览器内部工作原理
*正常的网页加载流程是这样的。

网页，一边开始解析
解析过程中，发现