CSS：盒子的定位与浮动

CSS--盒子定位、浮动与居中

HTML中的每个元素都是一个盒子

浏览器对HTML文档进行解析，根据盒子的属性对其进行排列。每个元素默认使用标准文档流定位

标准文档流：是指浏览器读取HTML内容后对元素进行排列的一种标准方式。浏览器会根据读取到标签的先后顺序来排列HTML元素，按照从左至右、自上而下的顺序排列。行内元素从左至右排列，块级元素自上而下排列。

通过display属性可以将行内元素按块级方式来显示，并可以设置width和height。也可以将块级元素行内显示。

display的取值有：block、inline、inline-block和none。

给元素加上 display:none; 属性，元素不但会隐藏还会隐藏它的物理空间。

给行内元素加上 display:block; 属性，行内元素就会具有块级元素的属性。

给块级元素加上 display:inline; 属性，行内元素就会具有行内元素的属性。

给行内元素加上 display:inline-block; 属性，仍为行内元素，但是可以设置width及height属性称为行内块元素。

CSS定位

广义的“定位”是指将某个元素放置于某个位置，HTML中的定位通过position属性来实现。

定位按照 position 的取值分为以下四种：

position:static;		静态定位（默认定位）

position:relative;		相对定位

position:absolute;		绝对定位

position:fixed;			固定定位

1、静态定位

当position的取值为static时，即为静态定位。

该取值也是position的默认值，使用静态定位的标签将按照标准文档流的组织方式在页面中排列。一般的元素定位都属于静态定位。

2、相对定位

当position属性设置为relative时，即为相对定位（参照元素本身的位置）。

设置为相对定位的元素按照标准文档流的规则在网页中排列，但是相对定位的元素可以设置其left、right、top和bottom属性来进行偏移。

偏移时参照该元素在标准文档流中的原位置，偏移后仅在显示上出现了坐标变化，但其在标准文档流中的位置没有发生任何变化，也就是不脱离标准文档流。

<head>

    <style type="text/css">

        #box1,#box2,#box3{

            width: 150px;

            height: 150px;

            float: left;

            background-color:yellow;

        }

        #box2{

            background-color:red;

            position:relative;	/*相对定位（参照元素本身的位置）*/

            left:50px;

            top:50px;

        }

    </style>

</head>

<body>

    <!-- 相对定位 -->

    <div id="box1"></div>

    <div id="box2"></div>

    <div id="box3"></div>

</body>

演示效果图：

3、绝对定位

当position的取值设置为absolute时，即为绝对定位，绝对定位的元素将脱离标准文档流，不受标准文档流的限制。

元素可以通过设置left、right、top和bottom属性并以页面为参照来进行偏移，绝对定位的元素在标准文档流中不占用其空间，不影响标准文档流中的元素。

1、box2是绝对定位，设置left和top时默认是以body标签的左上角为参照物。（几乎不用！）

2、如果将其容器[父辈元素（id为box）]的层的定位方式设置为relative，则第二个层[子辈元素（class为box2）]的top和left会以[父辈元素（id为box）]的层为参照进行移动（即以id为box盒子的左上角为参照物），作为参照的层称为包含块。（开发常用！如下：）

<head>

    <style type="text/css">

        #box{

            position: relative;	/* 相对定位 */

        }

        .box1,.box2,.box3{

            width: 150px;

            height: 150px;

            float: left;

        }

        .box1{

            background-color: yellow;

        }

        .box2{

            background-color:red;

            position:absolute;	/* 绝对定位（参照父辈元素左上角的位置）*/

            left:50px;

            top:50px;

        }

        .box3{

            background-color: blue;

        }

    </style>

</head>

<body>

    <!-- 绝对定位 -->

    <div id="box">  <!-- 父辈元素 -->

        <div class="box1"></div>

        <div class="box2"></div>   <!-- 子辈元素 -->

        <div class="box3"></div>

    </div>

</body>

演示效果图：

4、固定定位

当position取值为fixed时，即为固定定位，固定定位与绝对定位类似，均会脱离标准文档流。

