随笔分类 -  css

伪类和伪元素
摘要：相同处：伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。 不同处：伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。 伪类： 伪类是基于元素的特征而不是他们的 阅读全文
posted @ 2023-04-13 10:10 富言杰 阅读(55) 评论(0) 推荐(0)
transform2d转换、transition过渡、animation动画效果、@keyframes定义动画关键帧
摘要：transform:translate( 0 , 0 ); -ms-transform:translate( 0 , 0 ); /* IE 9 */ -webkit-transform:translate( 0 , 0 ); /* Safari and Chrome */ // 定义 2D 转换。 阅读全文
posted @ 2023-02-13 16:27 富言杰 阅读(42) 评论(0) 推荐(0)
媒体查询。用来设置不同设备自适应大小
摘要：.div{ font-size:16px; } // 媒体属性要在原样式表下方写 @media screen and(max-width: 1200px) { // 当宽度小于1200像素的时候。 .div{ font-size:20px; } } @media screen and(min-wid 阅读全文
posted @ 2023-02-09 13:35 富言杰 阅读(54) 评论(0) 推荐(0)
let、const、var的区别
摘要：（1）块级作用域： 块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题： 内层变量可能覆盖外层变量 用来计数的循环变量泄露为全局变量 （2）变量提升： var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用， 阅读全文
posted @ 2023-02-09 13:26 富言杰 阅读(28) 评论(0) 推荐(0)
鼠标悬浮变小手样式
摘要：.div{ cursor:pointer; // 悬浮变小手} 阅读全文
posted @ 2023-02-09 13:26 富言杰 阅读(107) 评论(0) 推荐(0)
浏览器宽度高度
摘要：高度： winHeight = window.innerHeight // 获取浏览器高度 let winHeight:any = 0; if(window.innerHeight){ winHeight = window.innerHeight; } 宽度 winWidth = window.in 阅读全文
posted @ 2023-02-09 13:26 富言杰 阅读(26) 评论(0) 推荐(0)
2种透明度以及背景色的使用
摘要：1.全部透明 background-color: red; opacity: 0.7; // 透明度0.7 所有颜色和文字都透明 2.只背景色透明 background-color: rgba($color: #000000, $alpha: 0.7); // 只让颜色有透明度 阅读全文
posted @ 2023-02-09 13:26 富言杰 阅读(58) 评论(0) 推荐(0)
display和浮动
摘要：display:block; // 块元素 display: inline-block //行内和块元素 浮动 float: left; 清除浮动 clear: both; 两侧不允许有浮动 解决父级元素塌陷问题 1、增加父级元素的高度 #father{ border: solid red 1px; 阅读全文
posted @ 2022-12-08 15:17 富言杰 阅读(24) 评论(0) 推荐(0)
css3 盒子阴影box-shadow
摘要：width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 100px 100px #888888; // x坐标水平方向偏移量 y坐标水平方向偏移量 阴影模糊半径 阴影扩展长度 阴影颜色常用盒模型样式 box- 阅读全文
posted @ 2022-12-08 15:17 富言杰 阅读(24) 评论(0) 推荐(0)
定位
摘要：1.相对定位：相对于原来自己的位置 定位偏移之后，原来文档流的位置还会被占位。 position: relative; 2.绝对定位： （1）父级元素没有定位的时候，是相对于浏览器做绝对定位。 （2）父级元素有相对定位的时候，是相对于父级元素定位的。 （3）子元素在父元素范围内移动。 定位偏移之后， 阅读全文
posted @ 2022-12-08 15:16 富言杰 阅读(105) 评论(0) 推荐(0)
选择器
摘要：id选择器： #myId{ color: red; } // id选择器 类选择器： .myClass{ color: red; } // 类选择器 标签选择器： p{color: red;} // 标签选择器 选择器优先级: id选择器>类选择器>标签选择器 后代选择器： body p{ back 阅读全文
posted @ 2022-12-05 17:44 富言杰 阅读(43) 评论(0) 推荐(0)
flex布局和6种容器属性的使用
摘要：flex布局 display : flex; // 设置flex布局 flex布局容器中的6种属性： 1.flex-direction 2.flex-warp 3.flex-flow 4.justify-content 5.align-items 6.align-content flex-direc 阅读全文
posted @ 2022-12-05 16:36 富言杰 阅读(113) 评论(0) 推荐(0)
css超出部分省略
摘要：1.单行： .div1{ width:100px; overflow: hidden; // 内容会被修减，并且其余内容是不可见 text-overflow: ellipsis; // 显示省略号来代替被修减文本 white-space: nowrap; //文本不换行 } 2.多行： .div2{ 阅读全文
posted @ 2022-12-05 15:30 富言杰 阅读(435) 评论(0) 推荐(0)
伪类选择器，选择元素
摘要：nth-child（n）用法： 1、nth-child(3) 表示选择列表中的第3个标签，代码如下： li:nth-child(3){background:#fff} 2、nth-child(2n) 表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签，代码如下： li:nth-child( 阅读全文
posted @ 2022-12-05 15:15 富言杰 阅读(45) 评论(0) 推荐(0)
css3动画animate效果一览
摘要：<div hs-animate-in-class="animate__animated animate__${下面的动画库}"></div> 阅读全文
posted @ 2022-12-05 14:54 富言杰 阅读(47) 评论(0) 推荐(0)