css 居中，三栏布局，负margin的应用

)

本文简介

通过一天学习有了一些收获和感悟，
本文就是对今天所学内容的总结。

一、怎么实现居中

居中有多种方式

1.水平居中
CSS设置行内元素的水平居中

div{text-align:center} /DIV内的行内元素均会水平居中/

CSS设置行内元素的垂直居中

div{height:30px; line-height:30px} /*DIV内的行内元素均会
垂直居中*/ 

PS:当然，如果既要水平居中又要垂直居中，那么综合一下

div{text-align:center; height:30px; line-height:30px} 

CSS设置块级元素的水平居中

div p{margin:0 auto; width:500px} /*块级元素p一定要设置宽度，

才能相当于DIV父容器水平居中*/ 

CSS设置块级元素的垂直居中

div{width:500px} /*DIV父容器设置宽度*/ 
div p{margin:0 aut0; height:30px; line-height:30px} /*块级元素p也可以加个宽度，

以达到相对于DIV父容器的垂直居中效果

1.块元素水平居中
父级设置 text-align : center;

.parent {
    text-align: center;
}
.parent > div{
    text-align: left;
}

<div class="parent">
    <div>行内元素水平居中：父级设置 text-align : center;</div>
    <span>我是行内元素，我要实现水平居中</span>
</div>

3.块元素水平居中,内容块居中

下面展示一些，头部style内定义。

样式

/*在整个页面上*/
.shuip{width:200px;
       margin:auto;/*块自己居中*/
       text-align:center;/*对齐方式为居中*/
       background-color: yellow;}
       

body

  <div class="shuip">水平居中</div>
       

3.绝对定位水平垂直居中

样式

.spcz{
        
        position: absolute;/*绝对定位*/
        width: 500px;
        height: 300px;
        margin: auto;
        top: 0;
        left: 0;/*绝对定位*/
        bottom: 0;
        right: 0;
        background-color: blueviolet;

    }

body

 <div class="spcz">水平垂直居中</div>

4.绝对定位水平垂直居中(二)

样式

position: absolute;
     width:300px;
     height:200px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: blue;

body

div class="shuipcz">水平垂直居中</div>

三.三栏布局

在这里提几个标签，属性

1. float 浮动
   float：left 左浮动 css 中同一个级别的块级元素默认自上而下排列，在块级元素中加入该属性，使它们自左向右排列。
2. position: relative;
   right: -80px;
   相对定位，相对于上一个元素

1.三栏布局——圣杯布局

body

<h3>左中右布局，左右两边定宽，中间自适应：</h3>
    <div class="box1">
        <div class="center">圣杯布局弹性区域</div>
        <div class="left" >左固定</div>
        <div class="right">右固定</div>

    </div>

样式

  .box1{
            border:1px solid red;
            height: 100px;
            padding:0 80px;

        }
        .box1 .left{
            width: 80px;
            height: 100px;
            background-color:blueviolet;

            float: left;
            margin-left: -100%;
            position:relative;/*问题*/
            left: -80px;
        }
        .box1 .right{
            width: 80px;
            height: 100px;
            background-color: aqua;

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

            float: left;
        }

2.三栏布局——双飞翼

body

<div class="box2">
        <div class="center-box">
        <div class="center">双飞翼布局中间弹性区域</div>
        </div>
        <div class="left">左固定</div>
        <div class="right">右固定</div>
    </div>

样式

.box2{
            border:1px solid red;
            height: 100px;
        }
        .box2 .center-box{
            width: 100%;
            float: left;
        }
        .box2 .center{
            height: 100px;
            background-color: sienna;
            margin: 0 80px;

        }
        .box2 .left{
            width: 80px;
            height: 100px;
            background-color: violet;
            float:left;
            margin-left: -100%;
            
            /*margin-left:-100% 外边框距 由于.center-box占了100%所以.box2
            要出现在前面，就必须 margin-left: -100%;*/
        }
        .box2 .right {
            width: 80px;
            height: 100px;
            background-color: slateblue;
            float: left;
            margin-left: -80px;
        }

四.负margin

margin-left: -30px; 左移

body

<h1>负margin的应用</h1>
    <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>

样式

   .container {
            width: 450px;
            height: 210px;
            border:4px solid yellowgreen;
            overflow: hidden;/*hidden： 隐藏溢出容器的内容且不出现滚动条。*/
            /*margin:0;padding:0;
            去除列表与左边距离*/
        }
        .container li {
            float:left;
            width: 100px;
            height: 100px;
            background:lightcoral;
            margin: 0 10px 10px 0;/*上右下左，顺时针*/
            list-style:none;/*列表去点*/
        }
        .container ul {
            margin-left: -30px;/*左移*/
            margin-top: 5px;

        }

五.块级格式化上下文（BFC）：margin重叠

body

 <h1>块级格式化上下文（BFC）：margin重叠</h1>
   <h3>兄弟</h3>
   <div class="box03 margin-box01">第一个盒子</div>
   <div class="box03 margin-box02">第二个盒子</div>

   <h3>父子</h3>
   <hr/>
   <div class="out-box">
       <div class="in-box">里面的box</div>
   </div>

样式

  .box03 {
            width:50%;
            height: 30px;
        }
        .margin-box01 {
            margin-bottom: 20px;
            background-color: rgb(178, 103, 32);
        }
        .margin-box02 {
            margin-bottom: 20px;
            background-color: lightseagreen;
        }
        .out-box {
            width: 200px;
            height: 200px;
            background-color: lightsteelblue;
            
        }
        .in-box {
            width: 100px;
            height: 100px;
            background: maroon;
            margin-top: 50px;/*margin重叠*/
        }

六.小结

以上就是今天要讲的内容，本文仅仅简单介绍了CSS 的 居中方式,三栏布局和负margin的应用，及块级格式化上下文（BFC）：margin重叠。

网址:https://www.baidu.com