前端·CSS布局基础

呼神护卫

想做一个平凡但很棒的人

知识点1：重置样式

因不同浏览器对标签的解析各不相同，重置css样式可以让标签在不同浏览器下产生相同的效果，减少默认样式可能带来的问题。

通常将重置样式写在reset.css中，如：

/*去掉边界与修改默认字体*/
body, div, dl, dt, ul, li, h1, h2, h3, h4, h5, h6, input, form, a, p, textarea {
   margin: 0;
   padding:0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*去掉列表前面的小点*/
ul, ol, li {
   list-style: none;
/*去掉超链接下划线*/
   text-decoration: none;
/*去掉图片边框*/
img {
   border: none;
/*清除浮动*/
.clearfloat {
   zoom:1;
.clearfloat:after{
   display: block;
   clear: both;
   content: "";
   visibility: hidden;
   height: 0;
}

知识点2：元素水平居中

1.对于行内元素：对父元素设置text-align:center；

2.对于定宽块级元素：设置左右margin为auto；

3.对于不定宽块级元素：设置position:absolute, left:50%, transform:translate(-50%, 0);

4.flex布局，justify-content:center；

知识点3：元素垂直居中

1.对于行内元素：设置父元素的line-height为父元素高度；

2.对于定高块级元素：设置margin-top或margin-bottom为(父元素高度-子元素高度)/2；

3.对于不定高块级元素：设置position:absolute, top:50%，transform:translate(0, -50%);

4.flex布局，align-items:center；

知识点4：两栏布局

（假定左侧固定宽度，右侧自适应）

方法1：双inline-block。将左右两个div均设为display:inline-block;，用vertical-align:top;来实现顶端对齐，对父容器设置font-size:0;来消除div间的空格；

方法2：双float。将左右两个div均设为float:left;（或者另一个为right）。由于应用了浮动，父元素需要清除浮动；

方法3：左float+右margin-left。左div设为float:left;，右div的margin-left设为左div的宽度。注意清除浮动；

方法4：左absolute+右 margin-left。左div设为，右div的margin-left设为左div的宽度。需修改父容器position为relative。

知识点5：三栏布局

（假定左右两侧为固定宽度，中间宽度自适应）

方法1：自身浮动法。左div左浮动，右div右浮动，中div的左右margin分别设为左右div的宽度。需要在html中将中div放最后；

方法2：绝对定位法。左div绝对定位于左上角，右div绝对定位于右上角，中div的左右margin分别设为左右div的宽度；

方法3：margin负值法。三栏均向左浮动，左div设margin-left:-100%，右div设margin-left为负的自身宽度，中div设width:100%。需要在html中将中div放最前。

知识点6：圣杯布局

定义：

1. header和footer占屏幕全部宽度，高度固定；

2. 中间contaier部分是一个三栏布局，left和right宽度固定，middle宽度自适应。

实现：

1.header和footer设width:100%；

2.中间的三栏布局用margin负值法来实现。会发现中间栏被左右两栏各覆盖了一部分内容；

3.给container设置padding-left和padding-right分别为左栏和右栏的宽度；

4.将左右两栏设置为相对定位，并将左栏left设为负左栏宽度，右栏right设为负右栏宽度。

参考：

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        header,
        footer {
            height: 100px;
            width: 100%;
            background-color: #bbbbbb;
        .container {
            height: 300px;
            padding-left: 200px;
            padding-right: 300px;
        .container div{
            float: left;
            position:relative;
        .left {
            width: 200px;
            height: 300px;
            background-color: #DC698A;
            margin-left: -100%;
            left:-200px;
        .middle {
            width: 100%;
            height: 300px;
            background-color: #3EACDD;
        .right {
            width: 300px;
            height: 300px;
            background-color: #8CB08B;
            margin-left: -300px;
            right:-300px;
    </style>
</head>
    <header>头部</header>
    <div class="container">
        <div class="middle">中间栏</div>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
    </div>
    <footer>底部</footer></body>
</html>

知识点7：双飞翼布局

定义：双飞翼布局和圣杯布局的区别在于如何处理中间栏被遮挡的问题。

实现：中间栏中再放置一个div用于显示内容，其margin-left设为左边栏宽度，margin-right设为右边栏宽度。

其他：圣杯布局和双飞翼布局都使得中间栏在DOM结构上优先，以便先行渲染。

知识点8：弹性布局flex

弹性布局flex是2009年W3C提出的一种新布局，可以简便、响应式地实现各种页面布局，较新版本浏览器均支持flex。

只需设置display:flex即可将某元素设为flex容器，其所有子元素自动成为容器成员，称为flex项。flex项沿着两个轴main axis（主轴）和cross axis（交叉轴）来布局。

弹性布局有以下特点：

1.弹性布局的项目（item）默认没有间隔；

2.弹性布局默认不改变项目的宽度；

3.弹性布局默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度；

4.弹性布局将使得子元素的float、clear和vertical-align属性失效。

容器属性有：

1.flex-direction：指定主轴方向。默认为row（从左到右排成一排），其他值有column（从上到下排成一排）、row-reverse和column-reverse；

2.flex-wrap：当项目在一条轴线上排不下时如何换行。默认为nowrap（不换行），其他值有wrap（换行）、wrap-reverse（换行且第一行在下方）；

3.justify-content：控制flex项在主轴上的对齐方式。默认为flex-start（开始处对齐），其他值有flex-end（结束处对齐）、center（在主轴居中）、space-around（沿着主轴均匀分布，并在两端都留有一点空间）、space-between（均匀分布但不会在两端留下空间）；

4.align-items：控制flex项在交叉轴上的对齐方式。默认为stretch（所有flex项沿着交叉轴方向拉伸以填充父容器），其他值有center（保持原有高度但会在交叉轴居中）、flex-start（顶边对齐且不拉伸）、flex-end（底边对齐且不拉伸）、center（居中且不拉伸）。

项目属性有：

1.order：改变flex项的位置而不影响到dom树里元素的顺序。默认为0，order大的项在显示顺序中更靠后；

2.flex-grow：放大比例，默认为0（不拉伸宽度），如果所有项目都为1，则它们将等分剩余空间（如果有的话）；

3.flex-shrink：缩小比例，默认为1（如果空间不足，项目将缩小），如果一个项目为0而其他项目为1，则空间不足时前者不缩小；

4.flex-basis：指定项目最小值，剩余的可用空间将根据分配比例共享。默认为auto（项目本来大小）；

5.flex是上述三个值的缩写，默认为0 1 auto；

6.align-self：用于单独对项目设置对齐方式，可覆盖align-items。默认继承父元素align-items，没有父元素则为stretch（高度自动拉伸），其他值同样有flex-start、flex-end、center。

应用案例：使用flex实现三栏布局

#container {
    display: flex;
#center {
    flex: 1;
#left {