css揭秘-学习小结

0 引言-编码技巧

尽量用相对单位，比如字体大小和行高，如果是绝对值每次两个都要改，如果是相对值则只要改一个。

0.1 代码易维护和代码量不可兼得

为一个元素添加宽10px的边框，左侧不带边框，有两种方案

border-width: 10px 10px 10px 0;

border-width: 10px;

border-left-width: 0;

一个代码少但改的多，一个代码多但改的少

0.2 继承

可以使用inherit关键字，使元素继承父元素的属性：

input, select, button {font:inherit}

0.3 相对单位的使用

比如百分比，em，或视口相关单位：vw, vh, vmin, vmax

0.4 合理使用简写

不少属性可以简写到一个属性里，此处推荐合理使用简写。因为如果属性展开写，可能会遗漏，也可能属性太多改的麻烦，相互影响等，总之，有好有坏

当多个属性使用相同值时，由于相同属性具有扩散作用，可以简写成一个

1 背景与边框

1.1 半透明边框

hsla颜色：通过四个值描述颜色：hsla(0, 0%, 50%, 0.5)：第一个元素表示色相，决定是什么颜色，第二个元素是饱和度，0-100%，越高越饱满，越低越灰色，第三个元素是亮度，第四个元素是透明度，值范围0-1

问题 即 如何实现半透明色

一个解决方案如下

border: 10px solid hsla(0, 0%, 100%, .5);
background: white;

但边框的半透明透过来的是background的白色，结果背景的白色遮挡了背景图片，css3的background-clip可解决此问题，该属性会将透明区域的背景色用边框外沿剪掉，背景色就能透过来了

border: 10px solid hsla(0, 0%, 100%, .5)
background: white;
background-clip: padding-box;

1.2 多重边框

box-shadow基本用法：box-shadow属性用来给元素添加阴影效果，参数如下：box-shadow: h-shadow v-shadow blur spread color inset; 

h-shadow表示在水平方向投影大小；v-shadow表示在垂直方向投影大小；blur表示阴影模糊程度；spread表示阴影扩张程度，color表示阴影颜色；inset默认是外阴影，如果设置，可设为内阴影

background: yellowgreen;
box-shadow: 0 0 0 10px #655

这个效果是#655颜色宽10px的实线边框，背景色是黄绿

因为box-shadow属性支持逗号分割，可以再弄一个边框：

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px #328

需注意的是，逗号分割的边框，第一个在最顶层，往后就是底层的

还需注意，box-shadow的视觉效果和border这种边框效果可相似，但box-shadow的阴影没有边框宽度属性，边框也不会出发鼠标等移动事件

box-shadow只能模拟实线边框，无法模拟虚线边框

outline属性可以在border外再描一层边，注意outline和box-shadow重叠时，outline盖在box-shadow上面

1.3 灵活的背景定位

background-position

如果想针对某个地方做偏移，可以这样：

background: url('test.png') no-repeat #58a;
background-position: right 20px bottom 30px;

这是css3支持的，有的不支持此属性，元素会贴在左上角，可以在background里添加值right bottom，这样不支持background-position时，元素仍能在右下角

background-origin

background-position的位置是相对padding-box的角，background-origin用来定义background-position相对的是哪个角，所以它默认值是padding-box：

当padding和background-position值一样时，每次需要改三个值，可改background-origin为content-box将background-position的值设为相对content角，则不需要要再给bp定义方向上的偏移值

calc

通过calc计算的边距是相对左上角而言的，注意，calc运算符左右一定要加空白符，不然解析错误

1.4 边框内圆角

用两个div元素可方便实现内圆角外直角的效果

怎样用一个div实现，而不是用两个div？答案是外直角用outline实现，内圆角和直角的间隙填充outline相同颜色即可

7 结构与布局

7.1 垂直居中