《css揭秘》读书笔记（一）

减少使用css代码的重复

• 如果某些值相互依赖的时候，尽量把他们之间的关系用代码表达出来。
  在线代码
• 代码量少不一定易维护
• 使用继承会使依赖关系的表达更好
  a{ color:inherit; }

---

响应式网站的设计

响应式网站常见的是用多分辨率来测试一个网站，然后添加越来越多的媒体查询（Media Query）来修补网站在某些分辨率下出现的问题。
媒体查询并不是一种不良的实践，只要用对，它就是利器。你应该把它看成最后的手段。
如果大部分代码并不是以弹性的方式来编写的，那么媒体查询能做的也只是修补某个特性分辨率下的特定问题。

避免不必要的媒体查询的几点建议

• 使用百分比长度来取代固定长度，也可以试着使用vw,vh,vmin,vmax。
• 需要在较大分辨率下得到固定宽度时，建议使用max-width，而不是width。
• 为替换元素，如img,object,video,iframe,等设置max-width。
• 当元素进行行列布局时，让视口的宽度来决定列的数量，使用flex来实现。
• 使用多列文本时，指定column-width而不是制定column-count。

---

一些问题的处理

• 让border不被元素的background影响。可以利用background-clip这个属性对边框进行裁剪。
  代码的演示把css里面的注释去掉进行对比看看。
• box-shadow可以模拟border，这是利用到border的第四个参数（扩张半径）并且可以定义多个border，与boder不同的是box-shadow不会占据布局空间。
  代码演示
• 内圆角。代码演示
• 平行四边形标签制作。代码演示
• 制作切角。代码演示