HTML、CSS基本概念

1.行内元素和块元素

行内元素：在同一行，宽高依据内容大小

span、a、img、input、label、br、b、strong、i、em、select、textarea

块级元素：单独占据一行，宽高可以单独设置

div、form、table、h1-h6、p、ui、li、dl、dt、dd、ol

2.CSS三种文档结构

标准流、浮动（脱标）、定位

3.CSS的定位方式/position属性值

默认定位：static

相对定位:relative

绝对定位:：absolute（脱标）

固定定位：fixed（脱标）

粘性定位：sticky

继承定位：inherit

浏览器定位：initial

4.设置浮动和定位之后，display变成什么

display:block,但是使用的时候和dispaly:inline-block

5.浮动元素会产生的问题

1.父元素高度塌陷

2.与浮动元素同级元素，不管是在浮动元素前还是浮动元素后，页面结构都会出现变化

6.清除浮动的方法

7.display有哪些属性

none：隐藏

inline:转化为行内元素

block:转化为块级元素，显示

inline-block:转化为行内块元素

inherit：继承父元素

table:转化为表格，与块级一样

list-item:转化为列表，与块级一样

8.display、float、position优先级

display:none > position > 根元素/float > display:其他

9.display：none和visibility：hidden区别

1.display:none是元素消失，不占据任何空间，visibility:hidden是元素隐藏，依然占据原有空间

2.display:none会产生回流和重绘，visibility:hidden只会产生重绘

3.display:none有株连性，子元素一定不可见，visibility:hidden是伪株连性，子元素可以通过visibility:visible

10.元素隐藏方法

1.display：none

2.visibility:hidden

3.opacity:0

4.height:0;overflow:hidden

5.position:absolute；left:-99999px

11.CSS中link和@import的区别

1.link是HTML标签，@import属于CSS标签

2.link不会阻塞页面加载，@import会阻塞页面加载

3.link没有兼容性问题，@import只支持IE5以上

4.使用link标签时，利用js可以操作DOM元素样式，@import标签不可以

5.link标签除了加载CSS外还可以加载RSS、REF等外部链接，@import只能加载CSS

12.CSS选择器的优先级

！important

行内样式

ID选择器

类选择器=伪类选择器

元素选择器=伪元素选择器

通配符选择器（*）

继承样式

排列顺序

13.双冒号和单冒号的区别

双冒号指的是伪元素，单冒号指的是伪类

伪类的效果可以通过添加类实现，伪元素的效果可以通过添加元素实现

伪元素是在指定位置添加虚拟的元素，可以对该元素进行样式添加

::after，::before

伪类是选择出指定位置的元素，对该元素进行样式添加

:nth-child,:first-line

注：伪元素不会出现在DOM，不能进行DOM操作，只起到渲染的作用

::after，::before单引号和双引号作用都是一样的，既可以认为是伪元素也可以认为是伪类

14.margin四个数值的意义

四个值：上、右、下、左

三个值：上、左右、下

两个值：上下、左右

一个值：上下左右

15.line-height的意义

下一行基线到上一行基线的距离，line-height:height可以保证字体垂直居中

16.CSS盒模型

content+padding+border+margin

box-sizing:content-box/border-box/inherit

17.CSS三角形画法

.div{
    width:0;
    height:0;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent  transparent green;
}
.div{
    width:0;
    height:0;
    border:20px solid transparent;
    border-bottom:20px solid green;
}

18.CSS大于号

.gl{
  width: 12px;
  height: 12px;
  position: absolute;
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  -webkit-transform: translate(0,-50%) rotate(-135deg);
  transform: translate(0,-50%) rotate(-135deg);
}

19.精灵图

精灵图是将多个小图片拼接到一个大图片中，利用background-position和元素尺寸大小调节需要显示的图案

优点：减少HTTP请求

缺点：图片合并麻烦、图片维护麻烦

20.base64格式图

移动端开发图片体积过大时使用，不适用与小图片，小图片使用后体积可能会增大

可以将图片利用Base64编码转换为字符串，字符串可以直接跟随HTML下载下来，而加载图片需要再次发送请求

优点：减少HTTP请求

           减少HTTP请求大小

           加密

           使用便捷（可以base64放在css中，使用时直接加类名）

