最近学习CSS收获的一些总结。
之前熟知的CSS使用方法有三种，
内联样式内部样式外部样式其优先级依次为内联样式>内部样式>外部样式。
在本次学习中，学到了另外一种——导入式。导入式的具体使用方法如下： 同样是从外部导入CSS文件，但是和link使用上面不同的是，link导入外部样式，会在页面加载的同时加载CSS样式，@import是在读取完HTML文件之后加载的。所以可能在加载慢的时候，@import会出现先加载出一个没有样式的网页。
CSS选择器部分大概学习了6种，
标签选择器类选择器ID选择器全局选择器群组选择器后代选择器在类选择器的使用中，有一个写法，我在之前的应用中可能存在一些误解。比如：当h1标签和p标签同样有class="text"的时候，选中p标签的写法，应当为p.text{…}
又或者，需要选中class="red" 的标签的后代标签a的写法为p.red a{…} ，写法上面的一些细节在使用中要格外注意。
另外，在写法上还有这样一个细节，例如：
要选中这个结构中的li标签，之前我的写法大都是这样的： .fix li{…}
但是推荐的写法是这样的： .header .fix li{…}
这种写法在后续的使用过程中我发现，可以提高代码的可维护性。
这里主要是链接伪类，如下：
伪类说明:link未访问的链接:visited已访问的链接:hover鼠标悬停状态:active激活的链接链接伪类在书写的时候，又要给顺序要求，
:link>:visited>:hover>:active
以a标签为例，a:hover必须写到a:link和a:visited之后，才有效果，同样的，a:active必须写到a:hover之后，才有效果。
但是，单独的a:hover不受影响。
CSS使用方法优先级一般情况上面有说过，但是有一点值得注意，由于浏览器的渲染方式自上而下，因此内部样式和外部样式优先级有时候还取决于<style></style>标签和<link></link>标签的先后顺序。同样在最后被定义的优先级最高。
这里提一下根据权值判断优先级，如果在同一样式表中，权值相同的情况下，按照离被设置元素越近优先级越高的就近原则处理。在权值不同的情况下，根据权值判断，权值高优先级就高。
选择器的权值为：
选择器类型权值通配符选择器0标签选择器1类选择器和伪类10ID选择器100行内样式权值为1000例如：#header div.nav ul{…}
根据上表： 2个标签选择器 id:1 class:1，1*2=2 1个类选择器 1*10 1个ID选择器 1*100 权值为 2+10+100=112
另外通过添加!important规则，调整样式规则的优先级。如： div{color: red !important;}
float有四个参数
float：left 左浮动float：right 右浮动float：none 不浮动float：inherit 继承浮动这里有一个小心德体会：浮动元素脱离文档流！！但是依然占据正常文本流的文本空间。浮动最开始诞生是为了制造文字环绕图片的效果，后来的运用比较灵活。浮动元素不再占有原始的空间。 浮动元素会变成块状元素。 给个截图有助理解。
这里要注意的是：相对定位相对于该元素原来在常规流中的位置。 使用绝对定位和相对定位实现水平、垂直居中。 固定定位相对于视口，绝对定位默认相对于body，或者最近的定位的父元素。 position：sticky磁贴定位就比较有意思了，可以说是固定定位的升级版。现在很多网站的导航都会用到。
可以用来给导航条上面添加一个banner图片，然后当导航滚动到顶部的时候，将导航条固定到顶部。
关于圣杯布局的由来可以自行搜索，在此不罗列了，圣杯布局主要实现的效果如下图所示： 圣杯布局的基本思路： 首先给父容器整体设置一个padding值，上下为0，左右为左侧和右侧内容的宽度。 其次，中间部分先渲染，也就是中间部分的代码要写在左右两侧代码之前。中间部分宽度为100%，为父容器宽度。 左中右相应设置为相对定位，且左浮动。此时，左右部分会被挤到下方去。 首先对左边部分设置宽度，为父容器padding-left的值，然后对左部分的margin值进行设置。 margin-left: -100%; 在元素浮动的情况下，负边界值会导致div上移，-100%使该元素移动到中间内容部分的最左侧。 对右边部分设置宽度类似于左边部分，宽度为父容器padding-right的值，然后对margin值进行设置。此时margin-left的值与该部分元素宽度相同即可。 我的理解为，当他负出当前视口的时候，元素会上移到上一个元素的最右边。对于左边而言，margin：-100%就将该元素移动到了最左边，这个时候设置相对定位的left值，即可实现布局。具体可参考下面代码理解。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圣杯布局测试</title> <style type="text/css"> /*此处写代码*/ *{ margin: 0; padding: 0; } body{ min-width: 900px; } /*此处写代码*/ .nav{ height: 100px; line-height: 100px; background-color: black; } .nav img{ display: block; float: left; } .nav ul li{ float: right; color: #fff; margin-right: 50px; list-style-type: none; font-size: 20px; } .nav li:hover{ color: orange; cursor: pointer; } .content{ padding:0 220px 0 200px; } .footer{ width: 100%; background-color: black; height: 100px; line-height: 100px; color: #fff; } .footer li{ float: left; list-style-type: none; width:100px; } .footercon{ margin:0 auto; width: 600px; } .middle, .left, .right{ position: relative; float: left; min-height: 600px; } .middle{ width:100%; background-color: #FFC0CB; } .left{ width: 200px; background-color: #FFEFDB; margin-left: -100%; left: -200px; } .right{ width: 220px; background-color: #ADD8E6; margin-left: -220px; right: -220px; } .middle img{ display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto auto; } </style> </head> <body> <!-- 此处写代码 --> <div class="nav"> <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"> <ul> <li>手记</li> <li>猿问</li> <li>实战</li> <li>职业路径</li> <li>课程</li> </ul> </div> <div class="content"> <div class="middle"> <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg" alt="tu1"> </div> <div class="left"> </div> <div class="right"> </div> <div style="clear:both;"></div> </div> <div class="footer"> <div class="footercon"> <ul> <li>网站首页</li> <li>企业合作</li> <li>人才招聘</li> <li>联系我们</li> <li>常见问题</li> <li>友情链接</li> </ul> <div style="clear:both;"></div> </div> </div> </body> </html>双飞翼布局算是改良以后的圣杯布局，这里面不需要用到定位，只需要浮动和负边距就可实现。 不同的是，双飞翼布局，需要把中间部分用一个div标签包裹起来，以便布局。双飞翼布局暂时在此不做详细说明，后面有时间可以在完善。
前端学习的路对我来说任重道远，这些总结很大程度上是针对我过去所学的查漏补缺，如果阅读的时候发现有哪些不对的地方，还希望亲们能告诉我，以便改正。谢谢。^_^
以上截图部分来自慕课网的视频，如有侵权，请告知，以便删除。
