02 CSS - 10 浮动与定位 - 《02 编程笔记》

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{width: 300px;list-style: none;background: gray;margin: 100px auto;text-align: center;line-height: 100px;}
        li{width: 100px;height: 100px;float: left;}
        .a{background: skyblue;}
        .b{background: blue;}
        .c{background: red;}
    </style>
</head>
<body>
    <!--
        浮动：让块级元素能在一行
        语法：float: left|right ;  表示向左|右浮动
        浮动的特点：
            1.浮动元素会使元素像浮云一样浮起来，后面的正常元素会自动补位
            2.浮动元素会脱离正常的文档流，但会被父级元素的宽度所约束，所以浮动元素并没有完全脱离文档流。
            3.浮动元素会对它下面正常元素中的文字产生影响
            1.当浮动元素上一行为正常元素时，这个浮动元素只能待在当前行，不能跑到上一行
            2.左浮动：元素会向左跑，从上一行最右边出来继续往左跑，直到遇到有浮动属性的元素才会停止。
            3.右浮动：元素会向右跑，从上一行最左边出来继续往右跑，直到遇到有浮动属性的元素才会停止。
        清除浮动
            语法：clear:left|right|both;     清除左|右|左右浮动
            规定元素哪一侧没有浮动
            清除浮动属性时，要考虑元素的加载顺序
        塌陷问题
            由于父元素中的子元素设置了浮动属性，会在成父元素高度塌陷
        防止塌陷
            1.直接给父元素设置高度来防止父元素塌陷
            2.在元素内容之后加一个块级元素，并清除该元素的浮动来防止父元素塌陷
            3.使用伪元素，在元素内容之后加上一个空内容，转为表格元素，并清除该元素的浮动来防止父元素塌陷
                ul::after{
                    content:"";
                    display:table;
                    clear:both
                }
            4.若多个元素需要防止元素塌陷，可以将元素加上class属性，来实现复用
            5.当父元素设置有高度时，不用清除浮动，父元素没有设置高度时，需要清除浮动
    -->
    <ul>
        <li class="a">浮动测试</li>
        <li class="b">浮动测试</li>
        <li class="c">浮动测试</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 302px;
            height: 302px;
            border: 1px solid black;
            margin: 50px auto;
        }
        .pst1,.pst2,.pst3{
            width: 100px;
            height: 100px;
        }
        .pst1 {
            background: red;
        }
        .pst2 {
            background: green;
            position: absolute;
        }
        .pst3{
            background: blue;
        }
    </style>
</head>
<body>
<!--定位：规定元素的位置，用于没有规律的元素布局
    定位的使用
        1.规定哪一种定位方式
        2.指定在方向上的偏移量top bottom left right
        3.在同一个方向上，只会生效一个方向(上和左优先)
    相对定位：position: relative;
        1.指定了相对定位后，元素就是一个定位元素，元素会脱离文档流，但没完全脱离
        2.相对定位元素脱离了文档流，但原来的位置还需要保留
        3.相对定位是相对于原来的位置进行定位
    绝对定位：position: absolute;
        1.指定了相对定位后，元素就是一个定位元素，元素会完全脱离文档流
        2.绝对定位元素完全脱离了文档流，原来的位置不会保留
        3.绝对定位是相对于最近有定位属性的父元素进行定位的，如果往上没有找到具有定位属性的元素，会相对于body进行定位
    定位偏移量
        1.可以使用尺寸单位
        2.定位可以使用负值，与正值偏移量方向相反
        3.元素相对于哪个元素进行定位，使用百分比时，就是哪个元素宽度或高度的百分比
    层级 z-index: 值(代表哪一层);
        每一个定位元素会独占一层
        通过改变层级来改变元素定位的堆叠顺序
        层级越高，数值越大，默认值是0
        当层级相同时，后写的元素会盖住之前的元素
    固定定位 position: fixed;
        1.指定了固定定位后，元素就是一个定位元素，元素会完全脱离文档流
        2.固定定位元素完全脱离了文档流，原来的位置不会保留
        3.固定定位是相对于浏览器窗口进行定位的
-->
<div class="box">
    <div class="pst1"></div>
    <div class="pst2"></div>
    <div class="pst3"></div>
</div>
</body>
</html>