css学习心得分享

        css（层叠样式表）负责表现。在html中应用css有三种形式：内联式、嵌入式和外部式，在这三种形式中，尽量多采用第三种--外部式.
        css中有众多的选择器：标签选择器、类选择器、id选择器、子选择器、包含选择器、通用选择器、伪类选择器、分组选择器等。这些选择器有不同的写法，相应的，也有不同的作用应用于不同的场合，如何合理安排这些选择器，做到样式语句的精简和样式应用的精准，也是需要我们一步步积累经验的。
        css中有一个很重要的概念--盒子模型。盒子模型从上到下分为五层:边框、内边距和盒子中的内容、背景图片、背景颜色和外边距。上面的层能盖住下面的层。盒子模型有几个重要的参数：margin、padding、border还有内容物的尺寸。我们应用的时候要将盒子模型的层数概念和这些参数结合起来，就能很好的使用盒子来了。
 

1. 元素浮动
            浮动布局即横向多列布局，通过设置float属性实现。当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。当上一个元素设置了浮动属性后，紧邻在它后面的元素也会受到它的浮动影响，贴着它显示。因此这就带来了一个关键的点--对受到浮动影响的元素清除浮动。清除浮动主要有两种方法，第一种方法是使用clear属性，第二种方法是设置宽度后加overflow:hidden。这两种方法有一个不同点是，当两个子元素都浮动以后就撑不起父元素了，父元素变成一条线，因此此时需要对父元素清除浮动影响，这种情况下就只能用第二种方法。

2. 三种定位方式
   主要通过设置position属性实现，有三种定位模式：绝对定位（absolute）、相对定位（relative）和固定定位（fixed）。
       (1)绝对定位使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父元素包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。要注意，属性值和实际移动方向是相反的。如果想相对于其他元素定位，需与relative配合使用，但是参照元素必须是定位元素的前辈元素，参照元素中加入relative,定位元素中使用absolute。
        (2)相对定位通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样漂浮了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动（即它的下一个元素仍然按照它的原始位置进行排列），属性值和实际移动方向是相反的。
        (3) 固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。