CSS基础CSS概览样式层叠盒模型体系化学习css 文档流基本单位 **************

CSS概览

1994年，李爵士的挪威同事赖先生提出了CSS概念。

CSS的出众之处，在于层叠样式表。

CSS 2.1是使用最广泛的版本(IE支持）

CSS 3 是现代版本，分模块

要查看哪些浏览器支持何种特性：使用caniuse.com

语法

样式语法

选择器{
    属性名:属性值;
    /*注释*/
}

注意：区分大小写

at 语法

    @charset "UTF-8";
    @import url(2.css); 
    @media (min-width: 100px) and (max-width: 200px) {
        语法一
    }

注意：@charset必须放第一行，前两个at必须以分号结尾

inline元素从左到右，到达最右边才会换行，一个元素在换行的时候可以跨两行

block 元素从上到下，每一个都另起一行

inline-block元素，从左到右，从上到下排列，一个元素在换行的时候不会跨两行，分成两块

inline元素的宽度是内部所有inline元素宽度的总和决定的，不接受用width指定

block默认自动计算宽度，可以用width指定

div元素的默认宽度不是100%，而是auto;永远不要使width:100%,除非特殊情况指定

inline-block默认宽度是内部所有inline元素宽度的总和，但是可以用width指定

不要在inline元素里面写block元素

inline 高度由line-height间接决定，与height, padding无关

block 高度由内部文档流元素决定，可以设置height

inline-block 与block元素类似，可以设置height

当内容的宽度或者高度大于容器时，会溢出。此时，可以用overflow设置会否显示滚动条，auto-灵活设置，scroll-永远显示, hidden是直接隐藏溢出部分， visible是直接显示溢出部分。

`position:absulute`

`float:left`

CSS盒模型是封装HTML元素的盒子，两种盒模型分别是内容盒（content-box）和边框盒（border-box）。

每个盒子由四部分组成，四部分被其相应的边界所限制，这四种区域分别为：content（内容）, padding（内边距）, border（边框） , margin（外边距）.

对于content-box，其width=content的宽度，height=content的高度；

对于border-box,width=border + padding + contend的宽度，height = border + padding + content的高度。

在CSS中设置盒模型：


box-sizing:conent-box;

box-sizing:border-box;

在父元素和首末子元素之间，以及相邻兄弟元素之间的margin会合并显示。

父子合并的消除方法：

兄弟元素合并可以用inline-block消除。