随笔分类 -  css

栅格布局
摘要:<section class="layout grid"> <article class="left-center-right"> <div class="left">我是 left</div> <div class="center"> <h1>网格布局解决方案</h1>我是 center </di 阅读全文

posted @ 2022-06-20 22:25 In-6026 阅读(40) 评论(0) 推荐(0)

字体渐变
摘要:background-image: -webkit-linear-gradient(left, #2af598, #009efd); //开始方向,渐变颜色 -webkit-background-clip: text; //以盒子内的文字作为裁剪区域向外裁剪,文字之外的区域都将被裁剪掉。 -webk 阅读全文

posted @ 2022-05-26 19:05 In-6026 阅读(19) 评论(0) 推荐(0)

svg教程
摘要:https://www.w3school.com.cn/svg/svg_rect.asp 阅读全文

posted @ 2022-03-11 22:35 In-6026 阅读(27) 评论(0) 推荐(0)

2D/3D——transform
摘要:###transform 定义旋转的 语法: .mydiv{ transform: rotate3d(30deg, 45deg, 100deg); } 值 描述 none 定义不进行转换。 translate(x,y) 定义 2D 平移。(10px, 10px)就是把元素右移10px,再下移10px 阅读全文

posted @ 2022-03-11 12:31 In-6026 阅读(43) 评论(0) 推荐(0)

动画
摘要:##transition 语法: transition: property duration timing-function delay; //要设置过渡的css,这个要过渡多长时间完成,过渡的速度(均匀/变速..),动画延迟 property 最方便就是all,否则就写css要变的属性,多属性的话 阅读全文

posted @ 2022-03-11 02:12 In-6026 阅读(47) 评论(0) 推荐(0)

引入——@import
摘要:####只能放在第一行 或者 @charset 之后 @import "navigation.css"; /* 使用字符串 */ 或者 @import url("navigation.css"); /* 使用 url 地址 */ 在根据设备不同,写多套代码的时候可能有用 阅读全文

posted @ 2022-03-11 00:44 In-6026 阅读(34) 评论(0) 推荐(0)

垂直定位——让人迷惑的vertical-align
摘要:###语法 vertical-align: baseline|sub...; 他这个基线比较迷惑,要是有谁会的话推荐一下,谢谢(22-03-17) 值 描述 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最 阅读全文

posted @ 2022-03-11 00:40 In-6026 阅读(77) 评论(0) 推荐(0)

弹性盒子——(flex,align-xxx,justify-content)样式,定位,换行
摘要:###前提 把display: flex的div容器叫做flexBox,被浮动的叫做flexItem ###样式————宽度——flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写 语法:felx: grow|shrink|basis ; //任选一个而 阅读全文

posted @ 2022-03-10 22:05 In-6026 阅读(201) 评论(0) 推荐(0)

列表——集大成的list-style(ol,ul,li)
摘要:###综述 list-style 简写属性在一个声明中设置所有的列表属性。 可以设置的属性: list-style-type, list-style-position, list-style-image. 可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许 阅读全文

posted @ 2022-03-10 20:40 In-6026 阅读(387) 评论(0) 推荐(0)

字体——集大成的font(倾斜,大小写,粗细,大小,行高,字体)
摘要:font 简写属性在一个声明中设置所有字体属性。 可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family" (样式 变种 粗 大小/行高 字体) font-size和font-famil 阅读全文

posted @ 2022-03-10 19:11 In-6026 阅读(474) 评论(0) 推荐(0)

背景——background-image(不止图片,还有渐变)
摘要:上节说道background-image能做的background都能做 ###综述 值 说明 url('URL') 图像的URL none 无图像背景会显示。这是默认 linear-gradient() 创建一个线性渐变的 "图像",(默认从上到下) radial-gradient() 用径向渐变 阅读全文

posted @ 2022-03-09 20:56 In-6026 阅读(157) 评论(0) 推荐(0)

背景——集大成的background
摘要:摘抄于:https://www.cnblogs.com/nostic/articles/5269066.html background 简写属性在一个声明中设置所有的背景属性。 可以设置如下属性: background-color background-position background-rep 阅读全文

posted @ 2022-03-09 20:53 In-6026 阅读(37) 评论(0) 推荐(0)

滚动条
摘要:###基操 /* 滚动条整体部分,可以设置宽度等 */ body::-webkit-scrollbar{ } /* 滚动条两端的按钮 */ body::-webkit-scrollbar-button{ } /* 外层轨道 */ body::-webkit-scrollbar-track{ } /* 阅读全文

posted @ 2022-03-09 18:47 In-6026 阅读(68) 评论(0) 推荐(0)

阴影——box-shadow
摘要:####最朴素(两条边 + 模糊):x偏移 y偏移 模糊半径 颜色是默认黑色 box-shadow: 10px 10px 10px; ####朴素(两条边 + 扩展 + 模糊 + 颜色 + 分内外):接收六个值(X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式) 名字 作用 X 阅读全文

posted @ 2022-03-09 17:14 In-6026 阅读(45) 评论(0) 推荐(0)

选择器
摘要:##权重:内联 > id > class > 元素(属性) ##属性 //全选 [attributeName] { } //带attributeName属性的div节点 div[attributeName] { } input[type="email"]{ } //div的子元素中,带attribu 阅读全文

posted @ 2022-03-04 00:53 In-6026 阅读(31) 评论(0) 推荐(0)

border-radius
摘要:https://codepen.io/in-6026/pen/ExbOqVP 最多接受8个值 对应的角的顺序是:左上,右上,右下,左下 当接收8个值时,每个角又被分为条边 border-radius: 1 2 3 4 / 5 6 7 8; 分别对应下图: 阅读全文

posted @ 2022-03-02 19:14 In-6026 阅读(43) 评论(0) 推荐(0)

菜鸟教程CSS
摘要:https://www.runoob.com/cssref/css-websafe-fonts.html 阅读全文

posted @ 2022-03-02 18:32 In-6026 阅读(19) 评论(0) 推荐(0)

单位——px,%,em,rem,vw,vh,vm,wmin,vmax
摘要:px 最常用,相对屏幕的分辨率而言的相对单位 % 一般相对父元素而言 em,rem em相对父元素的font-size rem相对根元素(html)的font-size vw,vh vw相对屏幕可视区域的宽度而言,若屏幕宽1000px则1vw=1000 / 100 = 10px vh相对屏幕可视区域 阅读全文

posted @ 2022-01-29 06:16 In-6026 阅读(311) 评论(0) 推荐(0)

图片自适应容器,避免拉伸失真
摘要:方式1 <div class="box"> <img src="#" /> </div> .box{ width: 2000px; height: 200px; overflow: hidden; border: 1px solid; } .box img { //以宽为标准,填充div,超出的高度 阅读全文

posted @ 2022-01-28 21:00 In-6026 阅读(60) 评论(0) 推荐(0)

文本超出转省略号
摘要:多行转省略 width: 100%; max-height: 60px; font-size: 13px; line-height: 20px; /*关键之处,缺一不可*/ display: -webkit-box; -webkit-line-clamp: 3; /*要在第几行处隐藏,单行超出便省略 阅读全文

posted @ 2022-01-09 00:22 In-6026 阅读(35) 评论(0) 推荐(0)

导航