学习总结1

前端小子778
191 阅读17分钟

Q1、HTML 标签有哪些行内元素

HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签，其他少数为空标签。

常见的空标签有

  • <input />
  • <img />、
  • <area />、
  • <base />、
  • <link />等。

块级元素（block）

**特点： **

  • 可以设置宽高、内、外边距；
  • 独占一行（即前后均有换行）；
  • 块级元素如果不设置宽度和高度，则宽度默认为父级元素的宽度。高度则根据内容大小自动填充。

常见的块级元素：
div、p、h1、h2......h6，ol、ul、dl、li、form、table

行级元素(inline)

特点：

  • 不可设置宽高、上下内、外边距。（左右内、外边距设置有效）
  • 其宽度和高度由其内容自动填充。
  • 其他行级元素共处一行 ；

常见的行级元素：

  • a(锚点)
  • b(加粗)
  • i(斜体)
  • span(常用内联容器，定义文本内区块)
  • lable(input 元素定义标注（标记）)

行内块元素（inline-block）

特点：

  • 可以设置宽高、内外边距；
  • 可以与其他行内元素、内联元素共处一行；

常见的内联元素：
input、img

Q2、HTML 中的 input 标签有哪些 type，哪些是h5新增的

type="text"--->文本框
type="password"--->密码框
type="radio"--->单选框
type="checkbox"--->复选框
type="file"--->图片上传
type="hidden"--->隐藏控件
type="image"--->图片按钮
type="button"--->普通按钮
type="submit"--->提交按钮
type="reset"--->重置按钮
type="number"--->年龄控件
type="search"--->搜索框
type="range"--->滑块
type="tel"--->电话号码
type="url"--->网址
type="color"--->颜色选择
type="email"--->邮箱
type="datetime-local"--->日期时间控件   <!-- 火狐不支持  谷歌支持 -->
type="date"--->日期控件
type="time"--->时间控件      <!-- 火狐可以显示上午下午  谷歌不显示 -->
type="month"--->月份控件     <!-- 火狐不支持  谷歌支持 -->
type="week"--->周控件      <!-- 火狐不支持  谷歌支持 -->

Q3、HTML 中有哪些语义化标签

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。

Q4、说一说css有哪些选择器

至于 CSS 有哪些选择器，我们看下面的表就清楚了：

选择器语法例子
通用选择器*-
类型选择器节点名称div
类选择器. + 类名.btn-primary
ID 选择器# + ID 名#form
属性选择器[属性名][self]、[data-type="hidden"]
伪类:伪类名:hover、:focus
伪元素::伪元素名::before、::after

Q5、选择器的权重

关于 CSS 的优先级，大家通常第一时间会想到这个权重表：

权重选择器
1000内联
0100ID 选择器
0010类、属性、伪类选择器
0001标签、伪元素

总的来说，就是：

内联 > id 选择器 > 类、属性、伪类选择器 > 标签元素、伪元素

而事实上，上面的表是存在一定问题的。

首先，以个十百千的位数计算，会给人一种误解：大于 10 个的类选择器优先级会难道比 1 个 ID 选择器的优先级更高吗？

  • 首先，把权重分为 A、B、C 三个等级
  • ID 选择器为 A 级
  • 类、属性、伪类选择器为 B 级
  • 标签、伪元素为 C 级
  • 忽略通用选择器
  • A > B > C，每个等级单独计算优先级，只有相等的时候才会向后比较，如果全部都相等，则后定义的样式覆盖先定义的样式

上面的文档没有指出内联，当然，根据经验，我们可以把内联当做 S 级，即：

S > A > B > C

Q6、'+' 与 '~' 选择器有什么不同？css 如何匹配前 N 个子元素及最后 N 个子元素

  • + 选择器匹配紧邻的兄弟元素
  • ~ 选择器匹配随后的所有兄弟元素
<div>我是div</div>
<p>我是p</p>
<p>我是p</p>
<div>我是div</div>
<p>我是p</p>
<div>
  <p>我是div下面的p</p>
  <p>我是div下面的p</p>
