CSS
yaoxinsong
我正在运用自己的思维,以最简单的代码组装强大的功能。之所以做笔记是因为学的东西太多,不怎么用的东西太长时间不用就忘了。
展开
-
margin:0 auto 不起作用的原因
https://blog.csdn.net/qq_43719932/article/details/90574700块级元素的定位是绝对定位,即position:absolute。 因为margin可以理解为,规定该元素与其他元素的距离。那么就说明该元素应在文档流之中,这样才能计算auto。 块级元素应该没有给定的宽度。如width:10px 或是width:10%等 img标签 margin:0 auto失效...转载 2020-11-24 17:43:37 · 3106 阅读 · 0 评论 -
CSS3之scroll-behavior描点动画效果
scroll-behavior// https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior// 默认auto没有滚动动画效果scroll-behavior: smooth;代码示例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试</title> <原创 2020-11-14 17:11:38 · 447 阅读 · 0 评论 -
网站收藏
web app 自适应方案总结 关键字 弹性布局之remhttps://www.cnblogs.com/breakdown/p/4231708.html原创 2020-09-10 16:40:38 · 125 阅读 · 0 评论 -
css按钮或者其他常用样式
按钮样式.btm{ color: #ffffff; background-color: #D14843; border-bottom: 1px solid #a7a1a1; border-right: 1px solid #a7a1a1; font-size: 23rpx; line-height: 50rpx; width: 110rpx; text-align: center; margin: 0 0; margin-left: auto;原创 2020-08-27 15:51:56 · 211 阅读 · 0 评论 -
css 常用样式
设置透明背景opacity:0.2; 或 background-color:rgba(220,38,38,0.2);原创 2020-08-01 20:48:15 · 119 阅读 · 0 评论 -
css如何让div水平垂直居中
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> .box{ width: 100px; height: 100px; background-color: aqua; position: absolute; top: 50%; le.原创 2020-07-30 15:37:39 · 107 阅读 · 0 评论 -
CSS3 @media 查询 和 rem像素
参考链接:https://www.runoob.com/cssref/css3-pr-mediaquery.html/** 如果文档宽度小于 300 像素则修改背景颜色(background-color):*/@media screen and (max-width: 300px) { body { background-color:lightblue; }}参考链接:https://blog.csdn.net/lvyang251314/article/det.原创 2020-07-28 17:31:20 · 261 阅读 · 0 评论 -
flex布局总结
参考链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html当给一个元素(容器)设置了display: flex的时候,那么就可以对这个元素里面的子元素进行flex布局。/** 块级元素的flex布局 */.box{ display: flex;}/** 行内元素的flex布局 */.box{ display: inline-flex;}.box{ display: -webkit-flex; /* We.原创 2020-07-24 17:57:15 · 112 阅读 · 0 评论 -
关于flex布局的积累
flex效果<body> <div id="box"> <div style="background-color: red;">a</div> <div style="background-color: yellow;">b</div> <div style="background-color: #cc0ccc;">c</div> </div></body><原创 2020-07-03 16:46:52 · 81 阅读 · 0 评论