css-protips学习笔记

本文为github中css-protips的学习笔记，地址 https://github.com/AllThingsSmitty/css-protips#use-a-css-reset

 

• 继承box-sizing。因为浏览器默认的box-sizing会有不同，所以需要有一个基本的定义。

html{
  box-sizing: border-box;
}

*,
*::before,
*::after{
  box-sizing: inherit;
}

 

• 使用unset替代重置所有属性

initial	修改所有元素属性或父元素的值为其初始化值
inherit	修改所有元素属性或父元素的值为其父元素的值
unset	修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值

• not  应用/不应用border

use the :not pseudo-class to only apply to the elements you want.

使用 :not 伪类应用到你选中的元素。

.nav li:not(:last-child){
    border-right: 1px solid #666;
}

• Add  line-height to body 

You don't need to add line-height to each <p>,<h>.Instead,add it to body.

不需要给每个p,或者标题元素增加行高。只需要添加至body中。

body{
 line-height: 1.5;
}

• set :focus for form Elements

a:focus,
button:focus,
input:focus,
select:focus,