</div>
<span>我是span</span>


<style>
    div+p {
        color: red;
    }

    /* 第一个p标签变红色了 */

    div~p{
        color:red;
    }

    /* div后面的p标签都变成红色了 */
</style>

1.后代选择器：定义用空格隔开

div span {	//选择的是div标签下的span标签，当然后代顾名思义可以不止隔一代，可以隔多代进行选择
	color：red；
}
<div><span>1</span></div>

2.交集选择器：与后代选择器定义的不同是，没有空格隔开，两个元素紧挨着

span#a1 { //选择的是两个条件1.既是span标签的 2.id名是a1的元素，两个条件缺一不可    
            color：red；   
          }  
<span id=“a1”>1</span> <span >1</span>

3.并集选择器：定义用逗号隔开

span，#a1 {	//选择的是1.是span标签的 2.id名是a1的元素，两个条件满足一个即可
	color：red；
}
<span id=“a1”>1</span>
<span >1</span>

4.子代选择器：用>来定义，比后代选择器的范围要窄

div>p { 	// 这里顾名思义只能选择下一级，也就是儿子那一级，下两级不能选择，因为下两级就不是儿子了是孙子，下两级后代选择器可以选择
	****
}
<div>
		<p>我是div的儿子</p>
</div>
  • 如何匹配最前三个子元素: :nth-child(-n+3)
  • 如何匹配最后三个子元素: :nth-last-child(-n+3)

Q7、怎么让一个 div 水平垂直居中

positon
display: flex;
新的：grid

Q8、css 如何实现左侧固定 300px，右侧自适应的布局

Q9、介绍 CSS 隐藏页面中某个元素的几种方法

说起隐藏元素我想每一个前端er都能说起几种，但能说全的我想就不是很多了。博主总结了几种隐藏元素的方法，总结如下：

overflow:hidden
opacity:0；
visibility:hidden
display:none
position:absolute
clip(clip-path):rect()/inset()/polygon()
z-index:-1000
transform:scaleY(0)

我们为什么会需要这么多隐藏元素的方法呢，而且他们看起来实现的都是同样的效果。其实每一种方法实际上都有一些细微的不同，这些不同决定了在一些特定场合下使用哪一种方法。我们下面细细探讨下这些细微之处.

1. overflow

.hide{
     overflow:hidden; /* 占据空间，无法点击 */
}

overflow的hidden用来隐藏元素溢出部分，占据空间，无法响应点击事件。

2.opacity

.hide{
    opacity:0;/* 占据空间，可以点击 */
}
.hide_2{
    -webkit-filter:opacity(0);
    filter:opacity(0);/* 占据空间，可以点击 */
}

过滤元素filter也可使用opacity值设置透明度，不过filter现在的兼容性不好，只支持webkit内核，这里顺带一提。

opacity是用来设置元素透明度的，但当设置成0的时候也就相当于隐藏元素了。因此，元素依然存在原来的位置，占据空间也可响应事件。如果你打算使用 opacity 属性在读屏软件中隐藏元素，很不幸，你并不能如愿。元素和它所有的内容会被读屏软件阅读，就像网页上的其他元素那样。换句话说，元素的行为就和它们不透明时一致。

3.visibility

.hide{
    visibility:hidden; /* 占据空间，无法点击 */
}

如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏

4.display

.hide{
    display:none;/* 不占据空间，无法点击 */
}

经典的display隐藏元素,这个是彻底的隐藏了元素，不占据空间，也就不影响布局，当然也无法响应事件。

5.position

.hide{
    position：absolute;
    left:-99999px;
    top:-90999px;/* 不占据空间，无法点击 */
}
.hide-2{
    position：relative;
    left:-99999px;
    top:-90999px;/* 占据空间，无法点击 */
}

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下采用这种办法未尝不可。

6.clip/clip-path

