html+css 核心知识总结

时间 2019-12-06

标签 html+css html css 核心知识总结栏目 CSS 繁體版

原文原文链接

Html

1.解释

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来解决。
 重载页面时不须要重载整个页面，只须要重载页面中的一个框架页(减小了数据的传输，增长了网页下载速度)html

iframe的缺点
 一、页面样式调试麻烦，出现多个滚动条；
 二、浏览器的后退按钮失效；
 三、过多会增长服务器的HTTP请求；
 四、小型的移动设备没法彻底显示框架；
 五、产生多个页面，不易管理；
 六、不容易打印；
 七、代码复杂，没法被一些搜索引擎解读。
 八、iframe会阻塞主页面的Onload事件；前端

4.谈谈对Label的理解

 功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
 用法：<label for="InputBox">姓名</label><input id="InputBox" type="text">html5

CSS

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

选择符有9种web

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
通常而言chrome

!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；
知名的空元素：
bootstrap

<img> <input> <link> <meta>
区别
块元素：能容纳块和内联等其余元素，不能与其余元素同行，对于宽高起做用.（即能设宽高，独占一行）
内联元素：只能容纳文本和内联元素，允许其余内联元素与其同行，宽高对其不起做用。 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样式表

 方法1、reset.css可以重置浏览器的默认属性。不一样的浏览器具备不一样的样式，重置可以使其统一。好比说ie浏览器和FF浏览器下button显示不一样，经过reset可以统同样式，显示相同的效果。可是不少reset是不必的，多写了会增长浏览器在渲染页面的负担。
 方法2、 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导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就能够了。

7.浏览器的渲染过程

渲染引擎处理网页，一般分红四个阶段。

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

1.解析代码：HTML代码解析为DOM，CSS代码解析为CSSOM（CSS Object Model）
2.对象合成：将DOM和CSSOM合成一棵渲染树（render tree）
3.布局：计算出渲染树的布局（layout），以计算每一个节点的几何信息
4.绘制：将各个节点绘制到屏幕上。（即遍历render树，并使用UI后端层绘制每一个节点。）

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽量早的将内容呈现到屏幕上，并不会等到全部的html都解析完成以后再去构建和布局render树。它是解析完一部份内容就显示一部份内容，同时，可能还在经过网络下载其他内容。

![图片上传中...]

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

网页，一边开始解析
解析过程当中，发现<script>标签
暂停解析，网页渲染的控制权转交给JavaScript引擎
若是<script>标签引用了外部脚本，就下载该脚本，不然就直接执行
执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页

CSS 不会阻塞 HTML 的解析，但会阻塞渲染，
CSS 的解析会阻塞脚本的执行，
脚本也会阻塞 HTML 的解析。

8.重构、回流

浏览器的重构 又名重绘重构。指的是改变每一个元素外观时所触发的浏览器行为，好比颜色，背景等样式发生了改变而进行的从新构造新外观的过程。重构不会引起页面的从新布局，不必定伴随着回流。
回流是mozilla 的Geoko渲染引擎中的术语 ,在webkit中称为‘布局’.都是对元素定位。
又名重棑指的是浏览器为了从新渲染页面的须要而进行的从新计算元素的几何大小和位置的，他的开销是很是大的，回流能够理解为渲染树须要从新进行计算，通常最好触发元素的重构，避免元素的回流；好比经过经过添加类来添加css样式，而不是直接在DOM上设置，当须要操做某一块元素时候，最好使其脱离文档流，这样就不会引发回流了，好比设置position：absolute或者fixed，或者display：none，等操做结束后在显示。