前端面试——HTML+CSS

https://blog.****.net/wdlhao/article/details/79079660

https://www.cnblogs.com/DCL1314/p/7903102.html

1.简述src和href的区别？

https://zhidao.baidu.com/question/583316301.html

•  href 是超文本引用（hypertext reference）的缩写，在 link和a 等元素上使用，用来建立当前元素和文档之间的链接，href 的内容，是与该页面有关联，是引用。
•  src 是source的缩写，表示来源地址，在 img、script、iframe 等元素上，src指向的内容会嵌入到文档中当前标签所在的位置。src 的内容是页面必不可少的一部分，是引入， 当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。
•  简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。

例子1：href

<link href="reset.css" rel=”stylesheet“/>
  浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

例子2：src

<script src="script.js"></script>
  当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。

2.css定位？

      （1）定位简介
       position属性的值有以下5种：absolute，fixed，relative，static，inherit。static 和 relative定位不脱离文档流；absolute 和 fixed脱离文档流。

（2）absolute和fixed的对比

            共同点

•          改变行内元素的呈现方式，display被置为inline-block；
•         让元素脱离普通流，不占据空间；
•          默认会覆盖到非定位元素上。

          不同点

•          absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

3.介绍一下css盒子模型？

• 盒模型的组成包括:content, padding, border, margin。有两种盒模型:标准盒模型和IE盒模型，两种盒模型的主要区别是：标准盒模型的宽高是值内容宽高(content),而IE盒模型的宽高是指content+padding+border。
• 设置盒模型的方式是：设置box-sizing，box-sizing:content-box  ---》标准盒模型；box-sizing:border-box -----》IE盒模型

4.html的行内元素和块级元素分别有哪些，空元素呢？

• 行内元素：span,a,label,input,img,strong,em
• 块级元素：div ,p,h1,form,ul,li
• 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

5.px和em的区别？

• 相同点：px和em都是长度单位；
• 异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

6.CSS中 link 和@import 的区别是？

• link属于HTML标签，而@import是CSS提供的
• import只在IE5以上才能识别，而link是HTML标签，无兼容问题
• 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

7.display:none和visibility:hidden的区别？

• display:none  隐藏对应的元素，在文档布局中不再给它分配空间
• visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间

8.介绍浮动以及清除浮动？

【1】浮动简介
       浮动的框可以向左或向右移动，直到它的外边缘碰到包含它的边框或者浮动元素的边框停留。浮动元素脱离文档流，不占据空间。浮动使用float属性，有left，right，none，inherit四个值。

【2】浮动清除

     使用float属性对子元素进行浮动的控制会使得子元素从父元素的文档流中脱离出来，会带来很多布局的问题，比如重叠等。因此需要进行浮动的清除。

（1）使用空标签清除浮动

这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both。弊端就是增加了无意义标签。

（2）对父元素使用overflow或者float

       overflow：auto或者hidden

       不建议使用，只有当父元素本身就已经使用了float或者overflow来实现自身的布局时才可以带来这样一种福利，不建议直接对父元素添加这样的属性。因为可能会更改父元素和其紧邻元素之间的关系。

（3） 使用after伪对象清除浮动

     不改变父元素原本的布局，在实际中优先使用。

.clearfix::after{
  content:'.';
  clear:both; 
  display:block; 
  visibility:hidden;
  height:0;
}

解释：

•  如果想通过clear让父元素包围住浮动子元素，那么被clear的元素本身不能是行内元素，必须是块级元素，因此要添加display:block; 
•  进一步，我们不需要显示上述 . 这个虚拟元素，但是又不能使用display属性了，因为已经用了display属性的block取值了， 因此使用visibility:hidden;但是这种方法元素本身占用的空间还在，并没有被回收，只是隐藏了而已。
•  最后，还要再添加height:0，相当于取消添加的元素的空间，不改变DOM结构

9.display有哪些值？说明它们的作用。

   给出了一部分常用的。