前端面试宝典之HTML/CSS


前端内容太多太杂,要时时总结,这里就总结一下最近遇到的或者看到的前端面试题与HTML/CSS相关的题目,以便以后查阅,也与大家分享!

HTML基础

对WEB标准以及W3C的理解与认识?

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

xhtml和html有什么区别?

HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭。
标签名必须用小写字母。
XHTML文档必须拥有根元素。

Doctype的作用?什么是严格模式与混杂模式,如何触发这两种模式,区分它们有何意义?

<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
严格模式:使用此类型的网页,浏览器解析将相对严格,不允许使用任何表现样式的标识和属性,比如在元素中直接使用background-color背景色属性。
混杂模式:浏览器对XHTML的解析较为宽松。允许使用4.01中的标签,但必须符合XHTML的语法。

什么是语义化的HTML?

HTML 标签语义化是让大家直观的认识标签(markup)和属性(attribute)的用途和作用;
对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,网站的推广便可以省下不少的功夫。
语义 Web 技术有助于利用基于开放标准的技术,从数据、文档内容或应用代码中分离出意义。

行内元素有哪些?块级元素有哪些?空(void)元素有那些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea;
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote;
空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img;

标签上alt与title属性的区别是什么?

Alt当图片不显示时用文字代表。
Title为该属性提供信息,当鼠标移动上去时显示。

前端页面有哪三层构成,分别是什么?作用是什么?

结构层;主要指DOM节点;HTML/XHTML;
样式层;主要是指页面渲染;CSS;
脚本层:主要指页面动画效果;JS/AS;

CSS基础

CSS引入的方式有哪些? link和@import的区别是?

CSS引入的方式有内联、内嵌、外链、导入四种。
link属于XHTML标签,而@import是CSS提供的;
link标签除了可以加载CSS外,还可以做很多其它的事情,@import就只能加载CSS了。
import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;
内联和important中,important优先级高;
页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

什么是盒子模型?W3C与IE的盒子模型有什么区别?

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距margin,边框border,填充padding和实际内容content。
根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。
IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
解决:不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。

CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?

CSS选择符: 类选择器、 标签名选择器、 ID选择器、 后代选择器(派生选择器)、 群组选择器;
可以继承: 类选择器、 标签名选择器、 后代选择器(派生选择器)、群组选择器;
优先级算法:标签内直接定义:1000;ID选择器:100;类选择器 :10;标签名选择器:1;

css的基本语句构成?

选择器{属性1:值1;属性2:值2;……}

你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Trident)、火狐(Gecko)、谷歌(webkit/Blink)、opear(Presto)、Safari(webkit)

什么是CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack。例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1、条件Hack
<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->
// 2、属性Hack
.test{
color:#090\9; /* For IE8+ */
*color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE6 and earlier */
}
// 3、选择符Hack
* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */

IE6 BUG的解决方法

  1. 双边距BUG:float引起的,使用display;
  2. 3像素问题:使用float引起的,使用dislpay:inline -3px;
  3. 超链接hover点击后失效:使用正确的书写顺序:link、visited、hover、active;
  4. Ie的z-index问题:给父级添加position:relative;
  5. Png透明:使用js代码改;
  6. Min-height最小高度:!Important解决;
  7. select在ie6下遮盖:使用iframe嵌套;
  8. 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden;zoom:.08;line-height:1px);

CSS布局

CSS清除浮动

应用在父级元素是自动获取高度的情况下,或者下面元素不需要浮动。

  1. 结尾处加空div标签clear;
    clear:both:清除当前元素的左右浮动;
    clear:left:清除当前元素的左浮动;
    clear:right:清除当前元素的右浮动;
    优点:简单,代码少,浏览器支持好;
    缺点:如果页面浮动过多,就要增加很多空div

  2. 父级元素定义height;
    解决了父级元素无法自动获得高度的问题;
    优点:简单、代码少;
    缺点:只适合固定高度的布局,,要给出精确的高度,如果高度小于父级元素的高度,会把下面内容覆盖;

  3. 父级div定义伪类:afterzoom;
    父元素divzoom: 1;
    父元素div:after:

    1
    2
    3
    4
    5
    6
    div:after {
    content"";
    display: block;
    clear: both;
    visibility: hidden;
    }
  4. 父级元素定义:overflow:hiddenoverflow:auto;
    原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度;
    优点:简单、代码少、浏览器支持好;
    缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。

  5. 父级div 也一起浮动;
    原理:所有代码一起浮动,就变成了一个整体
    缺点:会产生新的浮动问题。

  6. 父级div定义:display:table;
    原理:将div属性变成表格
    缺点:会产生新的未知问题。

  7. 结尾处加br标签,定义属性:clear:both;

浮动增加宽度会浮动滑移怎么办?

  • 从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。
  • 在容器内部的元素上添加内边距或外边距。
  • 使用 CSS3 的 box-sizing 属性切换盒子缩放方式。应该该属性后,给元素添加边框和内边距都不会增大盒子,相反会导致内容变窄。

css三列布局

  • 左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏不设宽度,用左右margin值撑开距离
  • 父元素:display:box;子元素:box-flex: x;总宽度为所有子元素的box-flex之和。
  • 父元素:display:table;子元素:display:table-cell;表格布局,宽度自适应。但是会有等高问题。

文本居中

  1. 单行垂直居中
    设置实际高度height和line-height

  2. 多行未知高度文字垂直居中
    设置padding

  3. 多行文本固定高度居中

    1
    2
    3
    4
    5
    6
    div {
    height500px;
    border1px solid;
    vertical-align: middle;
    display: table-cell;
    }

定高div垂直居中

  1. 定位
    先父元素:position: relative;
    然后居中元素:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    div {
    position: absolute;
    top50%;
    left50%;
    width200px;
    height200px;
    margin-left: -100px;
    margin-top: -100px;
    }
  2. flex
    父元素:

    1
    2
    3
    displayflex;
    justify-contentcenter;
    align-itemscenter;
文章目錄
  1. 1. HTML基础
    1. 1.1. 对WEB标准以及W3C的理解与认识?
    2. 1.2. xhtml和html有什么区别?
    3. 1.3. Doctype的作用?什么是严格模式与混杂模式,如何触发这两种模式,区分它们有何意义?
    4. 1.4. 什么是语义化的HTML?
    5. 1.5. 行内元素有哪些?块级元素有哪些?空(void)元素有那些?
    6. 1.6. 标签上alt与title属性的区别是什么?
    7. 1.7. 前端页面有哪三层构成,分别是什么?作用是什么?
  2. 2. CSS基础
    1. 2.1. CSS引入的方式有哪些? link和@import的区别是?
    2. 2.2. 什么是盒子模型?W3C与IE的盒子模型有什么区别?
    3. 2.3. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?
    4. 2.4. css的基本语句构成?
    5. 2.5. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
    6. 2.6. 什么是CSS Hack?
    7. 2.7. IE6 BUG的解决方法
  3. 3. CSS布局
    1. 3.1. CSS清除浮动
    2. 3.2. 浮动增加宽度会浮动滑移怎么办?
    3. 3.3. css三列布局
    4. 3.4. 文本居中
    5. 3.5. 定高div垂直居中
|