![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
丹丹的小跟班
这个作者很懒,什么都没留下…
展开
-
总结盒子居中的常用方法
让元素居中是每个前端都会经历的一个问题,而解决该问题的方法也各不相同,各有长短,今天总结下所知晓的方法,并分析利弊。基础代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>订阅发布</title> <style> .bigBox { width: 500px; height: 500px; backg原创 2021-07-23 09:20:59 · 4464 阅读 · 2 评论 -
padding百分比操作
在css里面padding值也是可以设置百分比的1.如果 position 属性为 static 、 relative 或 sticky,包含块就是该元素最近的祖先块级元素的 content 决定2.如果 position 属性为 absolute、fixed,包含块还要额外算上 padding,即 content + padding。<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF原创 2021-09-06 18:08:16 · 1125 阅读 · 0 评论 -
文字一行或多行超出部分使用...代替
一行#app { width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}<div id="app"> 1111111111111111111111111111111111111111</div>多行width: 100px;overflow: hidden; /** 超出部分隐藏**/word-break: break-all; /** 单词断句原创 2021-09-06 10:56:40 · 176 阅读 · 0 评论 -
常用的元素隐藏的方法及区别
display:none特点:不占据空间,不能点击。会引起回流。株连性。当父级的元素进行display:none进行隐藏后,他的所有子孙都会被无条件隐藏,没有余地。visibility:hidden特点:会占据空间,不能点击。会引起重绘。虚假株连性。当父级的元素进行visibility:hidden进行隐藏后,他的所有子孙都会被无条件隐藏,但是留有余地。当后子孙元素设置visibility:visible后,就会显现。opacity:0特点:会占据空间,可以点击。原创 2021-07-01 11:01:46 · 107 阅读 · 0 评论 -
readonly与disabled的区别
删除线格式 ## 一. 范围不同readonly 只对 和 标签有效disabled 对所有表单元素都有效, 包括:, , , , , 等二. 程度不同readonly 只是将元素设置为只读,不可输入,对其它操作没有影响disabled 阻止元素的一切操作。包括 获取焦点,点击事件等三. 表单提交readonly 只是将元素设置为只读,不影响表单提交disabled 设置了该属性的表单元素,值将不会随着表单一起提交四. JavaScript操作设置了readonly和disabled原创 2021-07-01 09:13:40 · 1345 阅读 · 0 评论 -
浅谈回流重绘
加粗样式通常来说,渲染引擎会解析HTML文档来构建DOM树,与此同时,渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。接下来,DOM树和CSSOM树关联起来构成渲染树(RenderTree),这一过程称为Attachment,最后把渲染树交给浏览器GPU进行绘制。当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并原创 2021-06-30 10:37:02 · 75 阅读 · 0 评论 -
sass基础语法
SASS是SCSS3的新语法SASS允许使用变量,所有变量以$开头。$red: red;div { color: $red;}//也可以镶嵌在字符串里面使用,必须需要写在#{}之中,作用于属性名$left: left;margin-#{$left}:30px;SASS允许在代码中使用算式。body { margin: (14px/2); top: 50px + 100px; right: $var * 10%; }SASS允许选择器嵌套div h1原创 2021-06-30 10:56:41 · 74 阅读 · 0 评论 -
transition第一次没有效果和transition的duration无效
transition第一次没有效果这个问题经常遇到,比如说轮播图,困扰了好久,有时候出现,有时候不出现,今天终于找到原因原因很简单因为一开始没有设定要改变的样式的初始值解决办法:例如你要改的是top:-50;那一开始就要设top:0;不然第一次不会有动画效果移动duration无效的问题在react里做轮播遇到过,个人感觉跟回流重绘有些类似。原因:在transiion里面,当连续两个duration的属性设置紧挨着时,会默认以最后一个duration属性为值。解决办法:给第二个d原创 2021-06-30 10:48:41 · 2052 阅读 · 2 评论