网页的布局方式

网页的布局方式其实就是指浏览器如何对网页中的元素进行排版的。

标准流

默认排版方式
块级元素-垂直排版
行内元素、行内块级-水平排版

浮动流：

一种半脱离标准流的排版方式。
脱标：脱离标准流。浮动起来。后面的元素如果没有脱标，会把脱标的元素的位置占住。
不区分行内和块状元素。（即可设置行内元素的宽高）
水平排版，设置有个元素的左对齐或者右对齐，没有居中对齐
浮动流中不可以使用margin：0 auto设置居中对齐

综上所述, 浮动流中的元素和标准流中的行内块级元素很像

        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: right;
        }

<!--
1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的
-->
div{
            border: 1px solid #000;
        }
        p{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }

<!--
1.清除浮动的第一种方式
给前面一个父元素设置高度

注意点:
在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
-->

<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
      .box1 {
        /* height: 20px; */
        background-color: red;
      }
      .box1 p {
        width: 100px;
        background-color: blue;
      }


<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
      .box2 {
        background-color: green;
      }

      .box2 p {
        width: 100px;
        background-color: yellow;
      }
      p {
        float: left;
      }

<!--
1.清除浮动的第二种方式
给后面的盒子添加clear属性

clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素

注意点:
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效
-->
        .box2{
            background-color: green;
            clear: both;
            /* margin-top: 28px; */
        }

//浮动元素不会遮挡住非浮动元素中的文字
//非浮动元素会给浮动元素让位置
//这就是浮动元素字围绕现象
   p{
            width: 500px;
            height: 500px;
            background-color: yellow;
        }
        img{
            float: left;
        }

//清除浮动的第四种方式（#####通过伪元素清除浮动--推荐）（第三种是内墙和外墙法，不常用，没写）
        .box1::after{
            /*设置添加的子元素的内容为空*/
            content: "";
            /*设置添加的子元素为块级元素*/
            display: block;
            /*设置添加的子元素的高度为0*/
            height: 0;
            /*设置添加的子元素看不见*/
            visibility: hidden;
            /*给添加的子元素设置clear: both;*/
            clear: both;
        }
        .box1{
            /*兼容IE6*/
            *zoom:1;
        }

//清除浮动的第五种方式（#####通过overflow清除浮动--推荐）
<!--
1.overflow: hidden;作用
1.1可以将超出标签范围的内容裁剪掉
-->
<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            overflow: hidden;
        }

<!--
1.overflow: hidden;作用
1.2清除浮动
-->
       .box1{
            background-color: red;
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }

<!--
1.overflow: hidden;作用
1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
-->
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            /*border: 1px solid #000;*/
            overflow: hidden;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
        }

<!--
1.什么是浮动元素贴靠现象?
1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
-->
        .father{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        .box1{
            float: left;
            width: 150px;
            height: 300px;
            background-color: red;
        }
        .box2{
            float: left;
            width: 350px;
            height: 100px;
            background-color: green;
        }
        .box3{
            float: left;
            width: 250px;
            height: 100px;
            background-color: blue;
        }

<!--
1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的
-->
        div{
            border: 1px solid #000;
        }
        p{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }

什么时候使用标准流，什么时候使用浮动流

垂直方向上使用标准流，水平方向上使用浮动流
拿到一个很复杂的页面应如何入手？
1、从上至下布局
2、从外向内布局
3、水平方向可以先互粉一左一右，先对其中一边进行布局

定位流

相对定位：

相对定位就是相对于自己以前在标准流中的位置来移动

相对定位注意点

1、相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
2、在相对定位中同一个方向上的定位属性只能使用一个
3、由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
4、由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局【改变的是原来相对位置之前的margin/padding】

       input{
            width: 200px;
            height: 50px;
        }
        img{
            width: 100px;
            height: 50px;
            position: relative;
            top: 20px;
        }

定位流-绝对定位：

1、一般情况下相对于body， 如果祖先类有相对、绝对、固定定位流，以有相对、绝对、固定定位的祖先为参考点（如果几个祖先都有这三种定位流，根据离它最近的），会忽略padding
2、以首屏为参考点，
3、脱离标准流，
4、不区分行内/块级，都可以设置宽高；

<!--
1.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
-->
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .box2{
            width: 2000px;
            height: 100px;
            background-color: green;
        }
        .box3{
            width: 100px;
            height: 2000px;
            background-color: blue;
        }
       

<!--
.一个绝对定位的元素会忽略祖先元素的padding
-->
       .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            border: 10px solid #000;
            padding: 30px;
            position: relative;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
        }

/*
            相对定位弊端:
            相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
            */
 /*
            绝对定位弊端:
            默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
            */
/*
            最好的解决办法：子绝父相
            子元素用绝对定位, 父元素用相对定位
            */

<!--
定位流中不可以使用margin：0 auto使之水平居中
1.如何让绝对定位的元素水平居中
只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
-->
       div{
            width: 300px;
            height: 50px;
            background-color: red;
            /*margin: 0 auto;*/
            position: absolute;
            left: 50%;
            margin-left: -150px;
        }

3定位流-固定定位：position:fixed;
脱离标准流
行内和块级不气愤
不随着页面滚动

<!--
1.什么是固定定位?
固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动

注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级
3.IE6不支持固定定位
-->

<!--
1.什么是z-index属性?
默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的

1.默认情况下定位流的元素会盖住标准流的元素
2.默认情况下定位流的元素后面编写的会盖住前面编写的
3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面

注意点:
1.从父现象
1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面
1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面
-->

<!--
son1能够覆盖son2
-->
.father1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            z-index: 2;
        }
        .father2{
            width: 200px;
            height: 200px;
            background-color:green;
            position: relative;
            z-index: 0;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: salmon;
            position: absolute;
            left: 200px;
            top: 200px;
            z-index: 1;
        }
        .son2{
            width: 100px;
            height: 100px;
            background-color:seagreen;
            position: absolute;
            left: 250px;
            top: 50px;
            z-index: 7;
        }

3定位流-静态定位：