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）

<>常见内联元素：、、、、、、、、、

<>常见块级元素：、

、、

、
、

、、

、

、

$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语言中加粗的标签有和,斜体,下划线




*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标签？