新手前端笔记之--初识css

　　css样式表是为了容纳与html文档分离出来的样式属性而产生的，所以她理所当然的包含两个部分：1.样式的表示，使用{属性1：属性值；属性2：属性值；...},2.样式与标签的对应（如何找的对应标签），使用各种选择器。下面将这两部分分别进行分析。

一、选择器的分类和应用原则：

　　　　关于选择器的总结，已经有很多，推荐博文：十分钟搞定css选择器，里面的总结已经非常全面，但怎样使用还是应该注意优先级（这是由于层叠引起的，因为css允许为一个标签多次设定样式，所以就要确定到底是哪个样式被最终使用）和应用原则，推荐另一篇文章：css选择器，优先级和匹配原理。还有一个需要体会的原则是渐进增强原则，这是因为各种浏览器对css的支持程度不同，为了满足不同用户都可以体验到满意的效果。

　　二、样式又可以分为具体样式（指定每一部分自身应该显示的样式，如边框、背景等，其中最需理解的就是盒模型）和定位（指定元素的位置）。

　　　　1、自身样式包括：背景、字体、文本、边框、链接、列表、表格、轮廓，多列，变换，过渡，动画，最后是"盒子"。

　　　　前几个都较容易理解，具体内容在w3school手册中有介绍，需要记忆即可（注意背景图片百分比定位的具体操作）。

　　　  而对盒子的理解首先应该是：它是一个装着珍贵物品的礼物盒，在最里面是物品（content），外面有一层柔软的布将它与坚硬外壳隔离（padding和border），这个盒子还需要和别的物件分开（margin）。所以这个盒子所占据的空间就是(margin-left+border-left+padding-left+content+padding-right+border-right+margin-right,上下计算同理)，这样复杂的写只是想表明左右的大小不一定相等。

　　　　有了上面的理解，现在来想一个实际的问题：如果在这个盒子里装了一个大于盒子的物品会出现什么情况呢？因为这个物品足够这珍贵，所以默认情况下它会溢出盒子的约束（ie中甚至可以将盒子“撑大”）。为了保持布局，你可以使用overflow属性对其进行限制（修剪多余部分hidden，出现滚动条scroll,自动识别auto）,clip属性也可以用来对元素进行剪切，但有一定条件（该元素设置position为absolute）。

　　　　在html中，可以说万物皆盒子。但盒子又可以分为两种：行内（框？盒）和行外（框？盒）。内外之分在于行，前者被局限于行之中，可以左右扩张，但只能通过设置行高line-height来上下扩展；而后者可以随心上下左右扩展。（图像属于行内元素）。display属性提供两者之间的转化方式，甚至将环内元素转化为特殊的行外元素，如列表和表格，详见手册。

　　　　2、有了以上的盒子概念，就可以来进行定位了。记得以前看到过一些抽象画，就是一些方块的格子在一幅图片上进行排布，网页设计者就是在屏幕上进行这种艺术创作，但更准求精准的排列关系而已。其实浏览器默认就有一种排列方式—>由上到下，由左到右的排列这些行内和行外框（标准流）。为了使盒子可以以你的医院进行排列，css提供了定位元素，分为两种方式：position和float。

　　　　float是浮动定位方式，先浮后动，浮是指想着屏幕冲着脸的方向上浮，然后向左或右移动，元素不占据标准流中位置，所以可以覆盖之后未浮动的元素。这是你可以消除它对下一个元素的影响（清除浮动），即使用clear属性

　　　　position是一种“相对”定位方式，指的是它的定位依据某一特定元素来确定（有浮的特性），有relative（相对于标准流中的自己，原位置和框的性质保留），absolute（相对于包含它的最近定位元素，位置不留，一律变成块框），fixed（相对于浏览器视窗）

　　　　还有四种定位，top，right，bottom，left，它们必须在设定position定位之后才能起作用。