随笔分类 - CSS
摘要：CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。 圆形
阅读全文
摘要：1、这是结构代码，实现两个体形盒子对称 <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> 2、这是CSS样式代码 .container { width: 400px; height: 40
阅读全文
摘要：divId 为 div 标签的 id，内容过多，会出现竖向滚动条。 <div id="divId">xxx</div> 设置滚动条样式： /* 设置滚动条的样式 */ #divId::-webkit-scrollbar{ width: 10px; box-sizing: border-box; }
阅读全文
摘要：https://blog.csdn.net/Shivy_/article/details/122361132
阅读全文
摘要：.className{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*
阅读全文
摘要：/* 弹性布局 */ .flex{ display:flex; } .flex1{ flex:1; } .flex-column { flex-direction: column; } .justify-start { justify-content: flex-start; } .justify-
阅读全文
摘要：https://blog.csdn.net/qq_38987146/article/details/122039801
阅读全文
摘要：1）.CSS3的transform:scale()可以实现按比例放大或者缩小功能。 2）.CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 3）.transition:
阅读全文
摘要：https://blog.csdn.net/u012117917/article/details/41604711
阅读全文
摘要：https://blog.csdn.net/qq_40138556/article/details/103967529
阅读全文
摘要：文章一：https://www.php.cn/css-tutorial-409768.html 一、nth-child( ) 与 nth-of-type( )的定义与用法 nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。 nth-of-type(n) : 匹配同类型中
阅读全文
摘要：Flex 布局教程：语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程：实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
阅读全文
摘要：踩坑： 1. height:calc(100vh-60); 无效 2.height:calc(100vh-60px); 无效 3.height:calc(100vh - 60px); 终于起效 总结calc()使用： 必须加上单位 必须在运算符左右用空格隔开
阅读全文
摘要：准备工作1：设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： 这段代码的几个参数解释：width = device-width：宽度等于当前设备的宽度initial-scale： 初始的缩放比例（默认设置为1.0）minimum-scale：允许用户缩
阅读全文
摘要：1、什么是媒体查询 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页
阅读全文
