html相关基础知识点（二），部分题为面试题

1.@import和link的区别

.@import和link的区别
1) 所属范围
		@import 是css的语法，只能导入样式
		link是html的标签，不仅可以加载样式，还可以定义rel属性
			rel="stylesheet"表示调用外部样式表
2) 加载顺序
		页面加载的时候，link标签引入的css被同时加载
		@import引入的css在页面加载完毕后再被加载
3) 兼容性
		@import需要兼容IE5+
		link标签，不存在兼容性问题

2.css在html中的应用？

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的现实效果。可以解决html代码对样式定义的重复，
提高了后期样式代码的可维护性，并增强了网页的现实效果功能，简单一句话：CSS将网页内容和现实样式进行分
离，提高了现实功能。

3.选择器有啥？

id选择器  class选择器 属性选择器 伪类选择器 伪元素选择器 标签选择器

4.子代选择器和后代选择器的区别

子代选择器只能选择某元素的子代元素    后代选择器可以选择某元素的后代元素(包括子代元素)

5.字体样式 font- ?

font-size font-weight font -falimy font-style	

6.文本样式 text- ?

text-alilgn   text-decoration   text-transform    text-overflow    text-indent text-shadow	

7.可设置文本垂直居中，水平居中

text-align:center; line-height:height;

8.选择器优先级【级联】

!important>style行内属性 100>id选择器 100>(class选择器=属性选择器=伪类选择器  10 )>(伪元素选择器=标签选择器 1)

9.iconfont在html中的使用

1.进入阿里巴巴矢量图标库www.iconfont.cn挑选所需的图标，加入购物车
2.然后添加到项目
3.点击font class 下载到本地 
4.在vscode 用link外部导入
格式<span class="iconfont  ......"></span>	

10.fontawesome在html中的使用

1.进入到fontawesome的官方网站
2.下载图库的文件
3.在vscode 用link外部导入
格式 <span class="fa fa-..."></span>

11.网络字体(字体图标库的使用)

webfont    http://www.xiazaiziti.com/tag/ttf?btwaf=17865710
1.下载对应字体
2.设置字体
3.引用字体
@font-face { 
font-family: 'myfont'; src: url(“/fonts/浅浅の奈雪体.woff”), 
url("/fonts/浅浅の奈雪体.ttf"); 
} 
.myfont { 
font-family: myfont; 
} 
<div class="myfont"> 浅浅の奈雪体 </div>

12.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准的css盒子模型的宽高指的是内容区的宽高
低端的IEcss盒子模型的宽指的是 内容区的宽+内边距+边框的宽
低端的IEcss盒子模型的高指的是 内容区的高+内边距+边框的宽

13.清除浮动的方式

14、如何给行内元素设置宽高 – 将行内元素设置为块级元素、脱离文档流

(1)首先变为块级元素 display：block； 这样就可以给行内元素设置宽高了
(2)首先变为款及元素 display：block； 然后加浮动 float：left;

15、块级元素如何在父元素中水平垂直居中

1. 父级元素 display：flex  align-items:center;justify-content:center;
2.父级元素 display：flex    子元素：margin：auto;
3. 父级元素有定位元素(position)   子元素：position：absolute；left:50%;top:50%;margin-top:-(height/2);margin-left:-(width/2);
4. 父级元素有定位元素(position)   子元素：position：absolute； left:0;right:0;top:0;bottom:0; margin:auto;
5. 父级元素：display：table-cell   vertical-align:middle;  子元素：margin:auto;

16、显示隐藏元素的方式及区别

display:none; 浏览器不显示元素，也不占据页面空间
opacity：0；浏览器不显示该元素，但是会占据页面空间，交互事件正常
visibility：hidden; 浏览器不显示该元素，但是会占据页面空间，交互事件失效

17、如何让元素使用margin:0 auto，水平居中

首先这元素是块级元素  然后可以设定宽高

18、overflow的三种取值，并说明具体含义

    hidden ，scroll visible
overflow:hidden-->  内容会被修剪，并且其余内容是不可见的
overflow:scroll-->   内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
overflow:visible--> 默认值。内容不会被修剪，会呈现在元素框之外

19、CSS3新特性

border-radius    box-shadow  border-image  background-size
background-origin    background-clip  linear-gradient()   radial-gradient()

20、理解BFC吗？

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，
指一个独立的渲染区域或者说是一个隔离的独立容器。
BFC 即 Block Formatting Contexts (块级格式化上下文)，属于普通流。
可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。	

21、sass、less、css

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、
导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
使用 Sass 以及 Sass 的样式库（如 Compasss）有助于更好地组织管理样式文件，以及更高效地开发项目。

Less 也是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、
函数等功能，让 CSS 更易维护、方便制作主题、扩充。

CSS是一种表现HTML或XML等文件样式的计算机语言，
可以静态修饰网页和脚本语言动态地对网页各元素进行格式化，
还能够对网页中元素位置的排版进行像素级精确控制，
具有丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩等特点。”	

22.CSS中哪些属性可以继承？

字体系列属性：
font-family：规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的大小
font-style:定义字体的风格

文本系列属性：
text-indent:文本缩进
text-align:文本水平对齐
text-shadow:设置文本阴影
line-height:行高
word-spacing:字体间隔
letter-spacing：字符间距
text-transform：Kongzhi文本大小写
color：文本颜色：
direction:规定文本的书写方向

23、浏览器兼容性有哪些？

1.浏览器默认的margin和padding不同。
2.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
3.a(有href属性)标签嵌套下的img标签，在IE下会带有边框
透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6;

24、CSS优化，提高性能的方法有哪些？

1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。
2.减少css嵌套，最好不要套三层以上。
3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。
4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。
5.不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的