前端面试题整理—HTML/CSS篇

1、简述一下你对HTML语义化的理解

  1)用正确的标签做正确的事情。
  2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
  3)即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
  4)搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
  5)使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解

2、Doctype作用?标准模式与兼容模式之间区别?

  <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html>标签之前,告知浏览器的解析器用什么文档标准解析这个文档

  DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现

  标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行

  在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器以防止站点无法工作

3、什么是盒模型?你是怎么理解的

  简单的说页面是由若干个盒模型(BOX)堆砌起来的,可以说每个HTML元素就是一个盒模型

扫描二维码关注公众号,回复: 5540099 查看本文章

  盒模型由外到内包括边距(margin)、边框(border)、填充(padding)、内容(content)

  盒子模型有两种分别是W3C标准模型和IE模型

  不同之处:

  标准模型宽高是指content,不包括padding和border

  IE模型的宽高是指content+padding+border的总宽高

4、谈谈对BFC的理解

  BFC:块格式化上下文(Block Formatting Context)

  BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品

  BFC的特性:

  1)bfc 是一个独立的容器,容器内子元素不会影响容器外的元素

  2)bfc的区域不会与float的元素区域重叠

  3)计算bfc的高度时,浮动元素也参与计算

  4)垂直方向上的距离由margin决定

  5)内部的Box会在垂直方向上一个接一个的放置

  以下条件会形成BFC:

  1)浮动元素 float:left | right | inherit(none除外)

  2)position:absolute 或 fixed 定位

     3)display:inline-block | inline-flex | table-cell

  4)overflow:hidden | auto | scroll (visible除外)

5、CSS选择符有哪些?哪些属性可以继承?

  id选择器( # myid)
  类选择器(.myclassname)
  标签选择器(div, h1, p)
  相邻选择器(h1 + p)
  子选择器(ul > li)
  后代选择器(li a)
  通配符选择器( * )
  属性选择器(a[rel = "external"])
  伪类选择器(a:hover, li:nth-child)

  可继承的样式: font-size font-family color, ul li dl dt dd

  不可继承的样式:border padding margin width height

6、CSS优先级算法如何计算?

  优先级就近原则,同权重情况下样式定义最近者为准

  载入样式以最后载入的定位为准

  优先级为: !important > id > class > tag important 比 内联优先级高

7、你理解的伪类与伪元素 

  伪类:用于向某些选择器添加特殊的效果。比如span:first-child{}
  伪元素:用于将特殊的效果添加到某些选择器。比如span:before{}

  伪类只要不是互斥可以叠加使用

  伪元素在一个选择器中只能出现一次,并且只能出现在末尾
  伪类与伪元素优先级分别与类、标签优先级相同
  它们的本质区别:是否抽象创造了新元素

8、display有哪些值?box-sizing 常用的属性有哪些?说明他们的作用

  block 像块类型元素一样显示。
  none 缺省值。像行内元素类型一样显示。
  inline-block 像行内元素一样显示,但其内容像块类型元素一样显示。
  list-item 像块类型元素一样显示,并添加样式列表标记。
  table 此元素会作为块级表格来显示
  inherit 规定应该从父元素继承 display 属性的值 

  box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
  box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
  box-sizing: inherit; // 继承父元素 box-sizing 属性的值

9、什么是外边距重叠? 重叠的结果是什么?

  外边距重叠就是 margin-collapse

  相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠  

  折叠结果遵循下列计算规则:
  1)两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值
  2)两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值
  3)两个外边距一正一负时,折叠结果是两者的相加的和

10、请列举几种隐藏元素的方法  

  1)display: none; 元素会变得不可见,并且不会再占用文档的空间
  2)visibility: hidden; 只是简单的隐藏某个元素,但是元素占用的空间还存在
  3)opacity: 0; 设置0可以使一个元素完全透明
  4)position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外
  5)transform: scale(0); 将一个元素设置为缩放无限小,元素不可见 原来位置将被保留

11、你对line-height是如何理解的?

  line-height 指一行字的高度,包含了字间距,实际上是下一行基线到上一行基线距离

  一个容器没有设置高度,那么撑开容器高度的是 line-height 而不是容器内的文字内容

  把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中

  line-height和height都能撑开一个高度,height会触发 haslayout,而line-height不会

(未完待续)

猜你喜欢

转载自www.cnblogs.com/theblogs/p/10534609.html