初识css一

   伴随着牛腩油腻的嗓音，我开始了css之旅。

    1什么是css

     css:cascading style sheet.级联样式表，主要用来网页设计。如果把它与我之前做过的系统作比较，它就是用于设计界面的。它最大的优点在于能够使网页表现与内容分离，使界面和软件内容解耦，可以理解为设计模式在页面设计的体现。

    2什么是css盒子

    

    上图就是一个标准的模型。一个盒子基本包含这样几个元素

   内容(content)、边框距(padding)、边界(border)和边距(margin)

   由图所知，padding由padding-bottom,left,top,right四部分构成。margin由bottom,right,top,left四部分构成。padding是内容和边框之间的距离。margin是块状元素之间的距离。值得注意的是，margin是透明的。

 3一个诡异的现象

  <div id="a">
        块状元素a
    </div>
    <div id="b">
        块状元素b
        </div>

       它们的样式是

    #a
{
    background-color:#333;
    margin-bottom:10px;
}
#b
{
    background-color:#666;
    margin-top:20px;
}

也就是说块状元素a与块状元素b应该相隔30个元素,结果却如下

 经测量，a,与b相隔20个元素，有10个元素的距离被吞掉了。这是为什么呢

  上网查过资料，这种现象叫做Collapsing margins.中文名称为margin的折叠.造成以上现象的原因是, 我们在css中并没有声明块状元素的高, 因此它的高便被设为auto(自动)了. 一旦其值被设为auto, 那么浏览器就会认为它的高为border-top到border-bottom之间的距离, 也就造成了元素被吞掉的情况。下面的图对于这个问题解释的更加详细（此图来自css吧）

解决问题的方法是：用padding代替margin.

4令人眼花的选择器

不查不知道，一查吓一跳。原来css中的选择器竟有如此之多。除了牛腩所讲的标签，类，选择，全局选择器，还有许多。比如说组合选择器，继承选择器，伪类选择器等。

但作为初学者来说，选择器的优先级无疑是重点。ID选择器>类选择器>HTML标签选择器。

就先写这么多吧，随着学习的继续，我应该会有更多的收获。