我的前端入门笔记（2）--css
零零碎碎的东西太多，需要理解的东西也不少。有个好的导师真的是一件特别幸福的事，对于初入门的人，面对搜索的各种答案真的会凌乱，待基础打好后再来看一些深入的东西应该会得心应手了吧~学习过程中努力搞清楚的知识点，在这里留下一点印记。
1.选择器的权重问题。
以以下一小段代码为例：
<div class="cla1">
<p id="id1" class="cla2"></p>
</div>
选择排序如下：
#id1 > .cla1 .cla2 > .cla2 >div p
2.图片的放入位置。
css中：图片为固定的图片，不会因为操作人的不同或内容更新而更换的放在css的background中；
html中：图片与部分内容相关，会时时更新的则放在html的<img>标签中，由后台的数据库调出。
3.文本和图像的居中问题。
文本水平居中:text-align:center;
文本垂直居中：1.设置line-height=height；2.设置上下padding相等；3、设置display:inline-block;vertical-align:middle
图像水平居中：margin：0 auto；
图像垂直居中（item为父容器的class）：
.方式1：给img的父容器设置成表格方式，加入vertical-align: middle;具体如下：
.item{
width: 400px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.方式2,：
.item{
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
.item:before{
content: '';
display:inline-block;
height: 100%;
vertical-align: middle;
}
.item img{
vertical-align: middle;
}
4.display:none、visibility:hidden区别及overflow属性。
display：none 对应元素脱离文档流，不显示；
visibility:hidden 对应元素不显示，但是占据文档空间，相当于opacity：0；
overflow：scroll，必会出现滚动条；auto，子元素内容大于父元素时出现滚动条；visible，溢出的内容出现在父元素之外；hidden，溢出隐藏。
5.盒模型。
标准盒模型：
怪异盒模型（ie下）：
6.css定位机制（position、float）。
position：static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）；
position：relative 相对于自身的正常位置进行定位；
position：absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。以top、right、bottom、left进行定位。
position：fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
float：使浮动框脱离文档流，若该元素的兄弟元素都是浮动元素，且父元素未设置宽高，则父元素无法被撑开。要使其正常出现，则需为父元素设置宽高或清除浮动。
7.清除浮动的几种方法。
方法一：在父元素的最后添加一个无意义的元素
.clearfix:after{
content: "";
display: block;
clear: both;
}
方法二：为父元素添加overflow:hidden;
.clearfix{
overflow:hidden;
_zoom:1; /* for ie 6*/
}
8.简述两种css布局。
布局一：三列并排等高显示（利用超大内边距和相同的负外边距）
布局二：侧边栏宽度固定，内容部分宽度自适应。
9.页面渲染。
页面渲染从上到下进行：
css放在html标签的头部：页面加载从上到下，先加载出css再加载html，防止html加载出来样式却还未加载出来，页面呈现不带样式的html；
js放在body尾部：js执行功能，最后加载可以加快页面的出现速度；同时，js是针对页面节点进行操作，必须保证页面节点都已经存在。
10.为什么要初始化css样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
{padding: 0; margin: 0;}
淘宝的样式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
10.什么是css sprite。
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的"background-image"，"background-repeat"，"background-position" 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销。
11.文件路径…/main.css 、./main.css、main.css、/main.css有什么区别？
…/main.css:上级目录下的main.css文件；
./main.css和main.css:当前目录下的main.css文件；
/main.css:根目录下的main.css文件。
12.字符串部分显示css
css {max-width: 200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
释：字符串过长需截取部分显示时，截取200px范围内的字符串，后面部分用'...'显示
13.first-child和:first-of-type的作用和区别？
:first-child 选择某父元素下第一个子元素。
:first-of-type 选择某父元素下所有相同类型的子元素，其中排第一的那个子元素。
