元素布局篇

知识要点

掌握行内元素和块状元素的水平及居中方法
了解图片居中的几种方法
熟练运用负margin属性来设置消除边框距离，margin重叠
了解三栏布局的两种方式并掌握

元素居中样式

行内元素

水平居中代码

text-align: center;

垂直居中代码：

height:100px;line-height:100px;

 元素行高与外框高度一致

块级元素

多个块级元素水平居中代码

margin: 0 auto;text-align:center;
 /*块级元素上下之间初始距离为0*/

块级元素垂直居中：
已知需要居中的元素高度，代码如下：

margin-top: -50px;
height:100px
/* 设置为负一半高度 */

未知需要居中的元素高度

/*html代码/*
<ul class="center04">
<li class="li-main">
                未知高度：
                <div class="block0">高度100的div</div>
            </li>
 </ul>

 /*css代码*/
.center04 li.li-main{
    height: 200px;
    position: relative;
}

居中一张图片方法：

/*html代码*/
<li class="li-maing-center01">
                <img src="./01.JPG" alt="">
            </li>
css代码段
 /* 居中一张图片：方法1 */
.img-center01 {
    position: relative;
}
.img-center01 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 
/* 居中一张图片：方法2 */
/.img-center01 {
    position: relative;
}
.img-center01 img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
} 
/* 居中一张图片：方法3 */
.img-center01 {
    text-align: center;
}
.img-center01::after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.img-center01 img {
    vertical-align: middle;
}

margin在布局中的多样使用

负margin应用

HTML代码

<div class="container">
        <ul>
            <li>子元素1</li>
            <li>子元素2</li>
            <li>子元素3</li>
            <li>子元素4</li>
            <li>子元素5</li>
            <li>子元素6</li>
            <li>子元素7</li>
            <li>子元素8</li>
        </ul>
    </div>

css代码

.container {
    width: 460px;
    height: 210px;
    border: 4px solid #333;
    overflow: hidden;
}
.container li {
    float: left;
    width: 100px;
    height: 100px;
    background: #2D93CA;
    margin: 0 20px 10px 0;
}
.container ul {
    margin-right: -20px;
    /* 设置右端溢出margin宽度为-20px */
    list-style-type: none;
    
}

实现内容：将本可以容纳在第一行却排版在第二行的li容器通过设置负margin属性来消除margin边框距离。

margin重叠

/*html代码段*/
 <div class="box03 margin-box01">第一个盒子</div>
    <div class="box03 margin-box02">第二个盒子</div>

    /*css代码段*/
    .box03 {
    width: 50%;
    height: 30px;
}
.margin-box01 {
    margin-bottom: 20px;
    background-color: aquamarine;
}
.margin-box02 {
    margin-top: 10px;
    background-color: #2D93CA;
}

解决方法：

• 外层元素padding代替

• 外层元素 overflow:hidden;

• 内层元素绝对定位 postion:absolute:

• 内层元素 加float:left;或display:inline-block;

• 内层元素padding:1px;

• 内层元素透明边框 border:1px solid transparent;

实现内容：通过margin设置的边框距离，取最大部分（即重叠部分消除功能）

三栏布局两种方式：

圣杯布局中间弹性区域

/*html代码段*/
<div class="box1">
        <div class="center">圣杯布局中间弹性区域</div>
        <div class="left">左固定</div>
        <div class="right">右固定</div>
    </div>
    /*css代码段*/
.box1 {
    border: 1px solid red;
    height: 100px;
    padding: 0 80px;
}
.box1 .left {
    width: 80px;
    height: 100px;
    background-color: aliceblue;

    float: left;
    margin-left: -100%;
    position: relative;
    left: -80px;   
}
.box1 .right {
    width: 80px;
    height: 100px;
    background-color: antiquewhite;

    float: left;
    margin-left: -80px;
    position: relative;
    right: -80px;
}
.box1 .center {
    width: 100%;
    height: 100px;
    background-color: aquamarine;
    
    float: left;
}

实现原理：设置三个div，第一div设置宽度设置百分百占屏width：100%；
剩下两个div排版第二行用float:left;+margin:left来设置占比首行div；
一个通过负Marin属性设置margin-left:-100%到首行首列，另一个通过负margin属性设置margin-left:自身宽度到首行末列，再通过设置首div左右占屏宽度为剩下两个div宽度达到中间弹性功能

双飞翼布局中间弹性区域

实现原理：设置四个div，第一个div里外面嵌套一个div，第一div设置宽度设置百分百占屏width：100%；
剩下两个div排版第二行用float:left;+margin:left来设置占比首行div；
一个通过负Marin属性设置margin-left:-100%到首行首列，另一个通过负margin属性设置margin-left:自身宽度到首行末列，在嵌套的外面div上设置
代码：

width: 100%;
    float: left;

达到占屏100%且中间内容有弹性属性