万象素材 › 万象专栏 › 前端专栏

前端学习总结

HTML

1.HTML标签

标题标签与段落标签

请确保标题标签只用于标题，搜索引擎使用标题为您的网页的结构和内容编制索引，所以用标题来呈现文档结构是很重要的。

标题标签和段落标签虽然是块级标签，但是不能放块级元素在里面，它们主要用于存放文字

块级元素、内联元素、行内块元素的区别

块级元素：独占一行，可以设置宽高内外边距等。

内联元素：相邻内联元素在同一行上显示，不可以设置宽高内外边距，默认大小是内容的大小。

行内块元素：相邻行内块元素在同一行显示，但之间有空隙，可以设置宽高内外边距。

图片标签

理解src、alt、title、三个属性

2.HTML5新特性

语义标签：

<header>：头部标签

<nav>：导航标签

<article>：内容标签

<section>：定义文档某个区域

<aside>：侧边栏标签

<footer>：尾部标签

<details>: 定义额外的细节

<summary>: 定义 details 元素的标题

多媒体标签

视频标签、音频标签

HTML头部

<!DOCTYPE>标签的作用

title标签的作用

base标签的作用

Link标签的作用

CSS

1.盒模型

每一个html元素都可以认为是盒子，CSS盒子由内容content，内边距padding，边框border，外边距margin组成。

盒子模型分为W3C标准盒模型：content-box；IE盒子模型：border-box。在渲染页面时，可以使用box-sizing对盒子模型进行设置。

W3C标准盒子模型

盒子width=内容的宽度

盒子hegiht=内容的高度

盒子指定的宽高只是内容的宽高，盒子最终的大小=content+padding+border，padding和border会把盒子撑大

IE盒子模型

盒子widht=border+padding+内容的宽度

盒子height=border+padding+内容的高度

盒子指定的宽高是content+padding+border的宽高，padding和border不会把盒子撑大，盒子的大小就是设置的宽度高度的大小

DOCTYPE声明

如果不声明DOCTYPE类型，IE浏览器会将盒子模型解释为IE盒子模型，FireFox等会将其解释为W3C盒子模型；若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。在编码时尽量使用W3C盒子模型。

2.BFC

BFC:Block Formatting Context,块级格式化上下文，可以理解为BFC是块级作用域

元素定位方案

标准文档流方案：

块级元素按出现顺序从上至下垂直排列

行内元素按照水平排列，直到当行被占满，然后换行。块级元素则会被渲染成为一个完整的新行

所有元素默认都是普通流定位

浮动方案

元素先按照标准流的方式出现，然后根据浮动向左边或者向右边发生偏移。

绝对定位方案

元素整体脱离标准流，所以决定定位元素不会对其他兄弟元素造成影响

BFC作用于标准流定位，BFC可以看作是一块渲染区域，有着自己的渲染规则，这块渲染区域是隔离于外界的独立容器，容器里的元素在布局上不会影响到容器外面的元素。

BFC规则

属于同一个 BFC 的两个相邻 Box 垂直排列
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
BFC 中子元素的 margin box 的左边，与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
文字层不会被浮动层覆盖，环绕于周围

如何添加BFC

根元素：<html>

浮动元素：元素的float属性不可以是none

绝对定位元素：position为absolute或者fixed

display属性是:inline-block、table-cell、table-caption、table、table-row、table-row-grounp、table-header-grounp、table-footer-grounp、inline-table、flow-root、flex、inline-flex、grid、inline-grid

overflow值不为visible的元素

content值为layout、content、paint、

多列元素（元素的column-count或column-width不为auto，包括column-count为1）

这是最常用的几种方法,图片来自B站技术蛋老师　　　　

BFC作用

1.避免外边距塌陷

外边距塌陷示例


        .cube {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: blue;
            margin: 100px;
        }
------------------------------------------------
    <div class="cube"></div>
    <div class="cube"></div>

使用container包裹两个cube创建BFC避免外边距塌陷


        .cube {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: blue;
            margin: 100px;
        }

        .container {
            overflow: hidden;
        }
----------------------------------------------------------
    <div class="container">
        <div class="cube"></div>
    </div>
    <div class="container">
        <div class="cube"></div>
    </div>

2.清除浮动

没有清除浮动的示例

