常见前端面试题目整理(HTML与CSS)

2018-09-02  本文已影响69人  黄金原野

所有题目答案整理自网络，如有错误，接受指正，拒绝批评！

关于html5

HTML5的十大新特性

关于CSS3

个人总结（css3新特性）
动画，形状变化，选择器，阴影，背景……
布局（grid, flex...）, box-sizing

Transform、Transition和Animation

Transform

旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等，不会改变周围的元素

transition

一定时间之内，一组css属性变换到另一组属性的动画展示过程。需要有最初的样式，最终的样式。

animation

transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换

CSS优先级

CSS样式在浏览器中被解析的先后顺序
优先级逐渐增加

meta标签

meta
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。


<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

必须属性

content,值是有效字符串。content 属性始终要和 name 属性或 http-equiv 属性一起使用。
可选属性

http-equiv

content-type,
expires,
refresh,
set-cookie,

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

name

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

scheme

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

block，inline和inline-block概念和区别

block

inline

inline-block

水平居中布局

参考:CSS布局解决方案(终结版)

垂直居中布局

水平垂直居中

inline-block和float的共性和区别

共性：

①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相邻的inline元素会在一行显示不换行，直到本行排满为止。block的元素始终会独占一行，呈块状显示，可设置宽高。所以inline-block的元素就是宽高可设置，相邻的元素会在一行显示，直到本行排满，也就是让元素的容器属性为block，内容为inline。

②float： 设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，如果父容器宽度不够则会换行。当我们设置了元素的浮动时，这个元素就脱离了文档流，相邻元素会呈环绕装排列。

两者共同点是都可以实现元素在一行显示，并且可以自由设置元素大小。

区别：

①inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。可以设置默认的垂直对齐基线。

②float: 让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。

import和link

页面的回流与重绘

页面加载过程

  1. 根据文档生成DOM树（包括display:none的节点）
  2. 在DOM树基础上根据节点的几何属性（margin/padding/width/height等)生成render树（不包括display:none、head节点但会包含visibility:hidden节点）
  3. 在render树基础上进行进一步渲染包括color,outline等样式

回流一定会伴随着重绘，但是重绘不一定会引起回流

SEO

内部优化

  1. META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化
  2. 内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接
  3. 网站内容更新：每天保持站内的更新(主要是文章的更新等)

外部优化

  1. 外部链接类别：友情链接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、相关信息网等尽量保持链接的多样性
  2. 外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升。
  3. 外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名

CSS的各种定位

static

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响

div.static {
    position: static;
    border: 3px solid #73AD21;
}

fixed

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

p.pos_fixed {
    position:fixed;
    top:30px;
    right:5px;
}

relative

相对于其正常位置产生的移动

h2.pos_top {
    position:relative;
    top:-50px;
}

absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

flex

CSS3 Flex布局（伸缩布局盒模型）学习

Flexible box的缩写，意为弹性布局

Webkit内核的浏览器，必须加上-webkit前缀

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
容器的属性

flex-direction属性决定主轴的方向（即项目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
项目的属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex属性是flex-grow（放大）, flex-shrink（缩小） 和 flex-basis（项目占据的主轴空间）的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

常见简写含义描述

.item {
    flex: 1;
}
/*等价于*/
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.item {
    flex: 0%;
}
/*等价于*/
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.item {
    flex: 20px;
}
/*等价于*/
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 20px;
}

.item {
    flex: 1 2;
}
/*等价于*/
.item {
    flex-grow: 1;
    flex-shrink: 2;
    flex-basis: 0%;
}

.item {
    flex: 2 200px;
}
/*等价于*/
.item {
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 200px;
}

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

圣杯布局

(达芬奇密码么。。。)
页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

image

各种神奇单位

px

绝对单位，页面按精确像素展示

em

相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem

相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持

vw：

viewpoint width，视窗宽度，1vw等于视窗宽度的1%

vh：

viewpoint height，视窗高度，1vh等于视窗高度的1%

vmin

vw和vh中较小的那个

vmax

vw和vh中较大的那个

ppi

指Pixels Per Inch也就是每英寸的像素点，此处的像素点就是物理像素点（也就是最小的显示单元）。 ppi描述的是像素的密度

pt

苹果单位

dp sp

Android单位，dp表示图形，sp表示字体。pt/dp/sp是相对单位

各种display显示

各种overflow溢出

CSS设置背景图片

景图片自动的铺满而不repeat，并且为了美观，我们希望保持其图片原有的长宽比

.bk{
  background-image: url(http://tupian.aladd.net/photo2/1611.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

移动端适配

MediaQuery

//在320px和大于320px的屏幕，显示样式不一样

@media screen and (max-width: 320px) {
    /* CSS样式*/ 
}
    
@media screen and (min-width: 321px) {
    /* css样式*/
}

rem

font size of the root element

CSS不常用内容整理

text

text-indent 属性，该属性可以方便地实现文本缩进

word-spacing 属性可以改变字（单词）之间的标准间隔

a

float

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。清除浮动使用 clear。

CSS组合选择符

伪类

:first-child

伪类来选择元素的第一个子元素，前面是带匹配的子元素名称

p:first-child 选择器匹配作为任何元素的第一个子元素的<p> 元素

p > i:first-child 选择相匹配的所有<p>元素的第一个 <i>元素

:lang

为不同的语言定义特殊的规则

CSS伪元素

:first-line

用于向文本的首行设置特殊样式

first-letter

:before

:after

属性选择器

[title]
[title=w3cschool]

常见浏览器兼容问题

浏览器兼容问题

BFC

BFC

b和strong的区别

<b>与<strong>用在网页上都能使字体加粗，二者的不同是：<b>是物理元素 ;<strong>是逻辑元素。

物理元素强调的是一种物理行为。比如说，把一段文字用b加粗，意思是告诉浏览器应该加粗显示，没有其他作用。而<strong>可以从字面理解知道它是强调的意思，<strong>是逻辑标签，强调文档逻辑。

对于搜索引擎（SEO）来说，<strong>比<b>重视的多。

<em>和<i>都是斜体，但是<em>是逻辑元素，<i>是物理元素。

png jpg gif

JPEG：照片，有损，不支持透明度，内存最小，不支持动画
png：支持logo边框，单色图像，无损，会压缩，可透明
GIF：仅一种颜色透明，支持动画

上一篇下一篇

猜你喜欢

热点阅读