19秋招前端知识小结（一）

2019秋招h5前端知识简要整理，来源于牛客题后评论区等。

C01元素与布局

-$11内联元素与块级元素

-$12盒子模型

C02选择器

-$21选择器优先级

-$22伪类

C03  CSS属性

-$31样式属性的继承

-$32相对长度单位

-$33字体属性

-$34布局属性

C04 html标签属性

-$41 html标签

-$42 html属性

-C01元素与布局

$11内联元素与块级元素

*1-定义

<> display:block  ->-> 自动换行，可设置高宽

display:block就是将元素显示为块级元素，一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。在CSS样式中，仅有块级元素能够达到最大宽度，且前后只有一个换行。常见块状元素为div和p。

<> display:inline ->-> 无法自动换行，无法设置宽高

display:inline就是将元素显示为内联元素(又称为行内元素)，内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”

<>display:inline-block ->->拥有内在尺寸，不会自动换行, 可设置高宽

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

*2-常见标签

<>块级元素block element、行内元素 inline element、行内块元素 inline-block element （i mg、input）

<>常见内联元素：<a  》、<b 》 、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

<>常见块级元素：<d iv>、<p>、<hx>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

$12盒子模型

*1-主要属性标记

Margin(外边距) - 边框外的区域，外边距没有背景颜色，是完全透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 内容周围的区域，内边距是透明的。当外边距被清除时，所释放的区域将会受到元素背景颜色的填充。

Content(内容) - 盒子的内容，显示文本和图像。

*2-宽度计算

标准W3C模型：宽度 = margin*2 + border*2 + padding*2 + width(content)

IE模型： 宽度 = margin*2 + width(content,包含了padding border)

*3- margin标记缩写

margin标记可以带一个、二个、三个、四个参数，各有不同的含义，就是将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针），如下:

margin: 20px;（上、下、左、右各20px。）

margin: 20px 40px;（上、下20px；左、右40px。）

margin: 20px 40px 60px;（上20px；左、右40px；下60px。）

margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）

不推荐使用上述四个标志，因为在不同浏览器对于margin的四个边都有不同的命名

*4-标记可读性

为了代码的可读性，建议按照类似，border-width，border-style，border-color，的顺序书写。

但其实顺序调换是不影响呈现的

*5-边距的百分比宽度

可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）

如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。

## 为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢？

<> CSS权威指南中的解释：

我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。

<> CSS的百分比参照

<>参照父元素宽度的元素：padding margin width text-indent

<>参照父元素高度的元素：height

<>参照父元素属性:font-size line-height

<>特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

*6-外边距折叠

任意一个块级元素均由content(内容), padding内边距, background(包括背景颜色和图片), border(边框), margin外边距五个部分组成。 当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 尽量使用padding-top/bottom来达到你的目的, 这是因为css中存在Collapsing margins(折叠的margins)的现象。

Collapsing margins，即外边距折叠，指的是毗邻的两个或多个垂直方向的外边距 (margin) 会合并成一个外边距。这里的毗邻包括相同级别的元素外边距，也包括父子元素的外边距。

## 什么情况下会发生折叠？可以归结为以下两点：

a这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。

b这些margin都处于普通流中（非浮动元素、非定位元素）。

## 折叠后margin的计算:

当参与折叠的margin均为正值时，取最大的margin值作为最终margin。

当参与折叠的margin均为负值时，取绝对值最大的margin值作为最终margin。

当参与折叠的margin同时存在正负值时，取绝对值最大的负margin值与最大的正margin值相加作为最终margin。

## 如何防止外边距折叠？在某些情况下，margin的折叠并不是我们需要的效果，甚至可能影响正常的布局，这时候怎么办呢？有以下这些解决办法，按需要任选其一即可：

<>使用高度为零的空元素将折叠的margin隔开（不建议）

<>使用边框将折叠的margin隔开：border:1px transparent solid; （大小大于零）

<>使用内边距将折叠的margin隔开：padding:1px; （大小大于零）

<>为父元素设置overflow:hidden;

<>display:inline-block;（IE7以下不支持）

<>position:absolute;

<>float:left;

*7-部分属性的取值

## background-attachment该属性有三个值

<>scroll是默认值，背景图像会随着页面其余部分的滚动而移动。

<>fixed当页面的其余部分滚动时，背景图像不会移动。

<>inherit规定应该从父元素继承 background-attachment 属性的设置。

## background-origin 属性规定background-position属性相对于什么位置来定位。

## background-clip 属性规定背景的绘制区域。

-C02 选择器

$21选择器优先级

优先级是：内联样式> id选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。

多个选择器组合的时候，不应该简单地给这些选择器分配权值，然后相加比较大小。因为上面所说的优先级是不能越级的，比方说1个 id 选择器能顶你 n 个类选择器...所以要逐级比较，同级的就比较数量，数量多的优先级高。 当然，!important 的优先级最高。

$22伪类

*1-  CSS伪类的特殊效果

CSS伪类用于向某些选择器添加特殊的效果。

:active向被激活的元素添加样式。

:focus向拥有键盘输入焦点的元素添加样式。

:hover当鼠标悬浮在元素上方时，向元素添加样式。

:link向未被访问的链接添加样式。

:visited向已被访问的链接添加样式。

触发顺序为link-->visited--->hover--->active然后单独记住focus在hover和active之间即可

*2-伪类选择符E:hover的定义和用法:

设置元素在其鼠标悬停时的样式。

E元素可以通过其他选择器进行选择，比如使用类选择符、id选择符、类型选择符等等。

