伪类选择器以及盒模型常用属性

1.CSS伪类选择器

结构伪类选择器：

结构伪类选择器的公式:nth-of-type(an+b)
正向取值演示：

* A的值是0,0乘以任何数都等于0,所以B的值就填写1,取第一行数据.
* 当前也可也取一组数据.

* 反向取值演示：

* 获取倒数一组数据演示：

* 取奇偶数：

* 取偶数的快捷方式：:nth-of-type(even)

* 取奇数的快捷方式：:nth-of-type(odd)
* 语法糖总结：first-of-type=取第一个值 | last-of-type=取最后一个值

状态伪类选择器：

* 获取有状态的元素方法：input:状态.这段代码指的是获取一个input标签,这个标签有一个状态.比如禁用状态就是：input:disabled

• 状态伪类选择器的总结：
  • 鼠标悬停：hover
  • 获取焦点：focus

    2.盒模型常用属性

    
• margin[外边距-控制当前盒子与其他盒子的距离]
• border[边框]
• padding[内边距-内容区与边框之间的填充区块]
• content[内容区]
• 且要注意的是,margin和padding属于不可见属性,只能设置宽度,除此之外不能设置任何属性.在页面中看不到.
  
  • 需要注意的是,尽管我们在CSS中设置的是200像素的宽度和100像素的高度,但是在浏览器中我们看到的却是250像素的宽度和150像素的高度,这是因为浏览器自动把padding和boder的四条边的值也算进去了.这点需要注意！！！
  • 而如果必须要设置成CSS中设置的像素,也是有办法的.我们要用到一个属性：box-sizing
  • box-sizing这个属性需要注意的点是,你设置的宽高度,其实是包括了边框的.
    
  • 还原尺寸也很简单,用到的属性是：box-sizing: content-box;
  • 对border边框进行设置可以用到如下属性：比如对上边框进行设置：border-top
  • border-top属性参数：宽度 样式 前景色
    
  • 那么左右下边框一样的道理：border-left、border-right、border-bottom
  • 当然也有简化写法：
    • 当四条边都一样时,只写border:宽度 样式 前景色,即可.
    • 
    • 当四条边都不一样时,可以用如下方法：
    • padding: 10px 15px 20px 25px;他的顺序是上、右、下、左
      
    • 当上下值不一样，左右值一样时,我们可以用如下方法：padding:10px 15px 20px;
      
    • 我们通过对比可以发现,第一个值对应的是上边,第三个值对应的是下边,第二个值对应的是左右两边.
    • 当上下值一样,左右值一样时,我们可以用如下方法：padding:10px 15px;
      
    • 我们通过对比可以发现,第一个值对应的是上下两条边,第二个值对应的是左右两条边.
    • 三值和二值的记忆方法为：第二个值永远表示左右.
    • 当四个方向全部一样时,我们设置一个单值即可：padding:10px;
      
    • 盒模型中：最重要的属性为：width、height、padding（不可视属性）、border（可视化属性）、margin（不可视属性）！