与绝对定位的参照不同，固定定位参照浏览器窗口或其他显示设备的窗口，当用户拖动浏览器窗口的滚动条时，固定定位的元素将保持相对于浏览器窗口不变的位置。

<head>

    <meta charset="UTF-8">

    <style type="text/css">

        #box1{

            position: fixed;    /*固定定位*/

            width: 150px;

            height: 150px;

            border: 2px solid red;

            background-color: yellow;

            margin-top: 10%;

            margin-left: 10%;

        }

    </style>

</head>

<body>

    <!-- 固定定位 -->

    <div id="box1">固定定位</div>

    <div id="box2">

        li{测试元素 $}*50

    </div>

</body>

演示效果图：

盒子的浮动

在HTML中，可以通过float属性将块级元素向左或向右浮动，直至其外边缘碰到包含它的元素或另一个浮动元素的边框为止。

多个浮动的元素可以显示在同一行内，浮动元素会脱离标准文档流，不占标准文档流中的位置。

盒子的浮动实际是通过设置元素的float属性来完成的，其属性主要取值有none、left和right。

当float为none时，不浮动，此时元素会按照默认的标准文档流的方式来处理。

当float为left时，向左浮动，此时元素会脱离标准文档流，不占文档流中的位置空间。

当float为right时，向右浮动，此时元素也会脱离标准文档流。

浮动塌陷:

如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。

处理浮动塌陷:

1、给父级元素设置高度

2、设置空div，利用clear属性:both，left，right不占文档流中的位置空间。

3、使用overflow:hidden;属性

3.1、清除浮动

3.2、将超出父级盒子多余的部分给隐藏掉

4、使用伪元素

<head>

    <style>

        .content {

            height: 200px;

            background-color: pink;

        }

        .box {

            padding:10px 50px;

            background-color: yellow;

            /*设置浮动*/

            float: left;

        }

        /*清除浮动

        	伪元素：

        		::after		<!--在元素之后添加内容-->

        		::before	<!--在元素之前添加内容-->

        		::first-line	<!--向文本的首行添加特殊样式-->

        		::first-letter	<!--向文本的第一个字母添加特殊样式-->

        */

        .clearfix::after {

            content: "."; /*在伪元素中content属性必不可缺，建议向清除浮动的伪元素内容内添加“.”*/

            /*清除浮动（both:清除左右浮动）*/

            clear: both;

            /*把行内元素转化为块级元素*/

            display: block;

            /*优化操作*/

            line-height: 0;

            font-size: 0;

            opacity: 0;

            height: 0;

        }

    </style>

</head>

<body>

    <div class="nav clearfix">

        <div class="box">1</div>

        <div class="box" style="background-color:red;">2</div>

        <div class="box">3</div>

        <!-- 此处【伪元素】清除浮动 -->

    </div>

    <div class="content">

        <!-- 内容区 -->

    </div>

</body>

演示效果图：

盒子居中

元素上下居中：

margin:0 auto;	/* 元素上下居中 */

使用margin的auto属性实现左右的要求：

1、需要居中的子盒子必须是块级元素。

2、需要居中的子盒子需要设置内容区的宽度。

3、需要居中的子盒子不能脱离文档流。

元素上下左右居中：

<head>

    <style>

        .parent {

            width: 200px;

            height: 200px;

            background-color: teal;

            position: relative;

        }

        .child {

            width: 100px;

            height: 100px;

            background-color: pink;

            /*第一步：让子盒子的左上角为父盒子的中心点*/

            position: absolute; /* 绝对定位*/

            top: 50%;   /*往下移动父盒子高度的一半*/

            left: 50%;  /*往右移动父盒子宽度的一半*/

            /*第二步：让子盒子的中心点处于父盒子的中心点*/

            margin-top: -50px;  /*子盒子向上移动子盒子高度的一半*/

            margin-left: -50px; /*子盒子向左移动子盒子宽度的一半*/

        }

        /* 圣杯布局和双飞燕布局 */

    </style>

</head>

<body>

    <div class="parent">

        我是父盒子

        <div class="child">我是子盒子</div>

    </div>

</body>

演示效果图：