说一下 web worker 在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。 如何
处理图片资源 过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 1. 配置 const path = require("path"); module.exports = { entry: "./src/main.js"
什么是 DOM 和 BOM？ DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。 BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。BOM的核心是 window，而 window 对象具有双重角
margin，外边距，就是设置元素的从边框最外边缘向外（正值）或者向内（负值）的延申的距离。 margin是完全透明的，看不见的。但它是元素之间的边界 margin的边界线是两个元素之间真正的边界线。 元素的外部边界线就是元素的margin边界线。元素的内部边界想就是元素的padding边界线（或者
div 组件中的中心元素 在 div 容器中将元素居中有时会很棘手。当你制作网页的前端时，知道究竟是什么而不是每次都尝试它是非常重要的。 如何使用 CSS 使 div 居中？ 现在，将元素居中不仅仅意味着 div 组件的居中。通过居中，我将专注于 水平居中 垂直居中 水平和垂直居中（组件的中心）
带有发光动画的按钮 — 分步指南 HTML 对于 HTML，我们只有一个按钮元素。 <button>按钮</button> CSS 对于 CSS，首先我们将设置按钮样式。 我们将移除边框并将其舍入 1 个像素。 然后我们将背景设置为绿色，添加一些填充，隐藏所有溢出并将位置设置为相对。 按钮 { 边框：无； 边
Examples <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景图像完全覆盖元素区域</title> <style> div{ margin:2px; float:left; border:1px solid red; background:url(https://www.baidu.com/
第一章 <html> <!--解释器--> <!DOCTYPE html> <head> <!--字符集--> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <!--刷新跳转--> <meta http-equiv="Refresh" Content="
content-box 默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100
三中的使用方法的简单实例如下： 行内样式： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>css行内样式</title> </head> <body> <div style="width:100px;height:100px;background:red;"></div>&
实现一个商品详情的布局效果，左边图片右边文字标题和描述，采用display: flex，弹性布局，code如下： <html> <head> <title>我的第一个 HTML 页面</title> <style> .list { display: flex; } .info{ display: flex; flex-direction: column; margin-left: 10px; } img {
说明：本文转自：https://blog.csdn.net/wxiao_xiao_miao/article/details/123879687 原作者此篇文章内容非常详细，我个人十分喜欢，为了能够在复习时能够随时查阅，故而将此文章复制了一份到我的博客中，上面是原文链接，如果有网友要学习此文章中的知识点，建议到原文中查看。在此感谢原作者提
定位position 概念：是一种布局方式，主要用来确定元素的位置。 作用 解决是具有层级叠加（覆盖）效果的布局。 实现方式 通过给元素添加position属性,并且定位位置调整都是配合left, top, right, bottom四个属性来使用的。 position用来设置定位元素的参照物。 left, t
用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效 如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属
1 行内元素水平垂直居中 方式一： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行内元素水平垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red;
属性： 字体，文本 font-size :字体大小 color :文本颜色 text-align :对其方式 line-height :行高 背景： background： 边框： border :设置边框，符合属性 尺寸： width：宽度 height：高度 <!DOCTYPE html> <html lang="en"> <head
CSS Grid 网格布局教程 作者： 阮一峰 日期： 2019年3月25日 一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的
一、原理： border-radius 可以设置4个叫，8个切边的长度，控制圆角大小； 实现方案如下： 左上角、左下角小一点。 右上角、右下角：x轴80%；y轴50%。 二、实现圆角梯形 .block{ width: 100px; height: 100px; background-color: red; border-top-left-radius: 20px 20
html + css实现3d立方体 注意：内外层使用的图片，要和内外层容器的规格相同 css代码 /*页面背景色*/ body{ background-color: black; background-repeat:no-repeat; } /********************** 双层3D立方体 *********************/ /*最外层容器*/ .wrap{ margin: 36
第一种：定位+cala（固定宽高） html部分： <div class="box1"> <div class="inner"></div> </div> css部分： .box1{ width: 200px; height: 200px; border: 1px solid black; position: relative; } .box1 .inner { width
Collapsing margins Horizontal margins never collapse .outer{ width: 300px; height: 300px; background-color: tomato; } .inner{ width: 100px; height: 100px; background-color: cornflowerblue; margin-top: 100px; } <div class=
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
1.4 CSS盒子模型 border 边框 margin 间距 padding 填充 content为内容，border为边框 不同浏览器的页面宽度计算不同 IE 浏览器：实际尺寸 = width chrome浏览器：实际尺寸 = width + 左右borderwidth + padding <html> <head> <meta charset="utf-8"> <style type="text/css"
给div盒子加了translateY，但是在移动的过程中offsetTop的数值却没有变化，跟我预想的很不一致 于是去查了MDN，https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop 这一页没说明白，又点进规范看了看， https://drafts.csswg.org/cssom-view/#dom-htmlelement-offset
探讨一下复杂圆角的书写 Border-radius：50px 0 0 0/50px 0 0 0 “/ ”之前的横轴 之后的纵轴 每一个横轴或者纵轴的数字 从前往后 代表 左上角 右上角 右下角 左下角 .box7{ width: 100px; height: 100px; background-color: pink;