为子元素添加了浮动，子元素脱离标准流使得父元素没有内容，发生高度塌陷。

        .cube {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: blue;
            float: left;
        }

        .container {
            border: 10px solid red;
        }
 
    <div class="container">
        <div class="cube"></div>
    </div>

使用overflow为父亲元素添加BFC


        .cube {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: blue;
            float: left;
        }

        .container {
            border: 10px solid red;
            overflow: hidden;
        }
----------------------------------------------------
    <div class="container">
        <div class="cube"></div>
    </div>

3.阻止元素被浮动元素覆盖

浮动元素脱离标准流，下一个元素会占用浮动元素原本的位置，从而被浮动的元素覆盖

        .floatDiv {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .normalDiv {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
 -------------------------------------------------------------
    <div class="floatDiv"></div>
    <div class="normalDiv"></div>

为没有浮动的元素添加overflow-hidden

        .floatDiv {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .normalDiv {
            width: 200px;
            height: 200px;
            background-color: blue;
            overflow: hidden;
        }
----------------------------------------------------------------
    <div class="floatDiv"></div>
    <div class="normalDiv"></div>

3.层叠上下文

在HTML中。每个盒子模型的位置是在三维空间中的。x轴向右，y轴垂直向上，z轴垂直于屏幕指向外边。在这个三位空间内，如果元素在z轴上发生了堆叠，那么一个元素就可能被另一个元素覆盖。

产生层叠上下文的条件

1、HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”。

2、普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。

3、css3属性

flex
transform
opacity
filter
will-change
-webkit-overflow-scrolling

层叠等级

在同一个层叠上下文中，层叠等级才有意义

图片来自掘金社区，过于简洁详情请看其他博客

4.CSS选择器

选择器分类

基础选择器

通用选择器*

元素选择器

id选择器

类选择器

复合选择器

分组选择器：分组选择器选取所有具有相同样式定义的 HTML 元素，如：h1,h2,p

后代选择器：后代选择器ul li

子选择器：div>p

伪类选择器：如:hover、:focus、hover用于链接，focus用于表单input。

CSS3新增选择器

属性选择器：E[attr](具有attr属性的E元素），E[attr="value"]，E[attr^="value"]，E[attr$="value"]，E[attr*="value"]，

结构伪类选择器：first-child、last-child、nth-child(数字或公式)等等

选择器的权重

通用选择器或继承的权重最低，

元素选择器的权重比通用选择器的权重高一个等级

类选择器，伪类选择器的权重比元素选择器高一个等级

ID选择器的权重比类，伪类选择器高一个等级。

行内样式比ID选择器高一等级。

!important的权重无限大。

当前选择器的权重0，0，0，0的形式表示，权重没有进位。

5.CSS样式层叠顺序

如果多个样式表位同一元素设置了相同的样式，则样式的渲染遵循以下原则：

如果存在行内样式，则以行内样式为准。

在head部分，内部样式表和外部引进的样式表，遵循最后读取原则。

浏览器默认样式最低。

6.绝对尺寸与相对尺寸

绝对尺寸

相对尺寸

7.CSS标准流、浮动与定位

标准流

标准流中块级元素单独一行垂直排列。内联元素与行内块元素一行排列多个，排列满后自动换行。

浮动

浮动元素按照标准流分布，然后根据浮动样式向左或向右偏移。

浮动的特性

1.浮动的盒子会脱离标准流的控制，移动到指定的位置，浮动的盒子不再占有原来的位置，这个位置由下一个为浮动的标准流盒子控制。如果父盒子没有设置高度，子盒子浮动会让父盒子高度塌陷。

2.多个浮动的盒子会在一行内排列并且顶端对齐。

3.浮动的盒子会在一行内排列并且顶端对齐。

清除浮动的方法

1.额外标签法：在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签（如<br />等）。

2.创建父级BFC

3.父盒子设置高度。

定位

1.position:static 静态定位，不受top.bottom,left,right的影响，仍以标准流的形式排列

2.position:relative 相对定位，受top,bottom,left,right的影响，相对于自己原来的位置发生偏移，在标准流中的位置继续占有，应用之一是给绝对定位当爹。注意：使用top:50%时，所在的父盒子应该有高度，top:50%对浏览器Body设置无效。

3.position:absolute 绝对定位，受top,bottom,left,right的影响，如果父盒子有定位，则相对父盒子发生偏移，如果父盒子没有定位，则以浏览器为参考发生偏移，绝对定位脱离标准流的控制。

4.position:fixed　　相对于视口进行定位，滚动页面它也处于同一位置。固定定位不占有原来的位置，脱离标准流的控制。

5.position:sticky 粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置（比如 position:fixed）。粘性定位占有原来的位置。

跟页面滚动搭配使用。兼容性较差，IE 不支持。

8.Display:none与visible：hidden

display 指定应如何显示元素。display 隐藏元素后，不再占有原来的位置。

visibility 指定元素是否应该可见。visibility 隐藏元素后，继续占有原来的位置。

9.居中布局

行内元素

            text-align: center;//水平居中
            line-height: 100px;//垂直居中      
            height: 100px;

块级元素

绝对定位+margin

 position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            width: 100px;
            height: 100px;
            background-color: red;

绝对定位+transform

.box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: red;
        }

Margin：0 auto ；（水平居中）

flex+justify-content：center(水平居中)

align-items: center（垂直居中）

table居中（？？？）

10.CSS三角形的做法

宽度高度设置为0，边框一边设置颜色，其他设置透明，则显示出三角形

            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: red;

11.移动端布局的几种方式

12.CSS动画

见CSS笔记P67页

JavaScript

1.数据类型

基本数据类型与引用数据类型。JavaScript拥有动态类型。

数据类型的判断

基本数据类型null: String(null)

基本数据类型（number、boolen、string、undefine）+引用数据类型：function ，object ，使用typeof判断,也可以用Objecr.prototype.toString.call()进行判断

引用数据类型 Array、Object、Date、RegExp、Error ：使用Object.prototype.toString.call(.....)后根据[object XXX]判断。

类型隐式转换

减号"-"，乘号*，除号“/”，求余“%”，一律转换为数字进行算术运算

数字+字符串=字符串

数字+布尔值true/false=数字，true等价于1，false等价于0。

数字+undefine=NaN

数字+Object=数字+[Object Object]

['1'].toString==='1'

2.作用域

1.作用域

全局作用域：在函数体外定义的变量是全局变量，全局变量拥有全局作用域，在全局作用域所有的网页和脚本均可访问全局变量，全局变量在页面关闭后被销毁。

局部作用域：变量在函数内声明，变量的作用域为局部作用域。局部变量：只能在函数内部访问。局部变量在函数执行完毕后销毁。

2.作用域链

当出现函数嵌套函数时，就会出现作用域链。作用域链定义了函数嵌套函数下变量的查找规则。

<script>
    var a = 1;
    (function () {
        var b = 2;
        (function () {
            var c = 3;
            (function () {
                var d = 4;
                (function () {
                    console.log(a + b + c + d); //expected output 10
                }())
            }())
        }())
    }())
</script>

3.预解析

预解析是分作用域的, 声明提升并不是将所有的声明都提升到window对象下面，提升原则是提升到变量运行的环境(全局作用域或局部作用域)中去。

预解析是分片段的，以为script区分片段，当前script标签内的变量不会提升到别的script标签中

预解析只是声明变量或函数，不对变量赋值。没有赋值是打印变量得到的是undefine，但是没有声明时得到的结果是:变量 is not define

预解析规则

1.由于预解析，在JS中函数可以不声明就调用

func();
function func(){
    alert("Funciton has been called");
}

//结果：“Function has been called”

2.同名函数，后面的函数会覆盖前面的函数。

f1()

function f1() {

console.log('我是第一个函数')

}

f1()

function f1() {

console.log('我是第二个函数')

}

//excepted output ：我是第二个函数我是第二个函数

3.变量和函数同名，只对函数进行预解析。

 console.log(a)
    var a = 1;

    function a() {
        console.log('变量和函数同名，只对函数进行预解析')
    }

excepted output ：ƒ a() {
        console.log('变量和函数同名，只对函数进行预解析')
    }

4.变量预解析

 console.log(a)
    var a = 1;
//输出:undefine

5.函数表达式不会被预解析提升

func();
    var func = function () {
        alert("我被提升了");
    };
//输出:func is not a function

4.数组对象

更多文章请关注《万象专栏》

转载请注明出处：https://www.wanxiangsucai.com/read/cv13085

话题推荐： #2021# #2022# #前端# #学习# #总结#

打赏
5 赞
收藏
评论
举报

下一篇：前端页面后端代码查找指南

发布评论

全部评论(0)