CSS 高频面试题

1: 行内元素/ 块级元素,  非替换元素/ 替换元素 
2: img 标签的title 和 alt 属性
3: meta 标签
4: DOCTYPE 标签
5: script 标签的 defer 和 async 
6: W3C 盒模型和怪异盒模型
7: 一个盒子水平垂直居中的方法
8: BFC  的含义: 
9: 清除浮动的方法
10: position 的属性
11: CSS 隐藏元素的方法
12: Flex 布局、
13: 双栏布局/ 三栏布局
14: 重绘 / 重排
15: CSS 选择器
16: CSS 动画
17: CSS 实现三角形
18: CSS Sprites 精灵图
19: px rem em 单位划算
20: 伪类/ 伪元素
--------------------------------------------------------------
行内元素/ 块级元素,  非替换元素/ 替换元素 
CSS 行内元素/ 块级元素 的区别:
区别： (1): 行内元素会在一条直线上排列(默认宽度只与内容有关),  都是同一行, 水平方向排列。
      (2): 块级元素各占一行（默认宽度是他本身父元素的100%, 和父元素的宽度一致, 与内容无关） 垂直方向排列。 块级元素从新的一行开始, 结束接着一行断行。
      (3): 块级元素可以包含行内元素和块级元素。 行内元素不能包含块级元素,  只可以包含文本或者其他行内元素。
      块级元素既可以包含块级元素也可以包含行内元素。但是行内元素不能包含块级元素。 行内元素既可以包含行内元素也可以包含其他文本元素。

   3:  行内元素与块级元素相互转化的:
    display: block;  转化为块级元素
    display: inline; 转化为行内元素
    display: inline-block;  转化为行内元素。
  
行内元素与 块级元素都会有哪些？
行内元素:  span(标签)  img(可以社会中宽高), i....
块级元素:  div(标签) p, h1, h2, article 标签
--------------------------------------------------------------
img 标签的title 和 alt 属性

img: alt 属性和title 属性的区别: 前者是在图片无法加载的时候才会显示其值, 而title 是在图片正常加载鼠标划上去才会显示的值, 虽然alt 也会由后者功能,  但是只是在低版本的ie 浏览器才支持, 高版本以及标准浏览器不支持这个功能了。
--------------------------------------------------------------
meta 标签  如果网站的SEO 做的比较好的话,  排名就会靠前。
meta 标签:  meta 的属性有两种:  name 和 http-eqive
            name: 属性主要用于描述网页,  对应于content (网页内容);
关键字:  (必须有)
   <meta name="keywords" content="输入关键字">
网页描述:  (必须有)
<meta name="description" content="对网页内容的描述">
用以说明生成工具 (按需引入)
<meta name="generator" content=""></meta>
网页重定向 (按需引入)
<meta http-equiv="refresh", content="3"; http: //www.baidu.com" >
refresh: 自动刷新,  content="3";  代表时间   3s 后自动跳转。  跳转到baidu.com y页面。
--------------------------------------------------------------
script 标签中的defer, async 属性的区别:
向html 页面中插入JavaScript 代码的主要方法就是通过 Script 标签的形式。 其中包含两种形式, 第一种: 直接在script 标签中插入js 代码,  第二种既是通过src 引入外部js 文件。 由于解释器执行js 代码期间会阻塞页面其余部分的渲染,  对于存在大量js 代码的页面来说会导致浏览器出现长时间空白和延迟。 为了避免这个问题,  建议把全部的js 引用放在 </body> 标签之前。

script 标签存在两个属性, defer 和async, 因此script 标签的使用分为三种情况:

1: <script src="example.js"></script>
   没有defer 或者 async 属性, 浏览器会立即加载并执行相应脚本。 也就是说在渲染script 标签之后文档之前, 不等待后续加载的文档元素, 读到就会开始加载并执行, 此后会阻塞后续文档的加载。

2: <script async src="example.js"></script>
   有了async 属性, 表示后续文档加载和渲染与 js 脚本的加载和执行进行的, 既是异步进行的。

3: <script ddefer src="example.js"></script>
   有了defer 属性, 加载后续文档的过程和 js 脚本的加载(此时仅加载并不执行) 是并行进行的(异步),
js 脚本的执行需要等到文档所有的元素解析完成之后执行, DOMContentLoaded 事件触发执行之前。