特别说明:IE6并非不支持此选择符，但能够支持a元素的:hover ，也就是只支持通过类型选择符选择的a元素的:hover。总之，id 和 class 都可以

-C03 CSS属性

$31样式属性的继承

<>不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

<>所有元素可继承：visibility和cursor。

<>内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

<>块状元素可继承：text-indent和text-align。

<>列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

<>表格元素可继承：border-collapse。

$32相对长度单位

*1- PX像素

像素px是相对于显示器屏幕分辨率而言的，主要特点:

<> IE无法调整那些使用px作为单位的字体大小；

<>国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

<> Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

*2- EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

主要特点为第一，em的值并不是固定的；第二， em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

综上在写CSS的时候，需要：

<<1. body选择器中声明Font-size=62.5%；

<<2.将你的原来的px数值除以10，然后换上em作为单位；

<<3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

*3- REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

$33字体属性

*1-字体

font-style是设置字体的风格，包括值

normal：默认正常情况；

italic：显示文字为斜体；

oblique：显示文字为斜体；

inherit：从父亲那继承一个样式字体；

font-weight为设置字体的粗细。(粗体bold)

#类似功能的html标签

html语言中加粗的标签有<b>和<strong>,斜体<i>,下划线<u>

*2-  text-decoration文本装饰属性

text-decoration:一共有6个属性值。

none：标准文本；

underline：定义文本下划线；

overline：定义文本上的一条线；

line-through：穿过文本的一条线；

blink：闪烁文本；

inherit：继承父元素的text-decoration属性。

例如a{ text-decoration:none}即可去掉文本超链接下划线

$34布局属性

*1- position属性

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。

◆position:static　无定位

该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。

◆position:absolute　绝对定位

使用position:absolute，能够很准确的将元素移动到你想要的位置，

◆position:fixed　相对于窗口的固定定位

这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。

请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。

◆position:relative　相对定位

所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。

*2- display:none与visibility:hidden

display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间

repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

所以display:none才会产生reflow, visibility:hidden只会触发repaint

##如果要实现水平和垂直居中需要在父元素中设置display:flex；子元素设置margin:auto;才能实现

-C04 html标签属性

$41 html标签

*1-一份标准的HTML文档有哪几个必须的HTML标签？

<html><head><title><body>

*2-短语元素

以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。

我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。

<em> 把文本定义为强调的内容。

<strong> 把文本定义为语气更强的强调的内容。

<dfn> 定义一个定义项目。

<code> 定义计算机代码文本。

<samp> 定义样本文本。

<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。

<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

<cite> 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

*3-标题上下标等

W3C指出h1-h6标签可定义标题。h1定义最大的标题。h6定义最小的标题。 h1，h2，h3，h4，h5，h6，作为标题标签，并且依据重要性递减。

上标

下标

突出显示 <mark></mark>

*4-表格

table中，tr表示“行”，td/th表示单元格，<th>与<td>同样是标示一个储存格,唯一不同的是<th>所标示的储存格中的文字是以粗体出现

table中，

单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间单；

元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离。

border是单元格粗细

## Ul无序列表, dl 定义列表, li 项目列表, ol有序列表

里面只能放<li>. 但是<li>里面可以放<h*>,<p>等标签。

ul里面放其他标签，不光不符合语义，在IE7- 里面也会有问题：

如果标签前面有<li>标签，浏览器会认为<other>为<li>的子节点。

*5- iframe

iframe可用在以下几个场景中：

1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。

2：ajax上传文件。

3：加载别的网站内容，例如google广告，网站流量分析。

4： 在上传图片时，不用flash实现无刷新。

5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

或者简记：

与第三方域名下的页面共享cookie;上传图片，避免当前页刷新;左边固定右边自适应的布局;

资源加载。

$42 html属性

*1-常用属性

1. url:统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，url就是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL;一般就是浏览器地址栏填写的。

2. href：Hypertext Reference的缩写。意思是超文本引用,用来建立当前元素和文档之间的链接，属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。常见的就是a标签中的。

3. rel：relationship的英文缩写·,REL属性用于定义链接的文件和HTML文档之间的关系,e.g. StyleSheet，用于定义链接的文件和HTML文档之间的关系。

4. src也可以是源文件（source）的简写，一般用作目录名称用于存放源代码，一般指的是引用外部文件的路径，像img标签中src表示图片的路径。

*2-属性命名

鼠标移入onmouseover，移出onmouseout

< a hr ef="#" onmouseover="this.style.fontSize='30 px'">注册< /a >

在js里面添加的属性名使用驼峰法，在css里面使用连接线

*3-  Overflow属性 内容溢出

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。

参数是visible时候，溢出的内容出现在父元素之外。

参数是hidden时候，溢出隐藏。

*4- input disabled/readonly  

Disabled为真时，input的值不会随着表单提交

disabled指当 input 元素加载时禁用此元素。input内容不会随着表单提交

readonly规定输入字段为只读。input内容会随着表单提交。

无论设置readonly还是disabled，通过js脚本都能更改input的value（亲测可以）

disabled和readonly这两个属性有一些共同之处，比如都设为true，则form属性将不能被编辑，往往在写js代码的时候容易混合使用这两个属性，其实他们之间是有一定区别的：

·如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。

·而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

*5-  type属性的可取值

button checkbox file hidden image password radio reset submit text

*6-新开空白页

表示新开一个标签页的超链接代码..

<>  _blank:在新窗口打开

<>  _self:在当前窗口打开

<>  _parent:在父级窗口打开

<>  _top:在最顶级窗口打开

特殊的目标有4个保留的目标名称用作特殊的文档重定向操作： _blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。 _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。 _parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。 _top 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。 提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。