精通CSS:高级WEB解决方案

　　

1. 选择器：高级选择器：属性选择器：[] ,例如：a[href=”#”] {};选择器的优先级：!important为最高优先级，其次优先级次序规则：a,b,c,d ,a代表行内样式，b代表ID选择器，c代表类、伪类、属性选择器，d代表类型元素选择器和伪元素选择器，它们的基数是1000，100，10，1；
2. 设计良好的CSS样式表：①结构（自上而下）：一般样式：主体样式、reset样式、链接、标题、其他元素；辅助样式：表单、通知和错误、一致的条目；页面结构：标题、页脚和导航；页面组件：各个页面；覆盖②注释：开发期间，在样式表的最开头把最常用的颜色16进制注释出来，开发完成后删除。可以使用不同标识符来表示哪些代码可能在以后需要更改，哪些是浏览器遇到的问题
3. 可视化格式模型：①盒模型：IE6早期的盒模型width属性包括内容、内边距以及边框的综合，而现在的盒模型width属性只指内容；②普通流的块元素的外边距叠加问题：当两个垂直外边距相遇时，它们会发生叠加，这个外边距的高度将会等于两个外边距中较大的那个，无论这个元素是父元素与子元素还是相邻元素之间，但在行内框、浮动元素以及绝对定位的元素不会发生上述情况；③行内框：行内框的尺寸只受行高、水平内外边距以及边框的影响；④相对定位：相对定位会占据原来的空间，移动会导致它覆盖其它框；⑤绝对定位：相对于距离它最近的已定位的祖先元素，所以要在绝对定位的父级设置成相对定位，可以通过设置z-index来控制层叠次序；⑥浮动：浮动框左右移动直到移动到父级边框或者另一个浮动框的边缘，行框将会围绕在浮动框的周围，如果不想行框在浮动框周围，则把行框clear设置成both,也可以通过设置overflow：hidden/auto产生的副作用清除浮动
4. 对链接应用样式：:link表示没有访问过的链接，:visited表示访问过的链接，:hover,:foucs,:active，注意它们的选择器特殊性可能会导致层叠，因而采用LVHFA的先后次序，一般情况下是取消默认的下划线，在鼠标悬停或者激活链接时添加下划线，在不同状态下且无需再次加载更换背景图片的技巧：采用雪碧图，在不同状态控制图片的不同偏移位置显示不同的图片
5. 对列表应用样式和创建导航栏：如果需要为列表符号添加特定的符号，可以把默认的项目符号去掉，留出内边距，用背景图像代替即可；为了在菜单栏上创建斜面的效果，一般把顶边框设置得比背景颜色浅，而底边框则深一点；纯CSS实现下拉菜单：在li标签里面嵌套ul>li标签，然后父元素li标签相对定位，子元素ul绝对定位，display为none，悬浮时显示出来；表单元素样式，可以通过直接在lable里面添加表单控件，也可以通过for的方式在外边添加表单控件，通常为了提示用户以及反馈给用户哪些单是必须填的可以使用em/span元素进行提示和标记
6. 布局：①结构设计：先把页面划分为大的结构性区域，比如容器、页眉、页脚、内容区域，然后将注意力转移到内容区域本身，开始建立网格结构，最后在各个内容区域中寻找不同的布局结构；②分析不同类型的内容，查看每个内容块的结构，看看不同的类型中是否有相同的模式，找出模式并命名约定后，开始定义即将使用的元素；③布局类型：浮动布局：a.两列的浮动布局：在一个主体容器中分成左右两个容器并左右浮动，主体容器可以采用溢出的方法清除浮动;b.三列布局：在两列布局的基础上，在其中一个容器添加两个容器，并使得这两个容器左右浮动，父容器本身也要浮动，相当于四个容器都浮动；固定宽度、流式布局和弹性布局：固定宽度采用固定像素，流式布局采用百分比，弹性布局采用em,流式布局和弹性布局都要注意min-width和max-width；设置三个列相同高度的技巧：在一个主体容器中，放置三个容器，这三个容器高度由内容撑开，然后设置底边距为主容器的高度，再把overflow设置成hidden
7. bug和修复bug:①选择器特殊性次序导致样式不成效问题；②外边距叠加问题；常见bug及其修复方法：