缺点：消耗性能

21.PNG\GIF\JPEG          

 PNG:适合图标、按钮等小图片，无压缩，支持透明，无动画

JPEG：适合照片等大图片，有损压缩，不支持透明，无动画

GIF：适合简单动画，无损压缩   ，支持透明，有动画

22.应该使用奇数字体还是偶数字体

1.IE6会把13px渲染成14px

2.汉子使用偶数的话更美观

3.与页面其他元素更容易产生比例关系

23.属性继承

1.字体

font组合字体、font-family字体类型、font-weight字体粗细（400normal、700bold、lighter、bolder）、font-size字体大小、font-style字体风格

2.文本

text-indent文本缩进、text-align文本水平对齐、line-height行高、color文本颜色

3.元素可见性

visibility、opacity

4.表格属性、列表属性、光标属性（cursor）

list-style-type、list-style-image、list-style-position、list-style

注：所有元素可以继承元素可见性、光标属性

        块级元素可以继承text-indent、text-align

        行内元素可以继承字体属性和文本属性（除了text-index和text-align）

24.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。比如magin、padding、a等等

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend
,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

25.伪类 LVHA

LVHA分别对应四种伪类:link、:visited、:hover、:active，顺序不要调整，避免出现覆盖问题；

当链接未访问过时：

（1）当鼠标滑过a链接时，满足:link和:hover两种状态

（2）当鼠标点击a链接时，满足:link、:hover、:active三种状态

当链接访问过时：

（1）当鼠标滑过a链接时，满足:visited和:hover两种状态

（2）当鼠标点击a链接时，满足:visited、:hover、:active三种状态

26.CSS3 新增伪类

（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数 值，也可以接受函数。   
（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。   
（3）elem:last-child选中最后一个子元素。   
（4）elem:only-child如果elem是父元素下唯一的子元素，则选中之。   
（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。   （6）elem:first-of-type选中父元素下第一个elem类型元素。   
（7）elem:last-of-type选中父元素下最后一个elem类型元素。   
（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。   
（9）elem:empty选中不包含子元素和内容的elem类型元素。   
（10）elem:target选择当前活动的elem元素。   
（11）:not(elem)选择非elem元素的每个元素。   
（12）:enabled  控制表单控件的禁用状态。   
（13）:disabled 控制表单控件的禁用状态。   
(14):checked单选框或复选框被选中

27.li 与 li 之间有看不见的空白间隔

将li进行一行布置时，将display属性设置为inline-block，在两个li之间会出现一个空格

浏览器将行内元素间空白字符（空格换行tab）渲染成一个空格，空格是一个字符大小，li也是因为换行的原因

方法一：将

代码全部写在一排

<li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>

方法二：将字符大小缩小成0

.wrap ul{font-size:0px;}

方法三：将字体间距设置为负数，此时需要把li里面的单独设置

.wrap ul{letter-spacing: -5px;}
.wrap ul li{letter-spacing: normal;}

28.width:auto 和 width:100%

width:100%会使元素box的宽度等于父元素的contentbox的宽度。  

width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。

29.visibility 的 collapse 属性值

（1）对于一般的元素，它的表现跟visibility：hidden;是一样的。元素是不可见的。  

（2）对于table相关的元素，例如table行，tablegroup，table列，tablecolumngroup，它跟display:none一样，元素消失。

30.IFC

行级格式化上下文

（1）行级上下文内部的盒子会在水平方向，一个接一个地放置。

（2）当一行不够的时候会自动切换到下一行。

（3）行级上下文的高度由内部最高的内联盒子的高度决定。

31.为什么不建议使用统配符初始化 css 样式

采用*{pading:0;margin:0;}这样的写法好处是写起来很简单，但是是通配符，需要把所有的标签都遍历一遍，当网站较大时， 样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一 套初始化样式。  

出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即 可，并不需使用通配符*来初始化

32.clear 属性清除浮动

clear:none|left|right|both

clear是清除浮动元素对当前元素的影响

clear属性只有块级元素才有效的，而::after等伪元素默认都是行内元素，这就是借助伪元素清除浮动影响时需要设置disp lay属性值的原因。

33.zoom:1 的清除浮动原理

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发 生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

34.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms＝16.7ms

35.CSS 预处理器

Less sass