CCS入门

碎碎念

CSS的中文名是层叠样式表，他的作用只有一个，那就是美化网页。

由于坎坷的发展历程，css一直为人诟病的地方在于它的语法，不仅漏洞百出，还十分的复杂难用，在css3出现以前，要做出一个复杂的网页，免不了各种淫巧奇技，这些“css hack”在我自己刚接触的那段时间里，真有种生不如死的感觉，初学者想把css这团毛球解开，得花上不少功夫。

布局

学CSS，核心就在于布局，不夸张说，掌握布局就等于学会了一半了。

1.常用居中方法

水平居中

行内元素：对父元素设置text-align:center;

定宽块状元素: 设置左右margin值为auto;

通用方案: flex布局，对父元素设置display:flex;justify-content:center;

垂直居中

父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height

父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;

块状元素:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;

通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。

2.二列&三列布局

二列布局的特征是侧栏固定宽度，主栏自适应宽度。

三列布局的特征是两侧两列固定宽度，中间列自适应宽度。

之所以将二列布局和三列布局写在一起，是因为二列布局可以看做去掉一个侧栏的三列布局，其布局的思想有异曲同工之妙。

a. float+margin

原理说明：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应。

布局步骤:

对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动。

对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

CSS清单:

.left{    width: 100px;    float: left;}.right{    width: 200px;    float: right;}.main{    margin-left: 100px;    margin-right: 200px;}

一些说明:

注意DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列（圣杯布局和双飞翼布局都会用到）。

这种布局方式比较简单明了，但缺点是渲染时先渲染了侧边栏，而不是比较重要的主面板。

二列的实现方法

如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。

b. position+margin

原理说明：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。

布局步骤:

对两边侧栏分别设置宽度，设置定位方式为绝对定位。

设置两侧栏的top值都为0，设置左侧栏的left值为0， 右侧栏的right值为0。

对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

CSS清单:

.left, .right {    position: absolute;    top: 0;    width: 200px;}.left {    left: 0;}.right {    right: 0; }.main {    margin: 0 200px;}

一些说明:

本方法不限制DOM书写顺序，先写主面板会使主面板部分优先渲染（一般主面板会比侧栏内容重要）。

与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。

如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。

二列的实现方法

如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。

c. 圣杯布局(float + 负margin)

原理说明：

主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。

布局步骤:

三者都设置向左浮动。

设置主栏宽度为100%，设置两侧栏的宽度。

设置 负边距，左侧栏设置负左边距为100%，右侧栏设置负左边距为负的自身宽度。

设置主栏的padding值给左右两个子面板留出空间。

CSS清单:

.main {            float: left;          width: 100%;    }  .left {          float: left;            width: 190px;            margin-left: -100%;                  position: relative;      left: -190px;  }  .right {            float: left;            width: 230px;            margin-left: -230px;    position: relative;    right: -230px;  }#bd {            padding: 0 230px 0 190px;    }

一些说明

DOM元素的书写顺序不得更改。

主面板部分优先渲染（一般主面板会比侧栏内容重要）。

当面板的主栏内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置主栏的min-width属性或使用双飞翼布局避免问题。

二列的实现方法

如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的padding-right值，其他操作相同。反之亦然。

d. 双飞翼布局(float + 负margin )

原理说明：

双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在主栏元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，主栏的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。

布局步骤:

三者都设置向左浮动。

设置main-wrap宽度为100%，设置两个侧栏的宽度。

设置 负边距，left设置负左边距为100%，right设置负左边距为负的自身宽度。

设置主栏的margin值给左右两个子面板留出空间。

CSS清单:

.main-wrap {            float: left;          width: 100%;    }  .left {          float: left;            width: 190px;            margin-left: -100%;  }  .right {            float: left;            width: 230px;            margin-left: -230px;  }.main {        margin: 0 230px 0 190px;}

一些说明

主面板部分优先渲染（一般主面板会比侧栏内容重要）。

圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局主栏的最小宽度不能小于左侧栏的缺点。

双飞翼布局不用设置相对布局，以及对应的left和right值。

通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置position: relative; left: 190px;,可以实现left+right+main的布局。

二列的实现方法

如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置main-wrap的margin-right值，其他操作相同。反之亦然。