[19/06/07-星期五] CSS基础_布局&定位

Posted 2022-02-09 id-qingxin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[19/06/07-星期五] CSS基础_布局&定位相关的知识，希望对你有一定的参考价值。

一、固定布局（不适应设备的浏览器的变化）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简单布局</title>
        <style type="text/css">
            /*清除默认样式*/
            *
                margin: 0;
                padding: 0;
            
            .header
                width: 1000px;
                height: 100px;
                background-color: yellowgreen;
                margin: 0 auto;
            
            .content
                width: 1000px;
                height: 400px;
                background-color: orange;
                margin: 10px auto;
            
                .left
                    width: 200px;
                    height: 100%;
                    background-color: skyblue;
                    /*设置向左浮动*/
                    float: left;
                        
                .center
                    width: 580px;
                    height: 100%;
                    background-color: royalblue;
                    float: left;
                    margin: 0 10px;
                    
                
                .right
                    width: 200px;
                    height: 100%;
                    background-color: cyan;
                    float: left;
                
            .footer
                width: 1000px;
                height: 100px;
                background-color: salmon;
                margin: 0 auto;
            
            
        </style>
    </head>
    <body>
        <!--头部信息-->
        <div class="header"> </div>
            
        <!--主体内容-->
        <div class="content"> 
            <!--左中右3个div-->
            <div class="left"> </div>
            <div class="center"> </div>
            <div class="right"> </div>    
        </div>
            
        <!--底部信息-->
        <div class="footer"> </div>
            
        
    </body>
</html>

扩展：高度塌陷

　　在文档流中，父元素的高度默认被子元素撑开，也就是子元素多高，父元素就多高。

　　在浮动流中，当为子元素设置浮动以后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，即会导致父元素的塌陷。由于父元素的高度塌陷，所以

会导致父元素下边的元素向上移动，这样页面会很混乱。所以一定要避免高度塌陷。

解决方案1：可以将父元素的高度写死，但是这样父元素的高度不能自动适应子元素高度的改变。所以这种方案不推荐。

解决方案2：

　　根据W3C的标准，在页面中的元素都有一个隐含的属性叫Block Formatting Context 简称BFC，该属性可以打开或关闭，默认是关闭的。

　　当设置开启之后，元素会具有如下的特性：

　　　　1、父元素的垂直外边距不会和子元素重叠。

　　　　2、开启BFC的元素不会被浮动元素所覆盖；

　　　　3、开启BFC的元素可以包含浮动的子元素。

　　如何开启？（只能间接开启）

　　　　1、设置元素浮动（即让父元素也浮动起来）：可以撑开高度，但是可以导致父元素的宽度丢失，而且也会导致下边元素上移

　　　　2、设置元素的绝对定位：跟方案1一样效果

　　　　3、设置元素为inline-block：可以解决问题，但是也是导致父元素的宽度丢失。

　　　　4、将元素的overflow设置为一个非visible的值。一般设置为auto或hidden是最好的方案，推荐设置为hidden，副作用最小。

注意：IE6及以下不支持BFC,它具有一个隐含属性叫haslayout，作用和BFC类似，可以开启这个。

　　　　开启方式：直接将元素的zoom（放大）设置为1即可，副作用最小。zoom： 1 表示不放大元素，可以使用这种方式。只在IE中支持，其他不支持。

解决方案3：

前言：如何清除浮动的影响？

　　　　使用clear来清除其他浮动元素（上边元素）对当前元素（下边元素）的影响（即下边往上移动），其他元素该浮动还浮动，下边的不动即在原来的位置。

　　　　none：默认值，不清除浮动

　　　　left：清除左侧浮动

　　　　right：清除右侧浮动

　　　　both：清除两侧浮动元素对当前元素的影响，即清除对他影响最大的元素的浮动

　　可以在高度塌陷的父元素后边，添加一个空白的div,由于这个div没有浮动，可以撑开父元素的高度，然后再对它清除浮动，这样可以通过这个空白的div撑开高度，

基本没有副作用。使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

　　通过after伪类，选中父元素的后边添加一个空白的块元素，然后清除浮动，原理跟div一样，效果一样，而且不会添加多余的div，最推荐的方式。在IE6不支持，所以

还需要使用haslayout来处理。

二、定位

　　指的是将指定的元素摆放在页面的任意位置。通过position属性来设置

　　可选值：　　static，默认值，元素没有开启定位

　　　　　　　　relative，元素开启相对定位

　　　　　　　　absolute，元素开启绝对定位

　　　　　　　　fixed，元素开启固定定位（也是绝对定位的一种）

　　当开启定位时，可以通过left、right、top、bottom来设置（是相对于自身定位位置的）左侧、右侧、上侧、下侧设置偏移量。通常只使用2个偏移量就可以对元素

定位。一般选择水平和垂直方向的偏移量来为元素定位。相对于自身定位的。

　　1、相对定位（relative）

　　　　　　　当开启相对定位但是不设置偏移量时，元素不会产生任何变化。

　　　　　　　相对定位的元素不会脱离文档流。

　　　　　　　相对定位会使元素提升一个层级。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style type="text/css">
            .box1
                width: 200px;
                height: 200px;
                background-color: red;
            
            .box2
                width: 200px;
                height: 200px;
                background-color: yellow;
                position: relative;
                left: 100px;/*开启左偏移，是相对于自身所在位置*/
            
            .box3
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
            
        </style>
    </head>
    <body>
        <!--div.box$*3 快捷键 创建3个div名字叫box1-3 -->
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>