布局(IFE basic day7)

1、定位

1.1 静态定位

默认行为

1.2 相对定位

position: relative;
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。

1.3 绝对定位

配合使用top，bottom，left和right
被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除。
注意：绝对定位是相对于设置有display:relative的祖先元素，如果没有，最终会相对于元素。

1.4 固定定位

position:fixed
固定定位元素不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

1.5 堆叠顺序

z-index:1;
z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），如果元素是没有定位的，对其设置的z-index会是无效的。
查看例子

2、弹性盒子

使用弹性盒子可以方便且灵活地实现
1）在父内容里面垂直居中一个块内容。
2）使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
3）使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

3 、对齐方式

3.1 水平居中

1）行内元素的水平居中
如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素
2）块状元素的水平居中（定宽）
当被设置元素为定宽块级元素时用 text-align：center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的。
3）块状元素的水平居中（不定定宽）
可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果。当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block（设置为 行内元素 显示或行内块元素）

    

        
1
        
2
        
3
    

css代码：

.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}

3.2 垂直居中

    111111

首先设定两个条件即父元素是盒子容器且高度已经设定。
1）子元素是行内元素，高度是由其内容撑开的。
这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中：
css代码：

.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

2）子元素是块级元素但是子元素高度没有设定
通过给父元素设定display:table-cell;vertical-align:middle来解决：
css代码：

.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　　　display: table-cell;
　　　　vertical-align: middle;
}
 .non-height{
       background: green;
        }

3）子元素是块级元素且高度已经设定
计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2：
css代码：

  .wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
        }
.div1{
            width:100px ;
            height: 100px;
            margin-top: 100px;
            background: darkblue;
        } 

3.3 水平垂直居中

1）水平对齐+行高
text-align + line-height实现单行文本水平垂直居中

测试文字
 

css代码：

.test{
    text-align: center;
    line-height: 100px;
}

2）水平+垂直对齐

1. text-align + vertical-align　　
   在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素。

  
测试文字
 

css代码：

.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

2.若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle

css代码：

.parent{
    text-align: center;
    line-height: 100px;
    font-size: 0;
}
.child{
    vertical-align: middle;
}

七种实现左侧固定，右侧自适应两栏布局的方法

4、圣杯布局

圣杯布局允许：
）有一个固定宽度侧边栏的流体中心，
2）允许中心列首先出现在源代码中，
3）允许任何列成为最高，
4）只需要一个额外div的标记
5）需要非常简单的CSS，最少代码兼容

5、双飞翼布局

双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

6、元素的BFC特性与自适应布局

BFC：块级格式化上下文，常见触发BFC的条件：
1）float的值不为none。
2）overflow的值为auto,scroll或hidden。
3）display的值为table-cell, table-caption, inline-block中的任何一个。
4）position的值不为relative和static。
自适应布局实现的CSS代码：
1）overflow:auto/hidden IE7+
2）display:inline-block IE6/IE7
3）display:table-cell IE8+
清除浮动的通用类语句：

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    content: ''; display: table; clear: both;
}

两栏或多栏自适应布局的通用类语句是（block水平标签，需配合浮动）：

.cell {
    display: table-cell; width: 9999px;
    *display: inline-block; *width: auto;
}

网页宽度自适应布局三种方法:
1）绝对定位法
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

css代码：

html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#a0b3d6;}
#right{right:0; background:#a0b3d6;}
#main{margin:0 210px; background:#ffe6b8; height:100%;}

2）margin负值法
首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（例子为左浮动），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100% margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。

css代码：

html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#main #body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}

3）自身浮动法
左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

css代码：

html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}