随笔分类 - CSS
摘要：1.变量 变量声明：变量名使用 "--" 为前缀，且区分大小写 /* 全局变量 */ :root{ --bgColor: red; } /* 布局变量 */ p{ --bgColor2: blue; } 引用变量：使用var()方法进行引用 .box{ height: 200px; backgrou
阅读全文
摘要：1.前言 网格布局（Grid）是最强大的 CSS 布局方案，它将网页区域划分成一个个网格，做出各种各样的布局 网格通过指定列数和行数来控制，除了可以指定列宽和行高，还可以指定每个格子的跨列和跨行展示 2.基本使用 在父容器中设置 display: grid，然后设定列数和行数 grid-templa
阅读全文
摘要：1.基本使用 相关属性：使用 "border-radius" 属性来控制圆角的大小，默认值为0，即没有圆角 属性值：可以设定具体的像素值，也可以是百分比 .box { width: 300px; height: 300px; background-color: #336699; /* border-
阅读全文
摘要：1.状态伪类 定义：根据元素的状态定义不同的样式，常用于a链接（未访问/已访问/鼠标划过/已选中），表单元素（失去焦点/获取焦点/禁用） a:link {color:#FF0000;} /* 链接未访问时的颜色 */ a:visited {color:#00FF00;} /* 已访问过的链接的颜色
阅读全文
摘要：1.先说说css的坐标系： x轴的正方向就是水平向右的方向 y轴的正方向就是垂直向下的方向 z轴的正方向就是屏幕到用户的方向 2.位移 说明：位移是转换属性中的一个值，包含2d与3d 属性值 说明 translate(x,y) 2d位移 translateX(n) 2d位移，设置x轴方向的位移 tr
阅读全文
摘要：1.背景图大小(background-size) 这个属性设置单张背景图的大小，默认是原图的大小 当同时指定宽高时，会造成图片失真，如果要保持宽高比，可以使用 auto 字段让宽或者高自适应 值类型 示例 说明 像素 50px 50px - 百分比 50% 50% 这个比例是基本容器本身，而不是原图
阅读全文
摘要：1.CSS过渡 含义：在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果，希望它以动画的形式将样式转变的过程展现出来，而这个过程
阅读全文
摘要：1.Flex容器 用途：flex布局可以让块级子元素排列在同一行，同时控制其换行，对其方式等 基本用法：设置父容器为 display: flex（如果想要容器以行内元素展示，则将其设定为inline-flex） 兼容性：IE10部分支持2012，Android4.1/4.2-4.3部分支持2009
阅读全文
摘要：1.less的介绍 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 官方文档 2.less需要编译才能被浏览器解析 浏览器本身只能解析css文件，对于less无法解析，需呀解析后留浏览器才能解析 在线解析：引入专门的js插
阅读全文
摘要：1.文本对其 text-align 作用：这个属性能控制标签内文本水平方向的对齐方式，默认左对齐 注意：这个属性会被子元素继承 示例 <!DOCTYPE html> <html> <body> <div class="box" style="text-align:center"> div的文本 </
阅读全文
摘要：1.基本值 display属性共有4个值： 属性值 说明 blcok 块级元素，独占一行 inline-block 行内块级元素，宽度由内容撑开，可设定宽度 inline 行内元素，宽度由内容撑开，不支持设定宽度 none 隐藏不展示，不占据空间 2.块级元素 块级元素会默认占满父元素的宽度且独占一
阅读全文
摘要：1.宽高百分比 元素宽度/高度百分比是基于父级元素的width/height，不包含padding，border 注意：高度百分比一定要求父元素有设置height属性，只设置 min-height 虽然父元素会有高度，单子元素使用百分比无法继承 .box { width: 400px; height
阅读全文
摘要：1.基本的浮动布局 浮动布局可以让块级元素自左向右（或自右向左）的排列在同一行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{ padding: 0; margin
阅读全文
