HTML5学习——第七天

最新推荐文章于 2024-08-21 13:29:36 发布

Nefertari Emotional

最新推荐文章于 2024-08-21 13:29:36 发布

阅读量336

点赞数 5

文章标签： html5 学习前端

本文链接：https://blog.csdn.net/weixin_64683517/article/details/140617407

版权

1.标签的显示模式

1.块级标签/元素(block)：

特点:

1.独占一行

2.宽度默认是父元素的宽度,高度默认由内容撑开

3.可以设置宽高

p div h1 - h6 header footer nav section

2.行内元素(inline)

特点:

1.一行可以排列多个

2.不能设置宽高

3.宽度和高度默认由内容撑开

span b strong i em s del font a

3.行内块元素(inline-block)

特点:

1.一行可以排列多个

2.可以设置宽高

input textarea select

2.显示模式的转换

 <style>
        /* 浏览器在识别行内元素和行内块元素的时候,把他们当做文字来识别 */
        div{
            width: 200px;
            height: 200px;
            background-color: plum;
            /* 转换行内块 */
            display: inline-block;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* 转行内元素 */
            display: inline;
        }
        span{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 转块级元素 */
            display: block;
        }
    </style>

3.标签的嵌套规则

<body>
    <!-- 1.p标签中不能嵌套块级标签,能嵌套行内和行内块元素 -->
    <p>
        <!-- <p></p> -->
        <!-- <div></div> -->
        <!-- <h1></h1> -->
        <!-- <span></span> -->
        <input type="text">
    </p>

    <!-- 2.a标签里面可以嵌套任何标签,除了它自己 -->
    <a href="#">
        <!-- <div></div> -->
        <!-- <input type="text"> -->
        <!-- <img src="" alt=""> -->
        <a href="#"></a>
    </a>

    <!-- 3.块级标签里面一般嵌套行内和行内块元素 -->
    <div>
        <span></span>
        <input type="text">
    </div>
    <h1>
        <span></span>
        <input type="text">
    </h1>
    <ul>
        <li><span></span></li>
    </ul>

    <!-- 4.行内元素里面只能嵌套行内元素 -->
    <span>
        <b>
            <i>
                <u>
                    <s>你好世界</s>
                </u>
            </i>
        </b>
    </span>

4.二级菜单（鼠标划入之前隐藏，划入后显示）

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .list_box{
            width: 500px;
            height: 50px;
            background-color: pink;
            /* list-style: none; */
        }
        .list_box>li{
            float: left;
            width: 20%;
            height: 100%;
            text-align: center;
            line-height: 50px;
        }
        .list_box>li:hover{
            background-color: aqua;
        }
        .list_box ul{
            background-color: gray;
            display: none;
        }
        .list_box>li:hover>ul{
            display: block;
        }
    </style>

5.定位

1.相对定位:

特点:

1.配合方向词移动,相对方向的方向词同时出现,优先执行left top

2.相对自身原本位置进行移动

3.占有原本位置,没有脱标(保持自身原本的显示特点)

使用场景: 让标签小范围移动,微调

2.绝对定位

特点:

1.在页面中不占位置,脱标

2.配合方向词移动(相对方向的方向词同时出现,优先执行left top)

3.默认参照浏览器的可视区域移动

应用场景: 标签之间的叠放(配合相对定位实现对应效果)

绝对定位:拼爹型的定位,绝对定位默认参照浏览器可视区域移动,如果父级身上有定位,那么参照最近的有定位的父级移动

显示的优先级:标准流<浮动<定位

Nefertari Emotional

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习——第七天

绝对定位:拼爹型的定位,绝对定位默认参照浏览器可视区域移动,如果父级身上有定位,那么参照最近的有定位的父级移动。2.配合方向词移动(相对方向的方向词同时出现,优先执行left top)1.配合方向词移动,相对方向的方向词同时出现,优先执行left top。3.占有原本位置,没有脱标(保持自身原本的显示特点)应用场景: 标签之间的叠放(配合相对定位实现对应效果)2.宽度默认是父元素的宽度,高度默认由内容撑开。3.默认参照浏览器的可视区域移动。1.一行可以排列多个。1.一行可以排列多个。
复制链接

扫一扫