100px

首页 > TAG信息列表 > 100px

社招前端二面面试题

说一下 web worker 在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。如何

webpack基础_5处理图片资源

处理图片资源过去在 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 对象具有双重角

css margin负值

margin，外边距，就是设置元素的从边框最外边缘向外（正值）或者向内（负值）的延申的距离。 margin是完全透明的，看不见的。但它是元素之间的边界　　margin的边界线是两个元素之间真正的边界线。　　元素的外部边界线就是元素的margin边界线。元素的内部边界想就是元素的padding边界线（或者

div 组件中的中心元素

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+css

第一章 <html>  <!DOCTYPE html> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>  <meta http-equiv="Refresh" Content="

css盒子 box-sizing 设置

content-box 默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100

CSS三中样式(简单的代码)

三中的使用方法的简单实例如下：行内样式： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>css行内样式</title> </head> <body> <div style="width:100px;height:100px;background:red;"></div>&

display: flex，弹性布局

　　实现一个商品详情的布局效果，左边图片右边文字标题和描述，采用display: flex，弹性布局，code如下： <html> <head> <title>我的第一个 HTML 页面</title> <style> .list { display: flex; } .info{ display: flex; flex-direction: column; margin-left: 10px; } img {

display:grid 网络布局

说明：本文转自：https://blog.csdn.net/wxiao_xiao_miao/article/details/123879687 原作者此篇文章内容非常详细，我个人十分喜欢，为了能够在复习时能够随时查阅，故而将此文章复制了一份到我的博客中，上面是原文链接，如果有网友要学习此文章中的知识点，建议到原文中查看。在此感谢原作者提

css定位布局

定位position 概念：是一种布局方式，主要用来确定元素的位置。作用解决是具有层级叠加（覆盖）效果的布局。实现方式通过给元素添加position属性,并且定位位置调整都是配合left, top, right, bottom四个属性来使用的。 position用来设置定位元素的参照物。 left, t

原生JS 设置样式

用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效　　如果属性有'-'号，就写成驼峰的形式（如textAlign）如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属

21 水平垂直居中

1 行内元素水平垂直居中方式一： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行内元素水平垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red;

css_属性1和CSS_属性2_盒子模型

属性：　　字体，文本　　font-size :字体大小　　color :文本颜色　　text-align :对其方式　　line-height :行高背景：　　background：　　边框：　　　　border :设置边框，符合属性　　尺寸：　　　　width：宽度　　　　height：高度 <!DOCTYPE html> <html lang="en"> <head

CSS Grid 网格布局教程

CSS Grid 网格布局教程作者：阮一峰日期： 2019年3月25日一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的

Css3 border-radius 实现圆弧三角形_圆弧正三角形

一、原理： border-radius 可以设置4个叫，8个切边的长度，控制圆角大小；实现方案如下：左上角、左下角小一点。右上角、右下角：x轴80%；y轴50%。二、实现圆角梯形 .block{ width: 100px; height: 100px; background-color: red; border-top-left-radius: 20px 20

html + css 01: 3d立方体

html + css实现3d立方体注意：内外层使用的图片，要和内外层容器的规格相同 css代码 /*页面背景色*/ body{ background-color: black; background-repeat:no-repeat; } /********************** 双层3D立方体 *********************/ /*最外层容器*/ .wrap{ margin: 36

【html+css】总结七种垂直水平居中的办法

第一种：定位+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

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=

vue10-3 v-bind绑定style用法

<!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

【JavaWeb】CSS盒子模型

1.4 CSS盒子模型 border 边框 margin 间距 padding 填充 content为内容，border为边框不同浏览器的页面宽度计算不同 IE 浏览器：实际尺寸 = width chrome浏览器：实际尺寸 = width + 左右borderwidth + padding <html> <head> <meta charset="utf-8"> <style type="text/css"

探究-加了动画移动 offsetTop却没有变化

给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

探讨一下复杂圆角的书写 Border-radius：50px 0 0 0/50px 0 0 0 “/ ”之前的横轴之后的纵轴每一个横轴或者纵轴的数字从前往后代表左上角右上角右下角左下角 .box7{ width: 100px; height: 100px; background-color: pink;