2018/5/11前端最基础的css之查漏补缺

让我想想最近遇到的问题。
- 首先，开发过程中，需求改动是不可避免的。及时沟通非常重要，不要觉得不好意思，否则可能会浪费很多时间做无用功。
- 其次，不要太焦躁。一躁起来就什么都不会了。切记切记，超级浪费时间。
- 还有就是要好好学习，夯实基础才是硬道理，不要心急。我决定要再学一遍css了，工作中发现之前 遗漏了许多细节，得补上。

• 注释
  细致的分割各个部分的代码块
  开发中会经常用到颜色，可以在文件中建立一个颜色参考表，看起来就会比较简洁，一目了然
  用关键字区分 比如 @todo @bugfix之类 提高代码可读性
  但是注释也是占了字节的，会使样式文件明显加大，所以也不要增加一些不必要的注释

• 盒模型
  在css中，width和height值得是内容区域的高度和宽度，因此，整个盒模型的高度和宽度是内容区域+padding+border+margin
  但是在IE盒模型中width属性是整个内容、内边距、边框的总和

• 边距折叠
  只有普通文档流中块框的垂直外边距才会发生折叠，行内框，浮动框活绝对定位的外边距就不会折叠。所以，解决外边距折叠的方法就是以上几种，酌情使用

• 背景图像
  尽量不要将像素或者百分数等单位混合使用。虽然各个浏览器都支持，但是可能会诱发某种问题
  bg的简写顺序 color image repeat position

• 滑动门技术

• 山顶角

• css3支持多张背景图片，可以通过background-position来定位

• 圆角框
  作为一个日常没有写css兼容性写法的少女 要改改这个习惯了
  border-radius属性目前已经被firefox和safari支持了，所以兼容性写法要加 -moz -webkit前缀

• border-image
  这个特性可以避免边框角的失真的情况，即（9分缩放法）
  但是这个特性只有在safari中支持度良好

• box-shadow
  该属性的值分别为 垂直和水平偏移 投影的宽度 颜色
  同样目前要加上兼容性写法-moz -webkit

• 小tips
  在定义鼠标悬停状态时，把：focus伪类也添加上，这样，不管是鼠标悬停还是通过键盘移动到该链接，都会产生相同的效果。

• 为链接目标设置样式
  页面中定义锚点时单击链接即可跳转到相应的部分，使用：target伪类可以为目标设置样式

• 纯css实现下拉菜单
  只需要把子导航嵌套在无序列表中，悬浮在屏幕之外的位置，当鼠标悬停的时候重新定位

• 布局

• float清除浮动
  父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
  结尾处加空div标签 clear:both
  父级div定义 伪类:after 和 zoom
  
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

  父级div定义 overflow:hidden ,但是不能和position配合使用，因为超出的尺寸的会被隐藏。

• 固定宽度布局
  目前用的比较多又好像有点过时

• 流式布局
  尺寸是百分比，这样可以随着窗口伸缩
• 弹性布局
  弹性布局以em为单位进行布局
• 高度相等的列
  css的新属性