.hide{
    position:absolute;/*fixed*/
    clip:rect(top,right,bottom,left);/* 占据空间，无法点击 */
}
.hide_2 {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

隐藏元素的另一种方法是通过剪裁它们来实现。在以前，这可以通过 clip 属性来实现，但是这个属性被废弃了(现在浏览器依然支持)，换成一个更好的属性叫做 clip-path。clip-path属性实在是用处大大滴有，可以很容易的实现一些复杂的图形大漠老师分享的一个链接，该链接里的图形大多都是用clip-path的polygon值来实现的。但可惜的是依旧只能在chrome40+浏览器里使用.

7.z-index

.hide{
    position:absolute;
    z-index:-1000;/* 不占据空间，无法点击 */
}

通过设置z-index值使其它元素遮盖该元素也算是一种隐藏了。

8. transform

.hide{
    transform: scale(0,0)/* 占据空间，无法点击 */
}

vue中的v-if与v-show

display:none 和 overflow:hidden

Q10、什么是 BFC(块格式化上下文)

在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。

1. Box: CSS布局的基本单位

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
让我们看看有哪些盒子：

  • block-level box:
    display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
  • inline-level box:
    display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
  • run-in box:
    css3 中才有， 这儿先不讲了。

2. Formatting context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

3. BFC 定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

4. BFC布局规则

  1. 内部的Box会在垂直方向，一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如 此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时，浮动元素也参与计算

二、哪些元素会生成BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible( hidden,scroll,auto, )

三、BFC的作用及原理

1. 自适应两栏布局

**

    body {
        width: 300px;
        position: relative;
    }
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .main {
        height: 200px;
        background: #fcc;
    }

**

    <body>
        <div class="aside"></div>
        <div class="main"></div>
    </body>

页面

页面

根据BFC布局规则第3条：

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

根据BFC布局规则第四条：

BFC的区域不会与float box重叠。

我们可以通过通过触发main生成BFC， 来实现自适应两栏布局。

**

.main {
    overflow: hidden;
}

当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：

页面

页面

2. 清除内部浮动

**

.par {
    border: 5px solid #fcc;
    width: 300px;
 }
 
.child {
    border: 5px solid #f66;
    width: 100px;
    height: 100px;
    float: left;
}

**

<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

页面

页面

根据BFC布局规则第六条：

计算BFC的高度时，浮动元素也参与计算

为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

**

.par {
    overflow: hidden;
}

效果如下：

\

页面

页面

3. 防止垂直 margin 重叠

**

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
</style>

**

<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

页面

页面

两个p之间的距离为100px，发送了margin重叠。

根据BFC布局规则第二条：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

**

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
</style>

**

<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

页面

页面

总结

其实以上的几个例子都体现了BFC布局规则第五条：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

Q11、请简介 CSS 的盒模型

Q12、如何修改element ui的样式, 写 CSS 时如何避免命名样式冲突，scoped实现原理，

::v-deep{}   
>>>   
/deep/
  • 命名规范
  • css in js

  • css module

通过命名规范来限制类名太过死板，而css in js虽然足够灵活，但是书写不便。
css module 开辟一种全新的思路来解决类名冲突的问题

思路

css module 遵循以下思路解决类名冲突问题：

  1. css的类名冲突往往发生在大型项目中
  2. 大型项目往往会使用构建工具（webpack等）搭建工程
  3. 构建工具允许将css样式切分为更加精细的模块
  4. 同JS的变量一样，每个css模块文件中难以出现冲突的类名，冲突的类名往往发生在不同的css模块文件中
  5. 只需要保证构建工具在合并样式代码后不会出现类名冲突即可

实现原理

\

在webpack中，作为处理css的css-loader，它实现了css module的思想，要启用css module，需要将css-loader的配置modules设置为true。

css-loader的实现方式如下：

原理极其简单，开启了css module后，css-loader会将样式中的类名进行转换，转换为一个唯一的hash值。

由于hash值是根据模块路径和类名生成的，因此，不同的css模块，哪怕具有相同的类名，转换后的hash值也不一样。

如何应用样式

css module带来了一个新的问题：源代码的类名和最终生成的类名是不一样的，而开发者只知道自己写的源代码中的类名，并不知道最终的类名是什么，那如何应用类名到元素上呢？

为了解决这个问题，css-loader会导出原类名和最终类名的对应关系，该关系是通过一个对象描述的

这样一来，我们就可以在js代码中获取到css模块导出的结果，从而应用类名了

style-loader为了我们更加方便的应用类名，会去除掉其他信息，仅暴露对应关系

其他操作

全局类名

某些类名是全局的、静态的，不需要进行转换，仅需要在类名位置使用一个特殊的语法即可：

:global(.main){
    ...
}

使用了global的类名不会进行转换，相反的，没有使用global的类名，表示默认使用了local

:local(.main){
    ...
}

使用了local的类名表示局部类名，是可能会造成冲突的类名，会被css module进行转换

如何控制最终的类名

绝大部分情况下，我们都不需要控制最终的类名，因为控制它没有任何意义

如果一定要控制最终的类名，需要配置css-loader的localIdentName

其他注意事项

  • css module往往配合构建工具使用
  • css module仅处理顶级类名，尽量不要书写嵌套的类名，也没有这个必要
  • css module仅处理类名，不处理其他选择器
  • css module还会处理id选择器，不过任何时候都没有使用id选择器的理由
  • 使用了css module后，只要能做到让类名望文知意即可，不需要遵守其他任何的命名规范

示例代码

webpack.config.js

module.exports = {
    mode: "development",
    devtool: "source-map",
    module: {
        rules: [
            {
              	// 较为复杂版
                // test: /.css$/, use: ["style-loader", {
                //     loader: "css-loader",
                //     options: {
                //         // modules: {
                //         //     localIdentName: "[local]-[hash:5]"
                //         // }
                //         modules:true
                //     }
                // }]
              
              	// 简洁版
                test: /.css$/, use:["style-loader", "css-loader?modules"]
            }
        ]
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="main">
        asdfasdfasf
    </div>
    <div id="div1">
        Lorem ipsum dolor sit.
    </div>
</body>
</html>

assets/style1.css

/* 处理banner的样式 */

:global(.main){
    background: lightblue;
}

.c1 {
    color: red
}

.c2 {
    color: green
}


h1{
    font-weight: bold;
}

assets/style2.css

/* article的样式 */

.c1 {
    color: blue;
}

.c2 {
    background: brown;
}

src/index.js

import style1 from  "./assets/style1.css"
import style2 from "./assets/style2.css"

console.log(style1)

const div1 = document.getElementById("div1");
div1.className = style2.c1;

效果图

scoped原理

  • 每个 Vue 文件都将对应一个唯一的 id，该 id 根据文件路径名和内容 hash 生成，通过组合形成scopeId。
  • 编译 template 标签时，会为每个标签添加了当前组件的scopeId，如：
<div class="demo">test</div>
// 会被编译成:
<div class="demo" data-v-12e4e11e>test</div>
  • 编译 style 标签时，会根据当前组件的 scopeId 通过属性选择器和组合选择器输出样式，如:
.demo{color: red;}
// 会被编译成:
.demo[data-v-12e4e11e]{color: red;}

这样就相当为我们配置的样式加上了一个唯一表示。

其中[ ]的表示方法如下

      span[class='test']    =>匹配所有带有class类名test的span标签

      span[class *='test']  =>匹配所有包含了test字符串的class类名的span标签

      span[class]               =>匹配所有带有class属性的span标签

      [class='all']               =>匹配页面上所有带有class='all'的标签

      [class *='as']             =>匹配页面上所有class类且类名带有as字符串的类的标签

Q13、JS 中基础数据类型有哪些 如何对基本数据类型进行判断

Q14、js里面怎么判断数组

avatar
文章
阅读
粉丝