css
妙莲
这个作者很懒,什么都没留下…
展开
-
css实现水波纹效果
<style> .wave-content { height: 666px; width: 666px; left: 255px; top: 139px; position: relative; } .wave { position: absolute; left: 0px; top: 0px; height: 100%;原创 2021-06-24 18:22:44 · 2360 阅读 · 0 评论 -
css什么是重绘重排,哪些操作会造成重绘重排
一、重绘、重排1.1 什么是重绘重排当我们改变了一个元素的尺寸位置属性时,会重新进行样式计算(computed style)和布局(layout) 绘制(paint)以及后面的所有流程,这种行为称为重排。当改变了某个元素的颜色属性时不会重新触发布局,但还是会触发样式计算和绘制这就是重绘我们可以发现重排和重绘都会占用主线程,还有JS也会运行在主线程,所以就会出现抢占执行时间的问题,如果你写了一个不断导致重排重绘的动画,浏览器则需要在第一帧都运行样式计算布局和绘制的操作。1.2 触发的一些因素a.原创 2021-06-24 17:36:41 · 2842 阅读 · 0 评论 -
css BFC是什么?触发BFC的条件是什么?有哪些应用场景?
概念BFC(Box Formatting context):box是css布局的对象和基本单位,bfc就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。块级格式化上下文布局规则内部的box会在垂直方向一个接一个的放置属于同一个bfc的两个相邻box的margin会重叠;不同bfc就不会是页面上一个隔离的独立容器,里面的元素不会影响到外面的元素;反之亦然;bfc的区域不会和float box重叠计算bfc的高度,浮动元素也参与计算触发条件a. 根元素b. f.原创 2021-06-24 15:56:24 · 1091 阅读 · 0 评论 -
vue3在style标签里css用js里的变量
原创 2021-04-15 11:55:13 · 1588 阅读 · 0 评论 -
css 内容超出显示一行和多行省略号...
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;原创 2021-02-25 15:14:57 · 69 阅读 · 0 评论 -
css 修改原生select placheloder
<template> <div id="app"> <select required> <option value="" disabled selected hidden>Select your option</option> <option value="M">Male</option> <option value="F">Female</op.原创 2021-02-20 18:19:20 · 190 阅读 · 0 评论 -
css 屏幕鼠标事件 pointer-events:none 划到空白区域不进行触发
pointer-events:none; 屏蔽鼠标事件opacity:value; filter:alpha(opacity=value)透明,内容会跟着透明如果不想内容透明解决方案?1.把background用rgba实现 2. 用定位实现,背景和内容单独出来,用定位使其叠加在一起只有划到红框内才触发hover事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .原创 2021-02-20 09:37:09 · 329 阅读 · 0 评论 -
移动端1px边框问题怎么解决
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-02-19 15:24:13 · 112 阅读 · 0 评论 -
css 属性 各浏览器是否支持要怎么查
推荐这个网站可以查:https://caniuse.com/原创 2021-02-19 15:10:59 · 231 阅读 · 0 评论 -
多行文本显示省略号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-02-19 15:02:13 · 90 阅读 · 0 评论 -
css 内容多左对齐 内容少居中对齐
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-02-19 14:58:55 · 207 阅读 · 0 评论 -
css 大小不一样的图片垂直居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-02-19 14:54:19 · 215 阅读 · 0 评论 -
css 左边宽固定右边自适应 左右宽固定中间自适应双飞翼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-02-19 13:42:29 · 76 阅读 · 0 评论 -
网页适配兼容问题
移动端适配rem+flex+vw vhrem: 1rem = 根元素字体大小的字高em: 1em = 父元素或当前元素字高37.5是因为选择参考设计图的宽度是375pc端适配%+媒体查询最大尺寸 大于最大尺寸 内容层不变 留白变大最大尺寸 最小尺寸之间 内容层百分比布局最小尺寸 小于最小尺寸内容不变 产生滚动条480 - 750 -1136 - 1440 - 1920 - 2440响应式(移动pc适配)媒体查询栅格 bootstrap 官网首页...原创 2021-02-07 12:09:06 · 200 阅读 · 0 评论 -
CSS不知高的情况下,垂直居中。
<head> <title>脚手架-ES2019从入门到精通</title> <style> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; .原创 2021-02-03 14:37:37 · 210 阅读 · 0 评论 -
动手实现一个左右固定100px,中间自适应的三列布局。圣杯布局。
<head> <title>脚手架-ES2019从入门到精通</title> <style> html, body { height: 100%; margin: 0; padding: 0; } body { overfl...原创 2021-01-29 17:39:15 · 202 阅读 · 0 评论 -
实现一个左右固定100px,中间自适应的三列布局。双飞翼布局。
<style> html,body { width: 100%; height: 100%; padding: 0; margin: 0; } body { overflow: hidden; } .main { width: 100%; float.原创 2021-01-29 17:24:03 · 373 阅读 · 1 评论 -
css画一个三角形
<style> .triangle1 { width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent red transparent; } .triangle2 {.原创 2021-01-29 16:25:56 · 83 阅读 · 0 评论 -
flex布局,7个元素2行排列
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul><style> ul {.原创 2021-01-29 16:18:05 · 2058 阅读 · 0 评论