导航

• 博客园
• 首页
• 新随笔
• 新文章
• 联系
• 订阅
• 管理

随笔分类 -  css

• grid
  摘要：1、grid布局 display：grid 分隔行 grid-template-rows 分格列 grid-template-columns 单位 px、%、auto、fr（份数）、minmax（最小值，最大值，先取最大值，最大值不够取最小值） 行间距 grid-row-gap：px 列间距 gri 阅读全文
  posted @ 2021-07-02 16:17 phantom_yy 阅读(51) 评论(0) 推荐(0)
• css3 3D
  摘要：1、景深（还是2d属性） 近大远小，可以加强2d，3d效果 （1）给父元素加景深 perspective：500px； 每个子元素的景深效果各不相同 （2）给子元素加景深 transform：perspective：500px； 2、3D偏移 z轴的偏移是前后移动，正直往前移动，负值往后移动 tra 阅读全文
  posted @ 2021-07-01 19:04 phantom_yy 阅读(39) 评论(0) 推荐(0)
• css3 2D属性
  摘要：1、scale设置的是2d的缩放，中心缩放，值是倍数 transform：scale（x宽度，y高度） scaleX（x宽度） scaleY（y高度） 2、translate设置的是偏移，原位置偏移，有点类似相对定位 transform：translate（x宽度，y高度），倾斜移动 transla 阅读全文
  posted @ 2021-07-01 17:48 phantom_yy 阅读(56) 评论(0) 推荐(0)
• css3动画
  摘要：animation 动画分为两步 1、第一步：定义动画 第一种：@keyframes 动画名{ 0%{} 50% 100%{} } 第二种：@keyframes 动画名{ from{} to{} } 第二种只适合动画只有初始状态和结束状态 兼容：@-webkit-keyframes 2、第二步：触发 阅读全文
  posted @ 2021-07-01 11:58 phantom_yy 阅读(47) 评论(0) 推荐(0)
• css3多列
  摘要：1、column-count：n 设置内容分为几列 2、column-gap：npx 设置列间距 3、column-rule：2px solid #000 设置分割线 4、column-span：设置标题的位置（标题单独设置） all：在所有列的上方显示 1：默认在第一列上方显示（默认值） 5、co 阅读全文
  posted @ 2021-06-30 16:53 phantom_yy 阅读(47) 评论(0) 推荐(0)
• css3渐变
  摘要：1、线性渐变 background：linear-gradient（渐变的方向，颜色1，颜色2） 渐变的方向： （1）单一方向渐变 标准模式：to bottom 从上到下渐变 兼容模式：bottom 从下到上渐变 （2）对角方向渐变 标准模式：to right bottom 从左上角到右下角 兼容模 阅读全文
  posted @ 2021-06-30 16:21 phantom_yy 阅读(116) 评论(0) 推荐(0)
• 移动端的准备工作
  摘要：1、meta标签的设置 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximun-scale=1.0,user-scalable=no"> width=device-width：宽度等于当前设备的宽度 i 阅读全文
  posted @ 2021-06-30 12:00 phantom_yy 阅读(47) 评论(0) 推荐(0)
• 后台管理系统页面布局
  摘要：一、自适应两栏布局 left盒子加float：left right盒子设置overflow：hidden 原理：BFC布局规则，浮动元素跟BFC区域不会重叠 二、file上传文件框，样式不能改，用label包裹 <label for="btn"> <input type="file" name="" 阅读全文
  posted @ 2021-06-22 19:00 phantom_yy 阅读(584) 评论(0) 推荐(0)
• css回顾2
  摘要：一、自适应 1、宽度自适应 块元素不设置宽度或是块元素设置宽度100%，块元素的宽度占满整个父级的宽度。 （1）不设置width（块元素是占位置，元素类型没有受影响） （2）width：100%（元素类型受影响，脱离文档流，设置浮动、绝对定位、固定定位） calc（）可以动态计算数值 （1）使用ca 阅读全文
  posted @ 2021-06-21 17:51 phantom_yy 阅读(44) 评论(0) 推荐(0)
• css回顾
  摘要：一、包含选择器 1、父子选择器（通过父元素选择子元素，只能往下选择器一层，只能是父子，不能隔层） 父元素>子元素 2、后代选择器（只要满足包裹关系都能选中） 祖先 后代 二、伪类选择器 a:link 访问前的样式 a:visited 访问后的样式 a:hover 鼠标移入的样式（所有标签都能设置） 阅读全文
  posted @ 2021-06-03 14:50 phantom_yy 阅读(76) 评论(0) 推荐(0)