Web前端系统学习——课程笔记（章节10-12）

Web前端系统学习——课程笔记

课程链接：WEB前端系统学习 - 网易云课堂

参考教程：菜鸟教程

笔记链接：Web-Learn-Note

---

• 章节10 CSS3常用图片处理
• 章节11 CSS盒阴影及文字操作
• 章节12 媒体查询

---

章节10 CSS3常用图片处理

• 课时37 圆角 多背景 14:19

  border-radius 圆角
  	分为水平半径和垂直半径 详情请见 img文件夹中radius.png图
  
  	水平半径和垂直半径中间用 / 分开 
  	/左边代表水平半径
  	/右边代表垂直半径
  
  多背景
  	在CSS3中，可以设置多背景，中间通过 ， 隔开，不只可以设置基础样式，还可以设置背景尺寸，同样用 ， 隔开
  

• 课时38 背景尺寸 19:41

  背景大小
  	background-size 设置背景图像的大小
  		1.具体的数值
  			100px 200px 第一个值表示X轴的大小（宽度） 第二个值表示Y轴的大小（高度）如果只设置了一个值，表示X轴的背景大小（宽度），第二个值会自动缩放或者拉伸
  		2.百分比
  			80% 100% 第一个值表示X轴针对自己本身盒子的宽度的比例（宽度） 第二个值表示Y轴针对自己本身盒子高度的比例的大小（高度）如果只设置了一个值，表示X轴针对自己本身盒子的宽度的比例（宽度），第二个值会自动缩放或者拉伸
  		3.cover
  			把背景图尽量扩展至最大，使背景图覆盖整个盒子区域，至于X轴和Y轴是否超出，不予考虑
  		4.contain
  			把背景图尽量扩展至最大，使背景图尽量显示完整，当X轴或者Y轴其中之一贴近盒子边缘，另一方停下来，至于X轴和Y轴是否有填不满的情况，不予考虑
  
  在CSS3中，所有的颜色值都可以用rgba的值来写，方法：border:50px solid rgba(255,255,255,0.9);
  a表示透明度，数值在0~1之间，数值越大，越不透明
  

• 课时39 背景裁切 浏览器内核前缀 背景裁切 22:44

  背景裁切：background-clip   
  	1.border-box
  		从边框开始显示背景 
  	2.padding-box
  		从padding区域开始显示背景
  	3.content-box
  		从内容区域显示背景
  	4.text       火狐不支持 ie9,10不支持
  		从文本区域显示背景
  
  			温馨提示：
  				需要rgba的配合 （需要rgba的透明度进行配合）
  
  浏览器内核前缀
  w3c组织 
      -webkit-transition: 1s; chrome safari .... 
      -moz-transition: 1s;    火狐
      -ms-transition: 1s;     ie 360 
      -o-transition: 1s;      Opera
      transition: 1s;         w3c标准样式
  

• 课时40 线型渐变 20:24

• 课时41 线型渐变笔记 16:56

  线型渐变 ie9以下不支持 渐变属于背景下的一个属性
  
      方法 linear-gradient();
      写法：
          比如：background: linear-gradient(90deg,red,yellow,green,blue);
      括号里的第一个值，是角度
          第一个值可以模糊的值，也可以是具体的数值
              模糊的值：
                  to right
                  to left 
                  to top
                  to bottom
  
              具体的角度数值
                  
                  角度是指水平线和渐变线之间的角度，按逆时针方向计算
                      比如：
                          标准
                              0deg  从下到上
                              90deg 从左到右
  
                          非标准
                              0deg 从左到右
                              90deg 从下到上
  
                          标准和非标准的换算公式
                              90 - x  = y
  
                              x为标准角度
                              y为非标准角度
                  （温馨提示：参考图：渐变角度参考图）
          从第二个值开始是颜色值，可以通过具体的数值确定颜色值渐变的区域，比如
          background: linear-gradient(90deg,
              red 100px,
              yellow 180px,
              green 280px,
              blue
          );
          （温馨提示：见图：颜色值区域参考图）
  

章节11 CSS盒阴影及文字操作

• 课时42 径向渐变 重复渐变 19:54

  径向渐变 ie9以下不支持
      渐变都是背景下一个属性
          background: radial-gradient(at center,red,yellow,blue);
      径向渐变是从圆心往进行渐变
          括号里的第一个值，是圆心位置
              可以使模糊的值，也可以是具体的数值
                  模糊的值
                      at left
                      at center
                      at right
                      at top
                      at bottom
                  具体的数值
                      at 100px 200px
                          100px为X轴的偏移量
                          200px为Y轴的偏移量
          从第二个值开始，是颜色值 ，颜色值可以无限的写	
              颜色值，可以通过具体的数值来规定，渐变区域或者范围
                  具体的数值可以是
                      1，100px
                      2，百分比
  
  重复渐变
  background: repeating-linear-gradient(to right,red 10%,yellow 20%,blue 30%);
  background: repeating-radial-gradient(at center,red 10%,yellow 20%,blue 30%);                
  

