常见布局-CSDN博客

本文链接：https://blog.csdn.net/liujie19901217/article/details/50715200

css布局的三种方式

    1、默认文档流方式
    以默认的html元素的结构顺序显示
    2、浮动布局方式
    通过设置html元素的float属性显示
    3、定位布局方式
    通过设置html元素的position属性显示

    对象浮动后，它就脱离了当前的文档流，可以理解为飘起来了，它原来的地方就空出来了
    它后面的内容就会占用它原来的地方
    浮动是CSS实现布局的一种方式
    none:不浮动
    left:对象向左浮动，而后面的内容流向对象的右侧
    right:对象向右浮动，而后面的内容流向对象的左侧

    浮动是将块元素的霸道属性-独占一行的行为取消，允许其他元素与它一行
    浮动其实是这个块从原来的文档流模式中分离出来，它后面的对象就视它不存在

    常用的布局效果：一行并列式，就是在一行中并列显示多个块元素

    IE6中，子元素的高度超过了父元素的高度，默认会把父元素的高度自动增加

    清除浮动：当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决浮动元素的影响。

    浮动浮动，先浮后动
    浮动的对象，会先漂浮起来，离开原来的位置。后动，就是它后面的对象会向它原来的位置上移动

css中存在三种定位机制

    标准文档流、浮动和绝对定位
    标准文档流：从上到下，从左到右输出文档内容，由块级元素和行级元素构成
    常见块级元素：div,li,ul,dl,dt,p
    常见行级元素：input,img,span,strong
    块级元素和行级元素都是盒子模型
    盒子模型四个组成部分：border,margin,padding,content

相对定位特点

    1、相对于自身原有位置进行偏移；
    2、仍处于标准文档流中；
    3、随即拥有偏移属性和z-index属性；

绝对定位特点

    1、建立了以包含块为基准的定位；
    2、完全脱离了文档流；
    3、随即拥有偏移属性和z-index属性；

    当一个元素设置了绝对定位，没有设置宽度的时候，会根据内容来调节宽度。

    绝对定位设置偏移量，偏移参照标准：
    没有已经定位的祖先元素，以html标签为偏移参照标准；
    有已经定位的祖先元素，以距离其最近的祖先元素为参照标准进行绝对定位偏移。

    绝对定位没有设置偏移量的话：无论是否存在已经定位的祖先元素，都会保持在元素初始位置，并且会脱离文档流

左列定宽，右列自适应

<div id="wraper">
        <div id="left">left</div>
        <div id="right">right</div>
    </div>

#wraper{width: 80%;margin:0 auto;background-color: #ccc;height: 500px;}
        #left{float: left;width: 200px;background-color: red;height: 500px;}
        #right{margin-left:210px;background-color: blue;height: 500px;}

绝对定位

<span class="absolute"></span>
    <div></div>

div{background: red;width: 250px;height: 100px;}
        /*
        元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，
       也就是例如行内元素span设置了absolute后就可以设置height和width属性了。

        span标签被设置成绝对定位，就可以设置height和width属性，而且不占有原本的空间，后面的div元素会顶替上去。
         */
        .absolute{position: absolute;width: 200px;height: 80px;background: #ccc;}

<body style="border: 1px solid #f00;">
    <!--
    一个元素被设置为绝对定位时，会脱离文档流，然后相对其包含块进行偏移。
    一般来说，我们会将一个元素设置为relative来作为absolute元素的包含块。

    有两个绝对定位元素，第一个元素没有position不是static的祖先元素，所以它的包含块是body，根据body进行偏移，
    第二个绝对定位元素设置了一个relative的父元素，它根据父元素进行偏移。
     -->
    <div class="absolute">
        相对于初始包含块定位
    </div>
     <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="relative">
        <div class="absolute">
            相对于最近relative祖先元素定位
        </div>
    </div>
    </body>

div { background: #0094ff; width: 250px; height: 100px; }
        .relative { background: #f00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
        .absolute { background: #00f; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }

相对定位

<!--
    relative定位的元素进行偏移后，不会脱离文档流，还会占据原本的空间。除此之外，我们还要注意一个细节：如果元素设置了margin为负值之后发生重叠的情况下，相对定位的元素会覆盖普通元素。

    relative属性最经常的一个应用应该是作为absolute元素的包含块了，为了限制absolute元素的偏移位置，常常设置其父元素为relative来作为其包含块。
    -->
    <div class="no-relative">
    <!-- 添加了相对定位后，即将no-relative改为relative。第一个元素就会覆盖其他正常的元素了。 -->
    未相对定位的元素
   </div>
   <div class="minus-margin">
    负margin元素
   </div>

div { background: #0094ff; width: 250px; height: 100px; }
            .no-relative { background: #ff6a00; width: 200px; height: 100px; }
            .relative { background: #ff6a00; width: 200px; height: 100px; position: relative; }
            .minus-margin { margin-top: -30px; }

fixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移

包含块

    在详解CSS float属性中我们提到包含块这个概念。对于position属性也有包含块这个属性，它要分几种情况来讨论：
    1.根元素的包含块，根元素一般是html元素，有些浏览器会使用body作为根元素，大多数浏览器，初始包含块是一个视窗大小的矩形
    2.非根元素的包含块，如果该元素的position是relative或static，它的包含块是最近的块级框，表的单元格或行内块的内容边界
    这是相对定位元素的包含块，为最近的块级框，表的单元格或行内块的内容边界，相对定位元素相对于其包含块进行偏移，我们可以简单理解为相对于其原来的位置进行偏移。

    3.非根元素的包含块，如果该元素的position是absolute，则包含块为最近的position不是static的祖先元素。
    简单来说，它的包含块会从父级元素一直向上查找，找到第一个position不是static的元素为止。

    偏移属性
    前面的例子中已经涉及到偏移属性，它指的是元素相对于其包含块的偏移，我们称其为偏移属性，分别是top，bottom，left，right，依次代表上下左右。他们的值可以是具体的数值，也可以是百分比。如果是百分比，top和bottom是相对于包含块高度的百分比，left和right是相对于宽度的百分比。它们也可以设置负值，即有可能将元素移动到包含块的外边。

<div>
       我是父级元素
        <div class="relative">
            我是相对定位元素
        </div>
    </div>

div{background: #0094ff;width: 250px;height: 100px;}
        .relative{position: relative;background: #ff6a00;width: 200px;height: 100px;top: 10px;left: 20px;}