元素的显示模式及特性

最新推荐文章于 2024-06-13 10:05:06 发布

风之形h

最新推荐文章于 2024-06-13 10:05:06 发布

阅读量186

点赞数

文章标签：开发语言

本文链接：https://blog.csdn.net/m0_75160723/article/details/130785538

版权

文章目录

块级元素
行内元素
行内块元素
元素显示模式转换
标签的嵌套

块级元素

显示特点:

独占一行
高度默认是父级元素的高度，高度效果默认有内容撑开

代表标签：

div 、 p、 h系列、 ul 、li、 dl、 dt、 dd 、 form 、 header 、 hav 、 footer

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*div块：独占一行：默认宽度为父级的100%；添加高度和宽度都生效 */
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            
        }
    </style>
</head>
<body>
    <div>未来可期</div>
    <div>前程似锦</div>
</body>
</html>

运行结果：

（这里div的父级为body，如果不添加盒子的宽，盒子的宽度就是页面的宽度）

行内元素

显示特点：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

代表标签：

a 、span 、 b、u、i、strong、ins、em、del

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 行内：不换行；设置宽高不生效；尺寸和内容的大小相同 */
        .box{
            width: 300px;
            height: 300px;
            background-color: green ;
            
        }
    </style>
</head>
<body>
    <span class="box">span</span>
    <a href="#" class="box">超链接</a>
    <em class="box">em</em>
    <u class="box">u</u>
    <i class="box">i</i>
    <s class="box">s</s>
    <strong class="box">strong</strong>
    <ins class="box">ins</ins>
    <del class="box">del</del>
</body>
</html>

运行结果：

（如果改变字体大小，标签宽高也会改变）

例：

在style内添加此代码

运行结果：

行内块元素

显示特点：

一行可以显示多个，但宽度不够时才会换行
可以设置宽高

代表标签：
input、texttarea、button、select

注：img标签有行内块元素特点，但是chorm调试工具中显示结果是行内（inline）特点

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 一行可以显示多个，可以设置宽高，不加尺寸显示为原图大小 */
        
        .b{
            width: 300px;
            height: 300px;
            background-color:pink;
        }
    </style>
</head>
<body>
   
    <input type="">世界和平
    <textarea name="" id="" cols="30" rows="10">世界和平</textarea>
    <button class="b">世界和平</button>
    <button class="b">世界和平</button>
    <button class="b">世界和平</button>
    <select name="" id="">世界和平</select>
</body>
</html>

运行结果：

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 一行可以显示多个，可以设置宽高，不加尺寸显示为原图大小 */
        img{
            width: 300px;
            height: 300px;
       
    </style>
</head>
<body>
    <img src="./草原三剑客.jpg" alt="">
    <img src="./草原三剑客.jpg" alt="">
    
</body>
</html>

运行结果：

元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

属性	效果	使用频率
display：block；	转化为块元素	较多
display：inline-block；	转化为行内块元素	较多
display：inline；	转化为行内元素	较少

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*div块：独占一行：默认宽度为父级的100%；添加高度和宽度都生效 */
        div{
            width: 300px;
            height: 300px;
            background-color:skyblue;
            
            /* 转换为行内块 ,特点：显示在一行里，依旧有宽高 */
            display: inline-block;

            
        }
    </style>
</head>
<body>
    <div>好好学习</div>
    <div>天天向上</div>
</body>
</html>

运行结果：

示例2 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*div块：独占一行：默认宽度为父级的100%；添加高度和宽度都生效 */
        div{
            width: 300px;
            height: 20;
            background-color:aqua;
            
            

            /* 转化为行内，特点：显示在一行里，没有宽高 */
            display: inline;
        }
    </style>
</head>
<body>
    <div>醉后不知天在水</div>
    <div>满船清梦压星河</div>
</body>
</html>

运行结果：

标签的嵌套

HTML嵌套规范注意点：

块级元素一般作为大容器，可以嵌套文本、块级标签、行内元素、行内块等但是不能嵌套div、p、h
a标签内部可以嵌套任意元素但是a标签不能嵌套a元素

p和div、h系列标签不能互相嵌套

示例1：

<p>
        <div>div</div>
</p>
    <!-- 虽然照样可以运行，但是游览器会自动补</p>和<p> -->
    <!-- 此时p和div是并列关系 -->

运行结果：

打开检查会发现

此时p和div是并列标签

示例2：

 <!-- p里面不能包含h标签 -->
    <p>
        <h1>这是一个一级标题</h1>
    </p>

运行结果：

打开检查发现此时p和h1也是并列标签

风之形h

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
元素的显示模式及特性

div 、 p、 h系列、 ul 、li、 dl、 dt、 dd 、 form 、 header 、 hav 、 footer。注：img标签有行内块元素特点，但是chorm调试工具中显示结果是行内（inline）特点。（这里div的父级为body，如果不添加盒子的宽，盒子的宽度就是页面的宽度）目的：改变元素默认的显示特点，让元素符合布局要求。打开检查发现此时p和h1也是并列标签。p和div、h系列标签不能互相嵌套。但是不能嵌套div、p、h。但是a标签不能嵌套a元素。
复制链接

扫一扫