-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
177 lines (159 loc) · 39.7 KB
/
index.html
File metadata and controls
177 lines (159 loc) · 39.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Ray - 命数如织,当为磐石</title><meta name="description" content="Welcome to my blog!"><meta name="author" content="Ray9972"><meta name="copyright" content="Ray9972"><meta name="format-detection" content="telephone=no"><link rel="shortcut icon" href="https://img-blog.csdnimg.cn/20201110202217725.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JheTk5Nw==,size_16,color_FFFFFF,t_70#pic_center"><link rel="canonical" href="https://ray9972.github.io.git/"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin="crossorigin"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta property="og:type" content="website"><meta property="og:title" content="Ray"><meta property="og:url" content="https://ray9972.github.io.git/"><meta property="og:site_name" content="Ray"><meta property="og:description" content="Welcome to my blog!"><meta property="og:image" content="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3579919212,3337210467&fm=11&gp=0.jpg"><meta property="article:published_time" content="2020-11-11T09:47:07.250Z"><meta property="article:modified_time" content="2020-11-11T09:47:07.250Z"><meta name="twitter:card" content="summary"><script>var activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#000')
}
}
var activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#fff')
}
}
var getCookies = function (name) {
const value = `; ${document.cookie}`
const parts = value.split(`; ${name}=`)
if (parts.length === 2) return parts.pop().split(';').shift()
}
var autoChangeMode = 'false'
var t = getCookies('theme')
if (autoChangeMode === '1') {
var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
var isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
var isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
var hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
if (t === undefined) {
if (isLightMode) activateLightMode()
else if (isDarkMode) activateDarkMode()
else if (isNotSpecified || hasNoSupport) {
console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.')
var now = new Date()
var hour = now.getHours()
var isNight = hour <= 6 || hour >= 18
isNight ? activateDarkMode() : activateLightMode()
}
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
if (Cookies.get('theme') === undefined) {
e.matches ? activateDarkMode() : activateLightMode()
}
})
} else if (t === 'light') activateLightMode()
else activateDarkMode()
} else if (autoChangeMode === '2') {
now = new Date()
hour = now.getHours()
isNight = hour <= 6 || hour >= 18
if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
else if (t === 'light') activateLightMode()
else activateDarkMode()
} else {
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
}</script><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap"><script>var GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"search.xml","languages":{"hits_empty":"We didn't find any results for the search: ${query}"}},
translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
copy: {
success: 'Copy successfully',
error: 'Copy error',
noSupport: 'The browser does not support'
},
bookmark: {
message_prev: 'Press',
message_next: 'to bookmark this page'
},
runtime_unit: 'days',
runtime: true,
copyright: undefined,
ClickShowText: undefined,
medium_zoom: false,
fancybox: true,
Snackbar: undefined,
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
},
baiduPush: false,
highlightCopy: true,
highlightLang: true,
isPhotoFigcaption: false,
islazyload: true,
isanchor: false
}</script><script>var GLOBAL_CONFIG_SITE = {
isPost: false,
isHome: true,
isHighlightShrink: false,
isSidebar: false
}</script><noscript><style>
#nav {
opacity: 1
}
.justified-gallery img{
opacity: 1
}
</style></noscript><meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/atom.xml" title="Ray" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">Loading...</div></div></div><div id="mobile-sidebar"><div id="menu_mask"></div><div id="mobile-sidebar-menus"><div class="mobile_author_icon"><img class="avatar-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3579919212,3337210467&fm=11&gp=0.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="mobile_post_data"><div class="mobile_data_item is-center"><div class="mobile_data_link"><a href="/archives/"><div class="headline">Articles</div><div class="length_num">8</div></a></div></div><div class="mobile_data_item is-center"> <div class="mobile_data_link"><a href="/tags/"><div class="headline">Tags</div><div class="length_num">14</div></a></div></div><div class="mobile_data_item is-center"> <div class="mobile_data_link"><a href="/categories/"><div class="headline">Categories</div><div class="length_num">3</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page"><i class="fa-fw fas fa-list"></i><span> 休闲</span><i class="fas fa-chevron-down menus-expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div id="body-wrap"><header class="full_page" id="page-header" style="background-image: url(https://w.wallhaven.cc/full/dg/wallhaven-dg9q6g.jpg)"><nav id="nav"><span class="pull-left" id="blog_name"><a class="blog_title" id="site-name" href="/">Ray</a></span><span class="pull-right menus"><div id="search_button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> Search</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page"><i class="fa-fw fas fa-list"></i><span> 休闲</span><i class="fas fa-chevron-down menus-expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><span class="toggle-menu close"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></span></span></nav><div id="site-info"><h1 id="site_title">Ray</h1><div id="site_subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/Ray9972" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:xxxxxx@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll_down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout_page" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/08/22/%E6%B7%B1%E5%85%8B%E9%9A%86%E5%92%8C%E6%B5%85%E5%85%8B%E9%9A%86/" title="深克隆和浅克隆"> <img class="post_bg" data-src="https://w.wallhaven.cc/full/g8/wallhaven-g8r17d.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="深克隆和浅克隆"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/08/22/%E6%B7%B1%E5%85%8B%E9%9A%86%E5%92%8C%E6%B5%85%E5%85%8B%E9%9A%86/" title="深克隆和浅克隆">深克隆和浅克隆</a><div class="article-meta-wrap"><time class="post-meta__date" title="Created 2020-08-22 15:35:26"><i class="far fa-calendar-alt"></i>2020-08-22</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/JS/">JS</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/JS/">JS</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E6%B7%B1%E5%85%8B%E9%9A%86/">深克隆</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E6%B5%85%E5%85%8B%E9%9A%86/">浅克隆</a></span></div><div class="content">深拷贝和浅拷贝浅拷贝浅拷贝只能拷贝最外面一层更深级别的对象只能拷贝地址,更改拷贝的新对象时也会改变被拷贝的对象
1234567891011121314151617181920212223var obj = { id: 1, name: "andy", msg: { age: 18, },};var o = {};for (var k in obj) { o[k] = obj[k];}console.log(o);// o ={// id: 1,// name: "andy",// msg: {// age: 18// }// }o.msg.age = 2; //obj的msg.age也会改变//另一个浅克隆的方法Object.assign(o, obj);
深拷贝这个方法需要传入两个参数,有些繁琐
12345678910111213141516function deepCopy(newObj, ol ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/08/13/%E5%8F%98%E9%87%8F%E5%92%8C%E5%87%BD%E6%95%B0%E7%9A%84%E5%A3%B0%E6%98%8E%E6%8F%90%E5%8D%87/" title="变量和函数的声明提升"> <img class="post_bg" data-src="https://w.wallhaven.cc/full/j5/wallhaven-j5z62q.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="变量和函数的声明提升"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/08/13/%E5%8F%98%E9%87%8F%E5%92%8C%E5%87%BD%E6%95%B0%E7%9A%84%E5%A3%B0%E6%98%8E%E6%8F%90%E5%8D%87/" title="变量和函数的声明提升">变量和函数的声明提升</a><div class="article-meta-wrap"><time class="post-meta__date" title="Created 2020-08-13 09:40:17"><i class="far fa-calendar-alt"></i>2020-08-13</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8F%98%E9%87%8F/">变量</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%87%BD%E6%95%B0/">函数</a></span></div><div class="content">变量和函数的声明提升变量声明提升1、变量定义可以使用var定义变量，变量如果没有赋值，那变量的初始值为undefined。
2、变量作用域变量作用域指变量起作用的范围。变量分为全局变量和局部变量。全局变量在全局都拥有定义；而局部变量只能在函数内有效。在函数体内，同名的局部变量或者参数的优先级会高于全局变量。也就是说，如果函数内存在和全局变量同名的局部变量或者参数，那么全局变量将会被局部变量覆盖。所有不使用var定义的变量都视为全局变量
3、函数作用域和声明提前JavaScript的函数作用是指在函数内声明的所有变量在函数体内始终是有定义的，也就是说变量在声明之前已经可用，所有这特性称为声明提前（hoisting），即JavaScript函数里的所有声明（只是声明，但不涉及赋值）都被提前到函数体的顶部，而变量赋值操作留在原来的位置。如下面例子：注释：声明提前是在JavaScript引擎的预编译时进行，是在代码开始运行之前。
123456var scope = 'global';function f(){ console.log(scope); var scope = ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/08/05/JS%E4%B8%ADoffset%20client%20scroll%E7%9A%84%E5%8C%BA%E5%88%AB/" title="JS中offset client scroll的区别"> <img class="post_bg" data-src="https://w.wallhaven.cc/full/ey/wallhaven-eyx128.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS中offset client scroll的区别"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/08/05/JS%E4%B8%ADoffset%20client%20scroll%E7%9A%84%E5%8C%BA%E5%88%AB/" title="JS中offset client scroll的区别">JS中offset client scroll的区别</a><div class="article-meta-wrap"><time class="post-meta__date" title="Created 2020-08-05 16:29:01"><i class="far fa-calendar-alt"></i>2020-08-05</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/bom/">bom</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/dom/">dom</a></span></div><div class="content">JS中offset client scroll的区别偏移 offsetoffsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
offsetLeft和style.left的区别
style.left只能获取行内样式，offsetLeft 可以获取行内样式和内嵌样式
offsetLeft 只读，style.left可读可写
offsetLeft是数值，style.left是字符串并且有单位px
如果没有加定位，style.left获取的数值可能是无效的
最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准
滚动 scrollscrollHeight：在没有滚动条的情况下，元素内容 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/08/03/Js%20%E4%B8%AD%20this%20%E7%9A%84%E6%8C%87%E5%90%91%E6%80%A7%E9%97%AE%E9%A2%98/" title="Js 中 this 的指向性问题"> <img class="post_bg" data-src="https://w.wallhaven.cc/full/lm/wallhaven-lmxmxy.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Js 中 this 的指向性问题"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/08/03/Js%20%E4%B8%AD%20this%20%E7%9A%84%E6%8C%87%E5%90%91%E6%80%A7%E9%97%AE%E9%A2%98/" title="Js 中 this 的指向性问题">Js 中 this 的指向性问题</a><div class="article-meta-wrap"><time class="post-meta__date" title="Created 2020-08-03 20:15:30"><i class="far fa-calendar-alt"></i>2020-08-03</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a></span></div><div class="content">JS 中 this 的指向性问题一般情况下this的最终指向是调用它的对象
1.全局作用域或者普通函数指向全局对象window(定时器中的this指向window)123456789console.log(this);//指向windowfunction(){ console.log(this);}fn();//fn的调用者是window,即window.fn()setTimeout(function(){},1000);//前面也省略了一个window12345678
2. 方法调用中谁调用this指向谁1234567891011var o = { sayHi:function(){ console.log(this);//this指向o这个对象 }}o.sayHi();var btn = document.quereySelector('button');btn.onclick = function(){ console.log(this);// ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/07/24/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/" title="JavaScript中的栈内存和堆内存"> <img class="post_bg" data-src="https://w.wallhaven.cc/full/2e/wallhaven-2em38y.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JavaScript中的栈内存和堆内存"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/07/24/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/" title="JavaScript中的栈内存和堆内存">JavaScript中的栈内存和堆内存</a><div class="article-meta-wrap"><time class="post-meta__date" title="Created 2020-07-24 19:20:23"><i class="far fa-calendar-alt"></i>2020-07-24</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E6%A0%88%E5%86%85%E5%AD%98/">栈内存</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%A0%86%E5%86%85%E5%AD%98/">堆内存</a></span></div><div class="content">JavaScript中的栈内存和堆内存基本概念JavaScript中的变量分为基本类型和引用类型.
基本类型:Undifined,Null,Boolean,Number和String,这些简单数据段在内存中分别占有固定大小的空间,他们的值保存在栈空间,是按值来访问的.
引用类型:引用类型时保存在堆内存中的对象,引用类型的值大小不固定,栈内存中存放地址指向堆内存中的对象,是按引用来访问的.
结合代码和图来理解12345var a = 0; //栈内存var a2 = "this is string"; //栈内存var a3 = null; //栈内存var b = { x:10 };//变量b存在于栈中,{x:10}作为对象存在于堆中var c = [1,2,3];//变量c存在于栈中,[1,2,3]作为对象存在于堆中
当我们要访问堆内存中的引用数据类型时
从栈中获取该对象的地址引用
再从堆内存中获得我们需要的数据
基本类型发生复制行为1234var a = 20;var b = a;b = 30;console.log(a);//20
...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/07/18/%E5%85%B3%E4%BA%8EBFC/" title="关于BFC"> <img class="post_bg" data-src="https://w.wallhaven.cc/full/lm/wallhaven-lm15jy.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="关于BFC"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/07/18/%E5%85%B3%E4%BA%8EBFC/" title="关于BFC">关于BFC</a><div class="article-meta-wrap"><time class="post-meta__date" title="Created 2020-07-18 15:17:31"><i class="far fa-calendar-alt"></i>2020-07-18</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/CSS/">CSS</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/CSS/">CSS</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/BFC/">BFC</a></span></div><div class="content">关于BFCBFC定义
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
创建BFC
浮动元素;
position的除static和relative以外的值;
display:table-cell元素;
display:table-caption元素;
display:inline-block元素;
元素设置overflow且值不为visible(hidden|scroll|auto)
BFC的布局规则
不属于BFC中的相邻元素的垂直外边距不会合并;123456<style> p { background-color: tomato; margin: 50px; }</style>
1234567<body> <p>我是第一行</p> & ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/07/18/%E6%B5%AE%E5%8A%A8%E7%9A%84%E5%BD%B1%E5%93%8D%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E6%B8%85%E9%99%A4/" title="CSS中浮动的影响以及如何清除"> <img class="post_bg" data-src="https://w.wallhaven.cc/full/j5/wallhaven-j5z62q.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="CSS中浮动的影响以及如何清除"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/07/18/%E6%B5%AE%E5%8A%A8%E7%9A%84%E5%BD%B1%E5%93%8D%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E6%B8%85%E9%99%A4/" title="CSS中浮动的影响以及如何清除">CSS中浮动的影响以及如何清除</a><div class="article-meta-wrap"><time class="post-meta__date" title="Created 2020-07-18 09:40:17"><i class="far fa-calendar-alt"></i>2020-07-18</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/CSS/">CSS</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/CSS/">CSS</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E6%B5%AE%E5%8A%A8/">浮动</a></span></div><div class="content">CSS中浮动的影响以及如何清除对于刚接触CSS的我来说，浮动属性基本是用来使块元素同行展示的。
但是float之后却产生了许多问题。
元素浮动后产生的问题问题一：父元素高度塌陷现在来写一个例子：
1234567891011121314151617<style> .box { border: 5px solid #333; } .box1 { width: 100px; height: 100px; background-color: tomato; } .box2 { width: 100px; height: 100px; background-color: saddlebrown; }</style>
1234<div class="box"> ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/07/18/%E4%BC%AA%E5%85%83%E7%B4%A0before%E5%92%8Cafter%E7%9A%84%E4%BD%BF%E7%94%A8/" title="CSS 伪元素::before和::after的使用"> <img class="post_bg" data-src="https://w.wallhaven.cc/full/g8/wallhaven-g8eyee.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="CSS 伪元素::before和::after的使用"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/07/18/%E4%BC%AA%E5%85%83%E7%B4%A0before%E5%92%8Cafter%E7%9A%84%E4%BD%BF%E7%94%A8/" title="CSS 伪元素::before和::after的使用">CSS 伪元素::before和::after的使用</a><div class="article-meta-wrap"><time class="post-meta__date" title="Created 2020-07-18 09:14:26"><i class="far fa-calendar-alt"></i>2020-07-18</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/CSS/">CSS</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/CSS/">CSS</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E4%BC%AA%E5%85%83%E7%B4%A0/">伪元素</a></span></div><div class="content">CSS 伪元素::before和::after的使用特性
都作为标签内部的第一个/最后一个子元素
行内元素(无法设置宽高)
content属性必填(若没有就’’)使用场景
文字前的图标1234567891011121314<style> span::before { display: inline-block; content: ''; background: url(home.png) no-repeat; width: 50px; height: 50px; background-size: cover; vertical-align: bottom; }</style><body> <span>这是一个图片</span></body>
导航的跟随线1234567891011121314151 ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside_content" id="aside_content"><div class="card-widget card-info"><div class="card-content"><div class="card-info-avatar is-center"><img class="avatar-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3579919212,3337210467&fm=11&gp=0.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">Ray9972</div><div class="author-info__description">Welcome to my blog!</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives"><div class="headline">Articles</div><div class="length_num">8</div></a></div><div class="card-info-data-item is-center"> <a href="/tags"><div class="headline">Tags</div><div class="length_num">14</div></a></div><div class="card-info-data-item is-center"> <a href="/categories"><div class="headline">Categories</div><div class="length_num">3</div></a></div></div><div class="card-info-bookmark is-center"><button class="button--animated" id="bookmark-it" title="Bookmark"><i class="fas fa-bookmark"></i><span>Bookmark</span></button></div><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/Ray9972" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:xxxxxx@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div></div><div class="card-widget card-announcement"><div class="card-content"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>Announcement</span></div><div class="announcement_content">Nothing burns like the cold.</div></div></div><div class="card-widget card-recent-post"><div class="card-content"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-recent-item"><div class="aside-recent-post"><a href="/2020/08/22/%E6%B7%B1%E5%85%8B%E9%9A%86%E5%92%8C%E6%B5%85%E5%85%8B%E9%9A%86/"><div class="aside-post-cover"><img class="aside-post-bg" data-src="https://w.wallhaven.cc/full/g8/wallhaven-g8r17d.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" title="深克隆和浅克隆" alt="深克隆和浅克隆"/></div><div class="aside-post-title"><div class="aside-post_title" href="/2020/08/22/%E6%B7%B1%E5%85%8B%E9%9A%86%E5%92%8C%E6%B5%85%E5%85%8B%E9%9A%86/" title="深克隆和浅克隆">深克隆和浅克隆</div><time class="aside-post_meta post-meta__date" title="Created 2020-08-22 15:35:26">2020-08-22</time></div></a></div><div class="aside-recent-post"><a href="/2020/08/13/%E5%8F%98%E9%87%8F%E5%92%8C%E5%87%BD%E6%95%B0%E7%9A%84%E5%A3%B0%E6%98%8E%E6%8F%90%E5%8D%87/"><div class="aside-post-cover"><img class="aside-post-bg" data-src="https://w.wallhaven.cc/full/j5/wallhaven-j5z62q.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" title="变量和函数的声明提升" alt="变量和函数的声明提升"/></div><div class="aside-post-title"><div class="aside-post_title" href="/2020/08/13/%E5%8F%98%E9%87%8F%E5%92%8C%E5%87%BD%E6%95%B0%E7%9A%84%E5%A3%B0%E6%98%8E%E6%8F%90%E5%8D%87/" title="变量和函数的声明提升">变量和函数的声明提升</div><time class="aside-post_meta post-meta__date" title="Created 2020-08-13 09:40:17">2020-08-13</time></div></a></div><div class="aside-recent-post"><a href="/2020/08/05/JS%E4%B8%ADoffset%20client%20scroll%E7%9A%84%E5%8C%BA%E5%88%AB/"><div class="aside-post-cover"><img class="aside-post-bg" data-src="https://w.wallhaven.cc/full/ey/wallhaven-eyx128.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" title="JS中offset client scroll的区别" alt="JS中offset client scroll的区别"/></div><div class="aside-post-title"><div class="aside-post_title" href="/2020/08/05/JS%E4%B8%ADoffset%20client%20scroll%E7%9A%84%E5%8C%BA%E5%88%AB/" title="JS中offset client scroll的区别">JS中offset client scroll的区别</div><time class="aside-post_meta post-meta__date" title="Created 2020-08-05 16:29:01">2020-08-05</time></div></a></div><div class="aside-recent-post"><a href="/2020/08/03/Js%20%E4%B8%AD%20this%20%E7%9A%84%E6%8C%87%E5%90%91%E6%80%A7%E9%97%AE%E9%A2%98/"><div class="aside-post-cover"><img class="aside-post-bg" data-src="https://w.wallhaven.cc/full/lm/wallhaven-lmxmxy.png" onerror="this.onerror=null;this.src='/img/404.jpg'" title="Js 中 this 的指向性问题" alt="Js 中 this 的指向性问题"/></div><div class="aside-post-title"><div class="aside-post_title" href="/2020/08/03/Js%20%E4%B8%AD%20this%20%E7%9A%84%E6%8C%87%E5%90%91%E6%80%A7%E9%97%AE%E9%A2%98/" title="Js 中 this 的指向性问题">Js 中 this 的指向性问题</div><time class="aside-post_meta post-meta__date" title="Created 2020-08-03 20:15:30">2020-08-03</time></div></a></div><div class="aside-recent-post"><a href="/2020/07/24/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/"><div class="aside-post-cover"><img class="aside-post-bg" data-src="https://w.wallhaven.cc/full/2e/wallhaven-2em38y.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" title="JavaScript中的栈内存和堆内存" alt="JavaScript中的栈内存和堆内存"/></div><div class="aside-post-title"><div class="aside-post_title" href="/2020/07/24/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/" title="JavaScript中的栈内存和堆内存">JavaScript中的栈内存和堆内存</div><time class="aside-post_meta post-meta__date" title="Created 2020-07-24 19:20:23">2020-07-24</time></div></a></div></div></div></div><div class="card-widget card-categories"><div class="card-content"><div class="item-headline"><i class="fas fa-folder-open"></i><span>Categories</span></div><ul class="card-category-list">
<li class="card-category-list-item "><a class="card-category-list-link" href="/categories/CSS/"><span class="card-category-list-name">CSS</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS/"><span class="card-category-list-name">JS</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JavaScript/"><span class="card-category-list-name">JavaScript</span><span class="card-category-list-count">4</span></a></li>
</ul></div></div><div class="card-widget card-tags"><div class="card-content"><div class="item-headline"><i class="fas fa-tags"></i><span>Tags</span></div><div class="card-tag-cloud"><a href="/tags/BFC/" style="font-size: 16px; color: #999">BFC</a> <a href="/tags/CSS/" style="font-size: 19px; color: #99a1ac">CSS</a> <a href="/tags/JS/" style="font-size: 16px; color: #999">JS</a> <a href="/tags/JavaScript/" style="font-size: 22px; color: #99a9bf">JavaScript</a> <a href="/tags/bom/" style="font-size: 16px; color: #999">bom</a> <a href="/tags/dom/" style="font-size: 16px; color: #999">dom</a> <a href="/tags/%E4%BC%AA%E5%85%83%E7%B4%A0/" style="font-size: 16px; color: #999">伪元素</a> <a href="/tags/%E5%87%BD%E6%95%B0/" style="font-size: 16px; color: #999">函数</a> <a href="/tags/%E5%8F%98%E9%87%8F/" style="font-size: 16px; color: #999">变量</a> <a href="/tags/%E5%A0%86%E5%86%85%E5%AD%98/" style="font-size: 16px; color: #999">堆内存</a> <a href="/tags/%E6%A0%88%E5%86%85%E5%AD%98/" style="font-size: 16px; color: #999">栈内存</a> <a href="/tags/%E6%B5%85%E5%85%8B%E9%9A%86/" style="font-size: 16px; color: #999">浅克隆</a> <a href="/tags/%E6%B5%AE%E5%8A%A8/" style="font-size: 16px; color: #999">浮动</a> <a href="/tags/%E6%B7%B1%E5%85%8B%E9%9A%86/" style="font-size: 16px; color: #999">深克隆</a></div></div></div><div class="card-widget card-archives"><div class="card-content"><div class="item-headline"><i class="fas fa-archive"></i><span>Archives</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/08/"><span class="card-archive-list-date">August 2020</span><span class="card-archive-list-count">4</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/07/"><span class="card-archive-list-date">July 2020</span><span class="card-archive-list-count">4</span></a></li></ul></div></div><div class="card-widget card-webinfo"><div class="card-content"><div class="item-headline"><i class="fas fa-chart-line"></i><span>Info</span></div><div class="webinfo"><div class="webinfo-item"><div class="webinfo-article-name">Article :</div><div class="webinfo-article-count">8</div></div><div class="webinfo-item"><div class="webinfo-runtime-name">Run time :</div><div class="webinfo-runtime-count" id="webinfo-runtime-count" publish_date="2020.7.17"> </div></div><div class="webinfo-item"><div class="webinfo-site-wordcount-name">Total Count :</div><div class="webinfo-site-wordcount">4.2k</div></div><div class="webinfo-item"> <div class="webinfo-site-uv-name">UV :</div><div class="webinfo-site-uv-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="webinfo-site-name">PV :</div><div class="webinfo-site-pv-count" id="busuanzi_value_site_pv"></div></div></div></div></div></div></main><footer id="footer" style="background-image: url(https://w.wallhaven.cc/full/dg/wallhaven-dg9q6g.jpg)" data-type="photo"><div id="footer-wrap"><div class="copyright">©2020 By Ray9972</div><div class="framework-info"><span>Driven </span><a href="https://hexo.io" target="_blank" rel="noopener"><span>Hexo</span></a><span class="footer-separator">|</span><span>Theme </span><a href="https://github.com/jerryc127/hexo-theme-butterfly" target="_blank" rel="noopener"><span>Butterfly</span></a></div></div></footer></div><section class="rightside" id="rightside"><div id="rightside-config-hide"><button class="translate_chn_to_cht" id="translateLink" title="Switch Between Traditional Chinese And Simplified Chinese">繁</button><button id="darkmode" title="Switch Between Light And Dark Mode"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" title="Setting"><i class="fas fa-cog"></i></button><button id="go-up" title="Back To Top"><i class="fas fa-arrow-up"></i></button></div></section><div class="search-dialog" id="local-search"><div class="search-dialog__title" id="local-search-title">Local search</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="Search for Posts" type="text"/></div></div></div><hr/><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>Powered by</span> <a href="https://github.com/wzpan/hexo-generator-search" target="_blank" rel="noopener" style="color:#49B1F5;">hexo-generator-search</a></div></div></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div class="search-mask"></div><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="/js/third-party/activate-power-mode.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
document.body.addEventListener('input', POWERMODE);
</script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module" defer></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js" async></script><script src="/js/third-party/click_heart.js"></script><script src="/js/search/local-search.js"></script><script src="https://cdn.jsdelivr.net/npm/typed.js"></script><script>var subtitleEffect = true
if (subtitleEffect) {
var typed = new Typed("#subtitle", {
strings: "The winter is coming.,凛冬将至.".split(","),
startDelay: 300,
typeSpeed: 150,
loop: true,
backSpeed: 50
})
} else {
document.getElementById("subtitle").innerHTML = 'The winter is coming.'
}</script><script>var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
}
window.addEventListener('load',endLoading)</script><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/haruto.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>