![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
ArthurHsing
前端菜鸟
展开
-
JS实现简单的拖拽元素的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pa原创 2020-09-12 23:17:29 · 134 阅读 · 0 评论 -
html/css input[type=file]时,上传按钮设置cursor:pointer失效的问题
多给如下所示的伪元素设置一下就可以了.upload input[type=file],.upload input[type=file]::-webkit-file-upload-button{ cursor:pointer;}原创 2020-09-12 17:03:39 · 713 阅读 · 2 评论 -
CSS绝对定位是子级元素的margin edge相对于父级定位元素的content edge进行定位的
如题,很神奇对吧原创 2020-08-23 13:46:23 · 371 阅读 · 0 评论 -
CSS float布局需要注意的地方
以下总结都与BFC相关,但是BFC的机制没看太明白,所以生硬地总结了下面的规律。1、浮动元素会无视它前面所有的文本类型、inline类型或者inline-block类型元素,总是会排在他们前面,他们会被放在行末尾,但会优先把这些文本类型、inline类型或者inline-block类型的元素的位置留够,但确是放在最后面,如果它们的位置已经足够占满一行了,那么浮动元素换行再浮动2、浮动元素后面的文本类型、inline类型或者inline-block类型的元素那就肯定放在浮动元素后面了。3、block类型原创 2020-08-22 21:45:00 · 179 阅读 · 0 评论 -
CSS transition-timing-function:cubic-bezier() 贝塞尔曲线一个有用的网站
https://cubic-bezier.com原创 2020-08-22 13:18:21 · 719 阅读 · 0 评论 -
CSS width中的max-content,min-content,fit-content的区别
1、max-content内容有多宽,盒子就有多宽,不会顾及父级盒子有多宽,只满足自己的需求。2、min-content装下单个最大内容的最小宽度,下面这个图片能够直观的说明这是什么意思3、fit-content在不超过父级盒子宽度的情况下,尽量撑开盒子满足自己的需求。max-content和fit-content在自己内容不足以撑满父盒子时,宽度只为自己内容的最大宽度,不会再强行增大。fit-content官方给出可以表示为一个公式:...原创 2020-08-14 18:15:20 · 20608 阅读 · 0 评论 -
flex布局与定位叠加一个值得注意的地方
当父元素使用了flex布局,再使用相对定位,然后子元素再使用绝对定位。那么父元素的flex所设定的效果将会对所有绝对定位的子元素产生相同的影响!原创 2020-08-14 13:43:43 · 1398 阅读 · 0 评论 -
CSS画三角形的两种方法
代码 <style> /* 第一种 */ div:first-child { width: 100px; height: 100px; background: linear-gradient(45deg, red 50%, transparent 50%); } div:nth-child(2) { /* 和上面的三角形分隔开 */ margin-top: 50px; /* 第二种 */原创 2020-08-12 13:16:25 · 790 阅读 · 0 评论 -
CSS居中的几种实现
1、定位 div { position: absolute; left: 50%; top: 50%; /* 用margin不好控制,如果长款变了,margin也要变 */ /* margin-left: -100px; margin-top: -100px; */ /* 还可以用这个属性来达到动态改变位置(相当于动态margin,是动画里面的一个属性) */ transform: translate(原创 2020-08-11 10:21:38 · 143 阅读 · 0 评论