h5标签语义化 c3选择器 盒子模型 vscode鼠标悬停显示权重 BFC 网页图标制作

鼠标悬停显示权重 BFC 网页图标制作"/>

h5标签语义化 c3选择器 盒子模型 vscode鼠标悬停显示权重 BFC 网页图标制作

• html5

  • 什么是标签语义化 ：
    每一个标签都有自己独特的含义，在合理的地方使用合理的标签。
    • 优点：
      1. 方便程序员阅读，望文生义；
      2. 方便搜索引擎抓取页面；
    • 缺点：
      1. 兼容性问题，基本是IE9+以上的浏览器才支持。

• css3

  • 结构伪类选择器

    • :nth-child();//n是从0开始的正整数 全选//even 2n  偶数	奇偶结构伪类选择器//odd 20+1 奇数//n+4		选中从第四个孩子往后的孩子				//-n+4      n必须写在前面 选中从开始到第四个孩子:first-child;   //第一个孩子
      :last--child;   //最后一个孩子：nth-of-type() //匹配类型的结构伪类选择器  （在一些非无序列表的当中
      

  • 伪元素选择器

    • 常见两个伪元素 ::before ::after （用双冒号开始）
    • 伪元素必写属性 content 【易错】
    • 伪元素可以像正常标签一样设置任何样式；
    • 伪元素默认为行内元素（显示模式）； 【易错】
    • 创建出伪元素的结构和伪元素之间 是父子关系；
    • 伪元素放在整个内容的前后 （不是整个结构）；★
    • 单标签没有伪元素；
    • 伪元素的权重是1 （跟元素一样的）
    • js无法获取伪元素
    • 伪元素可以使用单冒号（为了兼容低版本浏览器）

• box-sizing盒子模型

  • 标准盒模型
    box-sizing:content-box; //盒子由content+padding+border组成
    //默认值为content-box
    //添加内边距或边框会撑开盒子
    //设置宽高是给content设置的
  • 怪异盒模型
    box-sizing：border-box; //添加内边距或边框不会撑开盒子；
    //设置宽高是给border+padding+内容设置的
    //也叫（内减模式）

tip ：

	在vscode鼠标悬停css标签时，可以显示权重；BFC 块级格式化上下文 block format context；表单元素默认有2px的边框；网页标题图标 如果ui没有给，可以搜索ico用网站ico51.com进行制作