1.CSS的由来

94年，由赖先生(Håkon W Lie)提出层叠HTML样式表（Cascading HTML Style Sheets，CHSS），其中CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页，有以下三种方式的层叠：

样式的层叠：可以多次对同一选择器进行样式声明；
选择器的层叠：可以用不同的选择器对同一种元素进行样式说明；
文件的层叠：可以用多个文件进行层叠；

其中css2.1的版本应用最为广泛。如果想检测所使用的属性在各个浏览器的支持特点可以根据我能用网进行查看支持的情况。

2.css中的基本概念

（1）文档流

a. 流动的方向:

inline 从左向右流动在最右边换行；
block 每一个都独占一行；
inline-block 从左向右，不会被分成两块。

b. 宽度

inline的宽度：由内部inline的元素宽度和决定，对它不可指定宽度值；
block 的宽度：可以指定，或者默认自动计算宽度；
inline-block的宽度：结合了二者的特点，可指定宽度。

c.高度

inline的高度：由行高间接决定（与字体有关。）
block的高度：由内部文档流元素决定，可以没有高度；
inline-block的高度：与block类似。

（2）溢出

当内容的宽度大于容器就会发生溢出的现象。

overflow的设置值：

auto 灵活设置

scroll 始终显示

hidden 隐藏

visible 直接显示溢出的部分

（3）脱标

脱离文档流, 因为div的宽度是由内部的文档流决定的，但是如果是内部的文档流脱标了，宽度为默认值。常见的脱标的方式为：添加浮动和绝对定位和固定定位。

.container {
    border:1px solid red;
    position：relative;
    top:10px;
    bottom:10px;
}
       .one, .two {
            
            height: 300px;
            background-color: gray;
            margin: 0 auto;
        }
        
        .one {
            border: 20px dotted pink;
        }
        
        .two {
            position: absolutes;
            border: 20px dotted blue;
        }

（4）盒模型

1.content box

内容为多大，width就多大。

2.border box

width=border+padding+content的总和，一般看来border box 的使用比较方便。


     
        .content,
        .border {
            margin: 25px;
            border: 5px solid blue;
            padding: 15px;
        }
        
        .content {
            box-sizing: content-box;
            width: 100px;
            /* 内容值为100px与border值无关 */
        }
        
        .border {
            box-sizing: border-box;
            width: 100px;
            /* border的值+内容的值=100px */
        }

css 浅析