CSS传统网页布局的三种方式

CSS传统网页布局的三种方式

补充：网页布局准则

1. 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
2. 先设置盒子大小，之后设置盒子的位置

标准流（普通流/文档流）

• 最基本的布局方式
• 块级元素独占一行，从上向下排序
• 行内级元素从左到右排序，碰到边缘则自动换行

浮动float

浮动可以让多个块级元素一行内排列显示

属性值	描述
none	元素不浮动（默认值），并会显示在其在文本中出现的位置。
left	元素向左浮动。
right	元素向右浮动。
inherit	规定应该从父元素继承 float 属性的值。

• 浮动元素会脱离标准流的控制，移动到指定的位置（俗称脱标），并且浮动的盒子不再保留原先的位置
• 浮动元素会一行内显示并且元素顶部对齐，但若父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
• 浮动元素会具有行内块元素的特性（任何元素都可以浮动）即：
  （1）若行内元素有了浮动，则不需要转换为块级或行内块元素就可以直接设置高度和宽度。
  （2）一般块级元素若没有设置宽度则继承父级元素的宽度，但是添加浮动后它块级元素的宽度将由内容决定。
• 浮动布局的注意点
  （1）浮动元素经常和标准流父级搭配使用（约束浮动元素）。先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。（符合网页布局第一准则）
  （2）一个元素浮动了，理论上其余兄弟元素也要浮动。
  （3）浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
  （4）对于浮动元素来说，块级元素看不见他们，即会占据他们的位置。但是产生了BFC的元素（Block Formatting Context 格式化上下文）和文本类属性元素（inline/inline-block）以及文本都能看到浮动元素，即不会占据他们的位置，会在周围围绕。

定位position

定位允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

属性值	描述
absolute	绝对定位，相对于 static 定位以外的第一个父元素进行定位。
relative	相对定位，相对于其正常位置进行定位。
fixed	固定定位，相对于浏览器窗口进行定位。
static	没有定位（默认值），元素出现在正常的流中。
inherit	规定应该从父元素继承 position 属性的值。

使用了绝对/相对/固定定位的元素，它们的位置可以通过"left", “top”, “right” 以及 “bottom” 属性进行规定。 但是left与right， top与bottom最好不要同时出现。

一般情况下
relative 作为参照物（一般不用来定位）
absolute 作为定位

绝对定位 absolute：

（1）脱离原来的位置进行定位（不保留原来的位置，别的块会占据该位置）。
（2）多层嵌套的情况下，以最近有定位进行定位，如果没有就相对于文档进行定位。

/* css代码 */
* {
    margin: 0;
    padding: 0;
}

.dad {
    position: relative;
    left: 60px;
    top: 50px;
    width: 400px;
    height: 300px;
    background-color: skyblue;
}

.test {
    width: 200px;
    height: 200px;
    background-color: yellow;
}

.absolute {
    position: absolute;
    left: 50px;
    top: 80px;
    width: 310px;
    height: 150px;
    background-color: rgba(255, 0, 43, 0.5);
}

<!-- html代码 -->
<div class="dad">
        <!-- 我是有定位的父级盒子 -->
        <div class="absolute">我是绝对定位，别人可以占据我原来的位置</div>
        <div class="test">我是没有加定位的测试块</div>
</div>

相对定位 relative：

（1）保留原来的位置进行定位（别的块不会占据该位置）。
（2）多层嵌套的情况下，相对自己原来的位置进行定位。

/* css代码 */
* {
    margin: 0;
    padding: 0;
}

.test {
    width: 200px;
    height: 200px;
    background-color: yellow;
}

.relative {
            /* 注释掉下面三行代码就是原来的位置 */
            position: relative;
            left: 100px;
            top: 50px;
            /* 注释掉上面三行代码就是原来的位置，即保留的位置 */
            width: 250px;
            height: 180px;
            background-color: rgba(0, 255, 255, 0.5);
}

<!-- html代码 -->
<div class="relative">我是相对定位，别人不能占据我原来的位置</div>
<div class="test">我只是一个没有加定位的测试块</div>

固定定位 fixed：

（1）滚动条怎么动，它都不会移动。
（2）Fixed定位使元素的位置与文档流无关，因此不占据空间。

/* css代码 */
.fixed {
    /* 使用fixed就可以不随滚动条动，永远正中显示 */
    position: fixed;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    /* 因为是以左顶点进行定位，所以整体位置偏右下，要想以盒子中心为中心定位，则需要使用margin进行反方向移动半个盒子身位 */
    margin-left: -75px;
    margin-top: -75px;
    background-color: rgba(68, 211, 255, 0.5);
}

<!-- html代码 -->
<div class="fixed">
        我是一个你关不掉，又永远居中的方块
</div>
<!-- 手动创造滚动条，添上数字只是为了有一个对比 -->
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>

个人总结，欢迎大家交流探讨！