随笔分类 -  css3

10.canvas
摘要：1.基础配置： （1）固定语句： var canvas = document.getElementById("canvas1"); //定义画布 var context = canvas.getContext("2d"); //设置绘图环境为2d（2）设置canvas的样式 context.line 阅读全文
posted @ 2019-11-04 11:09 cjl2019 阅读(165) 评论(0) 推荐(0)
9.变形、动画
摘要：1.变形：transform (1) translate(x,y)：平移 translateX(x)：沿X轴平移 translateY(y)：沿y轴平移 <img src="../../assets/imgs/img3.jpg" style="transform:translate(20px,15p 阅读全文
posted @ 2019-10-22 18:33 cjl2019 阅读(560) 评论(0) 推荐(0)
8.鼠标样式、滤镜
摘要：1.cursor：鼠标样式 2.filter：滤镜 阅读全文
posted @ 2019-10-21 17:38 cjl2019 阅读(295) 评论(0) 推荐(0)
7.定位：position、浮动：float
摘要：1.定位：position (1) position：定位 · static：默认值（没有定位） · relative：相对定位。脱离文档流，但原来的位置保留 · absolute：绝对定位。完全脱离文档流，原来的位置不会被保留 1.绝对定位是相对于最近有定位属性的父元素进行定位 2.如果往上没有找 阅读全文
posted @ 2019-10-21 17:03 cjl2019 阅读(217) 评论(0) 推荐(0)
6.盒模型：margin/padding/border/box-sizing
摘要：(1) margin/padding：外边距/内边距 · margin-top/padding-top · margin-right/padding-right · margin-bottom/padding-bottom · margin-left/padding-left margin:* 同时 阅读全文
posted @ 2019-10-15 11:36 cjl2019 阅读(143) 评论(0) 推荐(0)
5.背景：background
摘要：(1) background-color：背景颜色(2) background-image：url(' ') 把图像设置为背景(3) background-repeat：设置背景图像如何重复 · no-repeat：不重复 · repeat-x： 沿着x方向重复(4) background-posi 阅读全文
posted @ 2019-10-12 17:37 cjl2019 阅读(723) 评论(0) 推荐(0)
4.文本：text
摘要：(1) color：颜色 <p style="color:red;">更改文字颜色</p> (2) line-height：行高 <p style="line-height:4em;">更改行高</p> (3) text-align：文本水平对齐方式 · left： 默认值(对齐父元素基线) · r 阅读全文
posted @ 2019-10-12 17:34 cjl2019 阅读(280) 评论(0) 推荐(0)
3.文字：font
摘要：(1) font-size：大小 · 通常使用px、em、rem、百分比为单位设置大小 · xx-small、x-small、small、medium、large、x-large、xx-large，默认medium · smaller：设置为比父元素更小的尺寸 · larger： 设置为比父元素更大 阅读全文
posted @ 2019-10-11 11:42 cjl2019 阅读(210) 评论(0) 推荐(0)
2.选择器
摘要：1.常用选择器 //1.通用选择器 *{color: red;} //元素选择器 p{color: red;} //类选择器 .class{color: red;} //id选择器 #class{color: red;} 2.关系选择器 //后代选择器：选择ul里面所有的元素，包括li里面的子元素 阅读全文
posted @ 2019-10-11 11:37 cjl2019 阅读(320) 评论(0) 推荐(0)
1.css基础
摘要：1.块级元素、行级元素、行内块级元素 名称 关键代码 效果 （1）块级元素（div、h、p） · 可以设置宽高 · 不能和其他元素待在一行 · 当没有设置宽高时，宽度和父级宽度一样，高度由元素内容高度决定 <div>块级元素1</div> <div>块级元素2</div> （2）行级元素（span、 阅读全文
posted @ 2019-10-11 11:28 cjl2019 阅读(171) 评论(0) 推荐(0)