【Web】0基础学Web—浮动、浮动塌陷、层级、margin父子传递、表单高级特性-优快云博客

本文链接：https://blog.youkuaiyun.com/2201_75539182/article/details/144155657

0基础学Web—浮动、浮动塌陷、层级、margin父子传递、表单高级特性

浮动
浮动塌陷
层级
margin父子传递
表单高级特性

浮动

浮动概念:
浮动元素向一边移动，直到遇到父元素边缘或另一浮动元素边缘
浮动特性:
经过浮动的元素会拥有行内块相似特性
浮动元素会脱标，层级提高，会覆盖下边块级元素，不覆盖行级元素
浮动元素顶端对齐

body代码

<body>
    <div class="wrapper">
        <div class="inner">
            <div class="first">
                <img width="100" src="./06-作业/2-爱空间/imgs/1.png" alt="">
            </div>
            <div class="second">
                <img width="150" src="./06-作业/2-爱空间/imgs/1.png" alt="">
            </div>
            <div>
                有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思
                有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思
                有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思
                有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思
                有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思
                有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思
                有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思
                有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思
                有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思有点意思
            </div>
        </div>
    </div>
</body>

浮动

<style>
        .inner {
            height: 500px;
            border: 3px solid black;
        }

        .first {
            border: 3px solid red;
            /* 左浮动 */
            float: left;
        }

        .second {
            border: 3px solid green;
            /* 右浮动 */
            float: right;
        }
    </style>

结果展示

在这里插入图片描述

浮动塌陷

解决父级边框塌陷：
1.设置高度(前提是高度确定)
2.给父元素设置 overflow:hidden(溢出内容会被隐藏掉)
3.伪元素清除浮动

body代码

<body>
    <div class="wrapper">
        <div class="inner">
            <div class="first">
                <img width="100" src="./06-作业/2-爱空间/imgs/1.png" alt="">
            </div>
            <div class="second">
                <img width="150" src="./06-作业/2-爱空间/imgs/1.png" alt="">
            </div>
        </div>
        <div>afabwasaFLAS;LKFG;MLS;GMLDSEW;MLG</div>
    </div>
</body>

解决塌陷

<style>
        .inner {
            /* 1.设置高度(前提是高度确定) */
            /* height: 200px; */
            /* 2.给父元素设置 overflow:hidden */
            /* overflow: hidden; */
            border: 3px solid black;
        }

        .first {
            border: 3px solid red;
            /* 左浮动 */
            float: left;
        }

        .second {
            border: 3px solid green;
            /* 右浮动 */
            float: right;
        }

        /* 3.伪元素消除 */
        .inner::after {
            display: block;
            content: '';
            /* 清除浮动 */
            clear: both;
        }
    </style>

结果展示

在这里插入图片描述

层级

定位的层级高于浮动的层级
后定位的层级更高
z-index调整层级:只有定位的元素可以调整，值越大层级越高，可正可负

body代码

<body>
    <div class="wrapper">
        <div class="inner">
            <div class="first"></div>
            <div class="second"></div>
            <div class="third"></div>
        </div>
    </div>
</body>

层级

<style>
        .first {
            width: 100px;
            height: 50px;
            background-color: #c48b8b;
            /* 浮动脱标 */
            float: left;
        }

        .second {
            width: 200px;
            height: 100px;
            background-color: #99d56c;
            /* 定位脱标 */
            position: absolute;
            z-index: -5;
        }

        .third {
            width: 300px;
            height: 150px;
            background-color: #9911b0;
            /* 定位脱标 */
            position: absolute;
            z-index: -8;
        }
    </style>

结果展示

在这里插入图片描述

margin父子传递

如果子元素和父元素的上边框或下边框重叠，
就会产生margin传递
解决方案:
1.给父元素加边框
2.给父元素加padding
3.overflow:hidden

body代码

<body>
    <div class="outter">
        <div class="inner"></div>
    </div>
</body>

解决margin父子传递

<style>
        .outter {
            width: 300px;
            height: 300px;
            background-color: #4fb8a2;
            /* border: 1px solid #4fb8a2; */
            /* padding: 1px; */
            overflow: hidden;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: #a01f1f;
            margin-left: 100px;
            margin-top: 50px;
        }
    </style>

结果展示

在这里插入图片描述

表单高级特性

placeholder:表单默认提示输入
maxlength:最大字符数
readonly:只读
disabled：禁用，无法通过action提交
required：必填
hidden：隐藏域
autofocus:自动聚焦

body代码

<body>
    <div class="wrapper">
        <form action="#" method="get">
            <input type="text" name="id" value="1001" hidden> <br>
            用户名: <input type="text" name="user" autofocus maxlength="10" placeholder="账号名/手机号"> <br>
            地址: <input type="text" name="address" value="河南" readonly> <br>
            电话: <input type="text" name="phone" required pattern="\d{11}"> <br>
            评论: <textarea name="comment" disabled>你好</textarea>
            <input type="submit" value="发表">
        </form>
    </div>
</body>

高级特性演示

<style>
        /* 元素伪类选择器: a:link-a:hover */
        /* 禁用 */
        textarea:disabled {
            background-color: #c9b1b1;
            /* 去掉textarea缩放按钮 */
            resize: none;
            /* 禁用标识 */
            cursor: not-allowed;
        }

        /* 选择可用的 */
        input:enabled {
            background-color: #6b75c0;
        }

        /* 选择聚焦的input */
        input:focus {
            background-color: #650c50;
        }

        input {
            /* 去掉input自带边框 */
            border: none;
            /* 去掉聚焦后边框 */
            outline: none;
        }

        input[type=submit] {
            /* 改变光标姿势 */
            cursor: pointer;
        }
    </style>