学习笔记1"/>
CSS3学习笔记1
前言：之前自学了一些关于CSS3的知识，在学习过程中也遇到过坑，不过总算磕磕绊绊的学习完了关于CSS3的相关知识，于是最近把之前的笔记和代码整理了一下，也算是一个对CSS3知识的回顾复习吧，也希望能够对想学这方面知识的小白有所帮助。因为是各种渠道找的资料，学习的不算系统，所以知识点涵盖的不甚全面，望各位看官不吝指正批评。
CSS3简介
CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
css3现状
- 浏览器支持程度差，需要添加私有前缀
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
CSS3新增选择器
1.属性选择器新增
- E[属性名^=值]：从头去匹配这个‘属性 = 对应值’的E元素
- E[属性名$=值]：从尾去匹配这个‘属性 = 对应值’的E元素
- E[属性名*=值]：从任意位置去匹配这个‘属性 = 对应值’的E元素
- E[属性名|=值]：匹配具备该属性的元素，并且属性值以对应值开头并紧接着“-”，如果该属性的属性值仅有匹配值，也能匹配到。
2.伪类选择器
- E：first-child 找到第一个孩子为E的元素
- E：last-child 找到最后一个孩子为E的元素
- E：nth-child（N）找到第N个孩子为E的元素，N以1开始
- E：nth-child（odd）匹配奇数的孩子为E的元素
- E：nth-child（even）匹配偶数的孩子为E的元素
- E：nth-child（3n+1）匹配第3n+1个孩子为E的元素，n从0开始
:nth-of-type使用方法与:nth-child类似。
3.其他选择器
- input:focus{} => 选择获取焦点的表单
- Input:checked{} => 选择被选中的checkbox表单
- input:enabled{} => 选择可操控的表单元素
- input:disabled{} => 选择不可操控的表单
- E:target{} => 选择通过锚点跳转的当前E元素
- E:empty{} => 选择没有子节点的E元素包括文本节点（基本不用）
伪元素before after
作用：渲染一个虚拟的标签插入到当前元素的内部前面或后面
总结：
- 伪元素默认是行内元素，我们可以进行转换，在实践中，我们常用来模拟装饰标签
- 伪元素是虚拟的，不能通过js去获取，但可以用类样式进行覆盖
- 清除浮动的底层原理，就是通过伪元素去清除浮动，节约DOM内存
- content不能省略，即便里面没有内容
- 当伪类需要配合iconfont去使用的话需要打开iconfont.css 拿到content里面对应的值
- 当伪元素需要hover的效果的时候不能直接hover 需要借助于父级 写法：父级：hover：伪元素
圆角 border-radius
实现元素的圆角化，使用方式与border、padding和margin类似，可以合写，也可以单独设置。
- 一个值设置的是盒子的四个角的水平和垂直半径
- 每个角都可以单独进行设置 其取值顺序是左上 右上 右下 左下顺时针设置
- 可以简写 简写的逻辑跟padding和margin一样
- 单位支持像素，和百分比（参照的是宽度和高度）
- 可以用 水平半径/垂直半径 去单独控制半径 并且每一个半径都可以单独控制
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>dcocument</title> <style> ul{margin:0;padding:0;} li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;} .test .one{border-radius:10px;} .test .two{border-radius:10px 20px;} .test .three{border-radius:10px 20px 30px;} .test .four{border-radius:10px 20px 30px 40px;} .test2 .one{border-radius:10px/5px;} .test2 .two{border-radius:10px 20px/5px 10px;} .test2 .three{border-radius:10px 20px 30px/5px 10px 15px;} .test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;} </style> </head> <body> <h2>水平与垂直半径相同时：</h2> <ul class="test"> <li class="one">提供1个参数<br />border-radius:10px;</li> <li class="two">提供2个参数<br />border-radius:10px 20px;</li> <li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li> <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li> </ul> <h2>水平与垂直半径不同时：</h2> <ul class="test2"> <li class="one">提供1个参数<br />border-radius:10px/5px;</li> <li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li> <li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li> <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li> </ul> </body> </html>
阴影box-shadow
语法 box-shadow：水平偏移 垂直偏移 模糊大小 阴影大小 颜色 阴影
- 第一个值 ：Npx 阴影向水平方向偏移N个像素 正数往右 负数往左
- 第二个值 ：Npx 阴影向垂直方向偏移N个像素 正数往下 负数往上
- 第三个值 ：px 模糊大小
- 第四个值 ：px 阴影尺寸
- 第五个值 ：颜色 默认值是黑色
- 第六个参数： 内外阴影 默认是外阴影 内阴影是inset
- 阴影可以写多个，中间用逗号隔开
- 阴影可以简写，但是需要注意有一些值需要补0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; background-color: green; margin: 10px auto; } /* 第一个值 ：Npx 阴影向水平方向偏移N个像素 正数往右 负数往左 */ div:nth-child(1){ box-shadow: -10px 0; } /* 第二个值 ：Npx 阴影向垂直方向偏移N个像素 正数往下 负数往上 */ div:nth-child(2){ box-shadow: 0px -10px; } div:nth-child(3){ box-shadow: 10px 10px; } /* 第三个值 ：羽化大小 （模糊的大小） */ div:nth-child(4){ box-shadow: 10px 10px 50px; } /* 第四个值 ：阴影尺寸 */ div:nth-child(5){ box-shadow: 0px 0px 10px 5px; } /* 第五个值 ：颜色 默认值是黑色 */ div:nth-child(6){ box-shadow: 0px 0px 10px 5px rgba(100,100,100,0.5); } /* 第六个值 内外阴影 默认是外阴影 内阴影是inset */ div:nth-child(7){ box-shadow: 0px 0px 10px 5px red inset; } /* 阴影可以写多组 用逗号隔开*/ div:nth-child(8){ box-shadow: 0px 0px 10px 5px red inset,5px 5px 5px 5px pink,10px 10px 5px 5px blue; } div:nth-child(9){ box-shadow: 5px 5px red; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
边框图片border-image（了解，有兼容性问题，同时效果难做）
以九宫格的方式来切割图片，然后把每部分图片平铺作为边框。
值说明：
- border-image-source:url('border.png'); 图片路径
- border-image-slice:26;图片切割，不要带单位，遵从九宫格式切图法（上下左右各来一刀）
- border-image-repeat:round或者stretch或者repeat; round没有瑕疵，stretch默认拉伸，repeat 平铺（可能有瑕疵）
- 简写：border-image:url('border.png') 26 round;
背景图片系列（重点）
1.背景图片的基准点
background-origin：值
- border-box:忽略边框 直接从边框的起始 0 ，0点平铺
- padding-box:默认值，忽略padding 直接从padding的起始 0 ，0点平铺
- content-box:从内容部分开始平铺 跟padding有关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 800px; height: 800px; border: 10px dashed #000; background: url(image/heihei.jpg) 0 0 no-repeat; /* padding-box 默认取值，从padding的起始点开始平铺 padding的大小不会产生影响*/ /* border-box 从border的起始点开始平铺 border的大小不会产生影响 */ /* content-box 从内容的起始点开始平铺，会留出padding的位置 */ background-origin: content-box; padding: 20px; } </style> </head> <body> <div class="box"></div> </body> </html>
2.多重背景
背景图片之间用逗号隔开，可以写多组，最先渲染的图片有可能会遮住后面渲染的图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 800px; height: 800px; border: 10px dashed #000; background: url(image/heihei.jpg) 0 0 no-repeat,url(image/hehe.png) right bottom no-repeat,url(image/11051156_1536_864.jpg) no-repeat; } </style> </head> <body> <div class="box"></div> </body> </html>
3.背景大小
background-size:值
- 当只有一个值的情况下，宽度实现拉伸，并且高度会保持等比例，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽度
- 当有两个值的情况下，宽度和高度会分别拉伸到对应的值，可能会变形，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽度
- contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘，则停止变化，（宽度或高度满足一个即可）
- 在contain的基础上保证不留白，这就是cover的效果（宽度和高度都需要满足）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 800px; height: 800px; border: 10px dashed #000; background: url(image/Aatrox_1.jpg) 0 0 no-repeat; /* 一个值的情况下，宽度会进行拉伸，高度会保持等比例 */ /* 两个值的情况下，宽度和高度都会拉伸，可能会产生变形 */ /* 可以接受百分比 百分比参照的是盒子的宽和高 */ /* contain 当图片的宽度或者是高度有一个达到了最大值，整体停止缩放 可能会带来留白呀*/ /* cover 在contain的基础上，保持不留白，继续放大，知道另外一个边也得到最大值 */ background-size:cover; /* 预告： background-size会在自适应页面里面用到，在全屏轮播图里面用到 */ } </style> </head> <body> <div class="box"></div> </body> </html>
盒子内减box-sizing
之前我们的盒子的实际宽度是 实际宽度 = width + padding + border，而内减属性会自动帮我们减去padding和border值 ，所以用了内减的盒子实际宽度就等于width，至于padding和border的值会自动被width内减掉。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; background-color: yellowgreen; margin: 10px auto; } div:nth-child(2){ padding: 10px; } div:nth-child(3){ padding: 10px; border: 10px solid hotpink; } div:nth-child(4){ padding: 10px; border: 10px solid hotpink; box-sizing: border-box; } </style> </head> <body> <!-- 一个盒子真正的实际宽度包括 Border + padding + width 在css3中，可以借助于border-sizing去实现盒子自动内减，有两个值 broder-box content-box broder-box 内减掉边框和padding content-box 是默认值 该是多少就是多少 --> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </body> </html>
渐变
1.线性渐变
background:-webkit-linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 300px; height: 300px; border: 1px solid #000; margin: 10px auto; /* 线性渐变 语法：background:linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置); （1）需要添加私有前缀 （2）第一个参数，起始位置 可以接受方位名词 也可以是一个点 也可以是deg 角度 控制的是渐变线的角度 正值是逆时针，负值是顺时针 （3）颜色 可以是任意颜色 */ background: -webkit-linear-gradient(45deg,red 20%,green 60%,blue); } </style> </head> <body> <div class="box"></div> </body> </html>
2.径向渐变
background:-webkit-radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 300px; height: 300px; border: 1px solid #000; margin: 10px auto; /* 径向渐变 语法：background:radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置); （1）需要添加私有前缀 （2）第一个参数，起始位置 可以接受方位名词 也可以是一个点 也可以是像素 不接受deg （3）颜色 可以是任意颜色 */ background: -webkit-radial-gradient(150px 150px,red 20%,green 60%,blue 10%); } </style> </head> <body> <div class="box"></div> </body> </html>
总结：
- 两种渐变的参数都是一样的 ，起始位置都接受方位名词
- 线性渐变的起始位置还能接受deg 角度 径向渐变不能接受deg但是接受px
- 需要添加私有前缀
- 颜色位置的取值遵守递增的关系
私有前缀
作用：兼容低版本的一些高级浏览器，或者一些特定的css3属性需要添加私有前缀才起作用 每一条css3属性合理来说都需要添加对应浏览器的前缀，以保证其兼容性
- 谷歌 苹果：-webkit
- 火狐：-moz-
- IE：-ms-
- o：-o-
注意：在手机端，一般来说只需要写一个-webkit-（针对国内的绝大部分手机端）
添加的位置：大部分都是直接添加到最前面，css2没有的属性都是添加在最前面的，有一些是css2就有的属性是添加在后面的（例如：background：-webkit-linear-gradient（））
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } </style> </head> <body> <div></div> </body> </html>
转载于:.html
更多推荐
CSS3学习笔记1
发布评论