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

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

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

参考教程：菜鸟教程

笔记链接：Web-Learn-Note

---

• 章节13 HTML新标签使用及CSS选择器
• 章节14 服务器字体及弹性盒模型

---

章节13 HTML新标签使用及CSS选择器

• 课时48 H5新标签 语义 22:35

  
  	语义：文档的头部或者页面的头部
  
  
  	语义：导航
  
  
  	语义：文档的脚部或者页面的脚部，通常用来包含文档的版权信息 或者授权 或者友情链接
  
  
  	语义：侧边栏 或者附属信息
  
  
  	语义：标题的集合 ，可以用来包含多个h1~h6的标签
  
  
  	语义：图片区域 ，可以包含多个图片或者一个figcaption,ficaption用来表示图片标题
  
  
  	语义：图片区域的标题 ，一般写在figure
  
  
  	语义：分区 ， 页面的或者文档的一部分区域 ，有独立的内容，但结构相近，就可以用section
  	可以包含 header h1 ~ h6等等
  
  
  	语义：独立的内容 ，可以是文章 blog 帖子 短文或者回复 评论 
  

• 课时49 css3子代 兄弟 同级通用 属性选择器 15:04

  子选择器 ： > 
  		 作用范围： div下的span会有享受样式 ， p里的不享受， 原因，p里的span是孙子
  div>span {
  	border:1px solid red;
  	background: yellow;
  }
  
  相邻兄弟选择器： +
  		作用范围 ：可以选择相邻的两个元素，元素一定要有同一个父级，+后面的元素享受样式
  p+span {
  	border:1px solid red;
  	background: yellow;
  }
  
  同级元素通用选择器： ~
  		作用范围：所有相同父级中，位于 P 标签之后的同级的 span 标签 享受样式
  p~span {
  	border:1px solid red;
  	background: yellow;
  }
  
  属性选择器
      第一种
          选择带有某种属性的所有元素
              a[属性名]{…………}
  
      第二种
          选择带有某种属性，并且规定属性值的元素
              input[属性名="属性值"]{
                  …………
              }
  

• 课时50 A标签的伪类 伪类选择器 18:50

  伪类选择器
      选择属于其父级下的第n个元素，并且必须是p标签，直到匹配位置，否则不生效
          p:nth-child(n){
              background: red;
          }
          温馨提示：n可以用来计算
  
      选择属于其父级下的第1个元素，并且必须是p标签，否则不生效
      p:first-child{
          background: red;
      }
  
      选择属于其父级下的最后1个元素，并且必须是p标签，否则不生效
      p:last-child{
          background: red;
      }
  
      选择属于其父级下的第n个元素，并且一定会匹配p标签
          p:nth-of-type(n){
              background: red;
          }
          温馨提示：n可以用来计算
  
      选择属于其父级下的第1个元素，并且一定会匹配p标签
      p:first-of-type{
          background: red;
      }
  
      选择属于其父级下的最后1个元素，并且一定会匹配p标签
      p:last-of-type{
          background: red;
      }
  
  伪类 ： 是一种特殊性的属性， 可以理解为表示一种状态 love hate 爱恨记忆法
  after
  before
  

章节14 服务器字体及弹性盒模型

• 课时51 服务器字体 18:22

  @font-face {
  	font-family:"瞎编的 自定义的字体名字";
  	src:
  		url("字体图片的路径地址"),
  		url("字体图片的路径地址"),
  		url("字体图片的路径地址"),
  		url("字体图片的路径地址");
  	font-weight:;
  	font-style:;
  }
  @font-face {
      font-family: 'b_surfersplane';
      src: url('bsurp___-webfont.eot');
      src: url('bsurp___-webfont.eot?#iefix') format('embedded-opentype'),
           url('bsurp___-webfont.woff2') format('woff2'),
           url('bsurp___-webfont.woff') format('woff'),
           url('bsurp___-webfont.ttf') format('truetype'),
           url('bsurp___-webfont.svg#b_surfersplane') format('svg');
      font-weight: normal;
      font-style: normal;
  
  }
  .ttf
  .otf
  .woff
  .eot
  .svg
  http://www.dafont.com/ 找字体的网站
  https://www.fontsquirrel.com/tools/webfont-generator 修改字体图片格式的线上工具
  

• 课时52 字体图标 怪异盒模型 17:57

  www.iconfont.cn
  @font-face {
    font-family: "aaaa";
    src: url('fontImg/1/iconfont.eot?t=1478759787428'); /* IE9*/
    src: url('fontImg/1/iconfont.eot?t=1478759787428#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fontImg/1/iconfont.woff?t=1478759787428') format('woff'), /* chrome, firefox */
    url('fontImg/1/iconfont.ttf?t=1478759787428') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('fontImg/1/iconfont.svg?t=1478759787428#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family:"aaaa" ;
    font-size:40px;
    font-style:normal;
    width:300px;
    height:300px;
    border:1px solid red;
    color:#2EEF64;
    text-indent: 30px;
    line-height: 300px;
  }
  
  .iconfont:before { content: "\3432"; }
  
  box-sizing: 盒模型的设置
  
  标准盒模型 content-box
  	盒子的宽：border + padding + width
  	盒子和高：border + padding + height
  怪异盒模型 border-box
  	盒子和宽：就是设置的width 会包含 border + padding 
  	盒子的高：就是设置的height 会包含 border + padding
  

• 课时53 弹性盒模型 分栏 31:28

  弹性盒模型 ，不兼容 ，w3c目前还没有标准化 ，需要加浏览器内核前缀
  
  如果想要搭建弹性盒模型，首先要在父级建立弹性盒模型的空间
  方法：
  	display:-webkit-box;
  	display:-moz-box;
  	display:-ms-box;
  	display:-o-box;
  	display:box;
  
  排列方式 有两种 水平 和 垂直
  -webkit-box-orient:vertical; 垂直
  -webkit-box-orient:horizontal;  水平 默认值
  
  子级的排列位置 ，可以给父级加-webkit-box-pack 来实现
  方法：
  	-webkit-box-pack:
  	-moz-box-pack:
  	-ms-box-pack:
  	-o-box-pack:
  	box-pack:
  
  		相应的值有：
  			start 左边 默认值
  			center 中间
  			end 右边
  			justify 均分
  子级自己本身可以均分父级的宽度，根据自身的分数进行均分
  	设置分数的方法
  		给子级加
  			-webkit-box-flex:几份;
  			比如：
  				-webkit-box-flex:1; 根据一份的宽度来计算 分一份
  				-webkit-box-flex:5; 根据一份的宽度来计算 分五份
  
  column-count:3; 分几栏 
  	column-gap:100px; 分栏之间的间隙 数值越大 间隙越大
  	column-rule: 5px solid #25AB12; 类似border的设置，可以设置分栏之间的分界线
  	ie9以下不支持 火狐需要加前缀
  
  !important   不推荐使用
  	一般写在想要的样式后面 ，把相应的样式的优先级提升至最高