目录
1.HTML,CSS常见问题终结
2.HTML，CSS基础
3.12个HTML和CSS必须知道的重点难点问题
4.掌握CSS的四个学习阶段
5.html与css注意事项及小知识点
6.HTML+Css面试题知识点
1.HTMLCSS常见问答总结一、HTMLCSS1、HTML1.1如何理解HTML语义化？
让人更容易读懂（增加代码可读性）。
让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。
在没有CSS样式下，页面也能呈现出很好地内容结构、代码结构
文章中的内容已全部打包完毕下方获取1.2script标签中defer和async的区别？如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。下图可以直观的看出三者之间的区别:
其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。asyncscript：解析HTML过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断HTML的解析。多个带async属性的标签，不能保证加载的顺序。deferscript：完全不会阻碍HTML的解析，解析完成之后再按照顺序执行脚本。多个带defer属性的标签，按照加载顺序执行1.3img标签上title与alt属性的区别是什么？
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。(且长度必须少于个英文字符或者用户必须保证替换文字尽可能的短,不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等)
title属性为设置该属性的元素提供建议性的信息。
1.4iframe的优缺点iframe元素会创建包含另外一个文档的内联框架（即行内框架）。优点：
用来加载速度较慢的内容（如广告）
可以使脚本并行下载
可以实现跨子域通信
缺点：
iframe会阻塞主页面的onload事件
无法被一些搜索引擎所识别
会产生很多页面，不容易管理
2、CSS2.1CSS选择器、优先级内联ID选择器类选择器标签选择器样式的优先级一般为!importantstyleidclass优先级是由A、B、C、D的值来决定的，其中它们的值计算规则如下：
如果存在内联样式，那么A=1,否则A=0;
B的值等于ID选择器（#id）出现的次数;
C的值等于类选择器（.class）和属性选择器（a[href="
原因一：压力不够，因为有不少人比如美工学CSS，因为是看别人学，所以学之，不学就没优势！这样的压力是很小的，学不好还有美工这碗饭。
原因二：只是业余学习，这样学还只是玩一玩，因为你不一定非要以这门技术吃饭。
原因三：方法不对，有的人只是在看教程，但他不动手去做，我以前就是看的太多，做的太少，所以有了实践你才能把理论的东西揉进去。
4.掌握CSS的四个学习阶段
有一次我问一个网友，学CSS难吗？她说：“不难”我说你学多久了？她说：“刚学”。其实她说的也没错！如果有人问我学CSS难吗？我会说：“难！”为什么我会说难呢？
学CSS可以分成以下几个阶段：
阶段一：不去想浏览器的兼容性
问题的情况下能做出页面，但页面里到处用TABLE的模式DIV写出的页面。
阶段二：想到了兼容性问题，但无法提前预防，只会修补问题，大量使用HACK技术（我对HACK技术只是知道，但用的很少）
阶段三：可提前预防BUG，但样式表中大量应用了ID,CLASS，CSS译过来是重叠样式表，比如“DIVPSPAN”。这句代码是标明DIV子元素中P的子元素SPAN，这样写就可以定义SPAN的样式了，不用在SPAN中加入CLASS了。这也就是CSS的优点所在，为什么不好好利用而一定要定义一个CLASS呢！
阶段四：这一阶段是最难的，良好的HTML语义结构、合理的CSS、可重复利用的样式。良好的语义有这方面的文章,合理的CSS，这两方面以后一定会写专题来研究
5.html与css注意事项及小知识点
常用的html特殊符号：
空格：npsd；
版权所有符号：copy；
注册商标符号：reg；
有两个标签容器：span和div
span标签一般用来包裹一段文本，便于为文本设置样式；
div标签一般用于规划网页；
在html中注释是：!--注释内容--
有三种方法可以消除浮动元素对其他元素的影响：1.设一个父元素div让他的高度和宽度全覆盖与浮动元素；2.给父元素加一个overflow：auto的属性，可以自动改变父元素的大小；3.clear属性为清除浮动前两个都是给父元素加最后一个是给你不希望被影响的元素加clear的属性值有left，right，both；嵌套原则：超链接不能嵌套超链接；p标签不能嵌套p标签；标题标签不能互相嵌套；css
在实际的网页开发中，多个样式发生冲突，这时优先级高的显示如何判断优先级：可以比较样式的权重值通用选择器*的权重值为0；标签选择器的权重值为1；类选择器的权重值为10；id选择器的权重值为；行内样式的权重值为0；判断哪个样式会显示可以直接计算其权重值比较他们的大小
6.HTML+Css面试题知识点
我们再看第一个面试题:position的属性有哪些，区别是什么?
—般我们可以这么回答:
.relative:元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。
.fixed:元素的定位是相对于window的，和其他元素没有关系。
absolute:浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/
absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。
我们再看下第二个面试题:visibility:hidden与display:none的区别?
—般我们可以这么回答:
相同点:都可以让元素隐藏，点击该区域都不会响应事件不同点:
display:none该元素不会在页面中占置空间，切换display属性状态会触发回流visibility:hidden会占据空间，切换visibility属性状态会触发重绘
文章中的内容已全部打包完毕下方获取我们再看下第三个面试题:对盒子模型的理解?
—般我们可以这么回答:
css3中的盒模型有以下两种:标准盒子模型、IE盒子模型
相同点:都是由四个部分组成的，分别是margin、border.padding和content。不同点:
标准盒子模型，width和height只包含content
IE盒子模型，width和height包含border，padding和content可以通过设置bix-sizing属性来改变盒子模型:
box-sizeing:content-box表示标准盒模型box-sizeing:border-box表示IE盒模型
我们再看下第四个面试题:scss、LESS是什么?为什么要使用它们?—般我们可以这么回答:
他们都是cSs的预处理器，以前的原始cSs都是静态写法概念写的太low了，不具备复用性。他们的出现相当于一个黑魔法一样，让我们可以在css领域也可以实现变量，继承，运算，函数封装复用和拓展的能力，这样子就可以把样式也玩出花来。
比如SCSS我就可以用$XXX进行样式变量定义，实现主题色的概念;也可以用
mixn和include来实现样式复用和拓展我们再看下第五个面试题:对媒体查询的理解?—般我们可以这么回答:
媒体查询主要是一套表达式组成，最终会被解析成true/false
使用
media查询，可以针对不同的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面我们再看下第六个面试题:对Flex布局的理解?—般我们可以这么回答:
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex-direction属性决定主轴的方向(即项目的排列方向)。
flex-wrap属性定义，如果—条轴线排不下，如何换行。justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
Flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴:一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用
有任何关于编程的问题都可以私信我，我看到后会及时解答。编程小姨妈，为分享干货而生！据说，每个年轻上进，颜值又高的互联网人都