• 课时43 盒阴影 文字阴影 18:36

  盒阴影
      box-shadow
          第一个值：默认省略或者inset 可以省略，省略即为默认
              处理盒子阴影在盒子的里面还是外面
  
              默认省略 ，就是外面
              inset   就是里面
          第二个值 ：
              具体的数值 可以是正数，也可以是负数 为盒子阴影X轴的大小
  
          第三个值 ：
              具体的数值 可以是正数，也可以是负数 为盒子阴影Y轴的大小
  
          第四个值 ：
              具体的数值 可以是正数，不可以是负数 可以省略 省略之后 ，没有模糊面积 为盒子阴影模糊面积
  
          第五个值 ：具体的颜色值，英文单词 十六进制 rgb rgba
  
  盒阴影值可以不断的添加，中间用逗号隔开
  
  文字阴影
  	第一个值 ：
  		具体的数值 可以是正数，也可以是负数 为文字阴影X轴的大小
  
  	第二个值 ：
  		具体的数值 可以是正数，也可以是负数 为文字阴影Y轴的大小
  
  	第三个值 ：
  		具体的数值 可以是正数，不可以是负数 可以省略 省略之后 ，没有模糊面积 为文字阴影模糊面积
  
  	第四个值 ：具体的颜色值，英文单词 十六进制 rgb rgba
  
  	文字阴影值可以不断的添加，中间用逗号隔开
  

• 课时44 蒙版 倒影 19:48

  蒙版
      	目前只有-webkit-内核的浏览器支持，其他不支持
      	需要PNG的透明度遮罩
      	和背景设置一样，可以设置多个png为蒙版 
  
  倒影只有-webkit-内核浏览器支持
  	-webkit-box-reflect: below;
  
  	第一个值
  		控制倒影出现的位置
  			上 above
  			下 below
  			左 left
  			右 right
  	第二个值
  		倒影和本体之间间隙
  			为具体的数值： 比如 10px
  			-webkit-box-reflect: below 10px;
  
  	第三个值
  		可以透明度的渐变，也可以一个png透明的图片链接
  			透明度的渐变
  				-webkit-box-reflect:below 10px linear-gradient(to top,
  					rgba(255,255,255,1) 10px,
  					rgba(255,255,255,0.3) 80px,
  					rgba(255,255,255,0) 200px,
  					rgba(255,255,255,0),
  					rgba(255,255,255,0)
  				);					
  			png透明的图片链接
  				-webkit-box-reflect:left 10px url("img/7.png");
  

章节12 媒体查询

• 课时45 媒体查询 13:35

  例子：
  @media screen and (max-width: 460px){
  	div {
  		width:300px;
  		height:600px;
  		border:30px solid yellow;
  		background: #000;
  	}
  }
  当屏幕发生变化，根据设置的最大值宽度或者最小值宽度时，读取大括号中的代码 比如：以下
  
  @media screen and (当屏幕发生变化，最大宽度到达某一个值的时候 比如：max-width:960px){
  	会执行以下代码
  	div {
  		width:300px;
  		height:600px;
  		border:30px solid yellow;
  		background: #000;
  	}
  }
  

• 课时46 viewport 布局百分比 18:47

  
  
  width :控制viewport的大小 ，可以制定一个数值或一个特殊的值
  	如：device-width就是设备的宽度 （单位为缩放100%的CSS像素）
  
  initial-scale：
  	初始缩放，就是页面开始缩放的程度，是一个浮点数
  		例如：initial-scale=1.0 ，页面开始的时候，就是1：1的比例
  maximum-scale=1.0 , minimum-scale=1.0
  	最大缩放和最小缩放，允许放大或缩小多少倍
  
  user-scalable=no
  	是否允许用户调整页面
  	如果为YES 用户可以改变
  	如果为NO 用户不可以改变
  	如果为NO ，用户不能缩放，maximum-scale=1.0 , minimum-scale=1.0 会失效
  
  响应式布局
      百分比布局
  
          布局百分比
              width
              padding-left
              padding-right
              margin-left
              margin-right
              left
              right
  
              需要牢记的公式
  
                  目标元素的宽度 / 父级元素的宽度 = 百分比宽度
              温馨提示：
                  高度的增加或者减少需要配合媒体查询
                      高度：
                          height
                          padding-top
                          padding-bottom
                          margin-top
                          margin-bottom
                          top
                          bottom 
                      @media screen and () {}
  
          图片百分比
              图片的宽度和高度比较弹性化
              图片如果不设置宽度和高度，会原始显示，当设置了图片的宽度百分比时，宽度发生变化，高度也会等比缩放
  
              温馨提示，图片有时候太大，会超出，最好设置一个上限值，max-width 或者 max-height
  
          文字百分比
              em 和 rem 
              em父级的文字大小的倍数 父级大小是多少，决定子级文字em的大小
  
              rem 就是针对HTML文字字体大小
  
          一般响应式布局都用rem 通过媒体查询改变html的文字大小，就可以整体改变所有的页面中的文字大小
  

• 课时47 图片文字百分比 设备宽度自定义 23:19

  图片的宽度和高度比较弹性化
  	图片如果不设置宽度和高度，会原始显示，当设置了图片的宽度百分比时，宽度发生变化，高度也会等比缩放
  
  	温馨提示，图片有时候太大，会超出，最好设置一个上限值，max-width 或者 max-height
  
  em 和 rem 
  	em父级的文字大小的倍数 父级大小是多少，决定子级文字em的大小
  	rem 就是针对HTML文字字体大小