学习记录（五）

2020.3.9-2020.3.15

上周复习了学过的内容，这周学到了一些新的东西

• 伪类选择器

  • 同一类被选择，如只选 li

     nth-of-type()			 
     first-of-type	
     last-of-type	
     only-of-type	
    

  • 子元素被选择，只要是子元素就可以，不需要标签一样

     nth-child()	 
     first-child
     last-child
     only-child
    

  注：()里填写数字，数字从1开始，1表示第一项，以此类推，也可以写n，表示从零到无穷大。

• css单一样式优先级

  • style行间 > id > class > tag(标签) > * > 继承
  • 标签 + 类 > 单类

• border-sizing: 盒尺寸

  • 默认值：content-box

    其width和height表示content的宽高

  • 其他值：border-box

    其width和height表示content padding border的总宽高

• 标签嵌套规范

  • 块标签可以嵌套内联标签
  • 块标签不一定能嵌套块标签（如：p标签不能嵌套div标签）
  • 内联标签不能嵌套块标签（a标签是一个例外，它可以嵌套块标签，但它不能嵌套它自己）

• cursor ：手势

  • 实现手势自定义

    首先，要准备图片，图片格式为：.cur .ico
    格式：cursor : url(), auto;

• 最大、最小宽高

   min-width
   max-width
   min-height
   max-height
  

• 如何解决图片跟容器底部有一些空隙

  • 原因：内联元素的对齐方式是按照文字基线对齐的，并不是跟文字底线对齐
  • 解决方法
    img{ display:block;}
    或 img{ vertical-align:bottom;}

• iframe嵌套页面

  • frameborder ：规定边框的宽度，0为无边框
  • width ：定义 iframe 的宽度
  • height ：定义 iframe 的宽度
  • scrolling ：规定是否显示滚动条
  • src ：规定引入的 URL
  • srcdoc ：规定显示的页面内容

• wbr ：软换行

  可写在一个很长的单词中间