首页 > 其他分享> 文章详细

html小总结（哪些可以直接设置高度和宽度）

2022-02-24 16:33:48 阅读：168 来源： 互联网

标签：块级行内 span parent 哪些元素 100px html 宽度

（1）当然块级元素是可以直接设置高度和宽度的

　　　块级元素：块级大多为结构性标记

　　　　div、h1~h6、ul、ol、dl、form、table、p、hr、pre、address、center、blockquote、marquee

　　　行内元素：行内大多为描述性标记

　　　　span、a、b、strong、i、em、img 、input、textarea、select、u、br、、、sup、sub、del

　　块级元素

　　 1.总是从新的一行开始

　　 2.高度、宽度都是可控的

　　 3.宽度没有设置时，默认为100%

　　 4.块级元素中可以包含块级元素和行内元素

　　行内元素

　　 1.和其他元素都在一行

　　 2.高度、宽度都是不可控的

　　 3.宽高就是内容的宽高，不可以改变

　　 4.行内元素只能包含行内元素，不能包含块级元素

（2）行内元素转换为行内块元素或者块元素

行内元素增加了左内边距，但是没有改变为行内块元素之前：

转换为display: inline-block;行内块元素之后：

<!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>
        .parent {
            position: relative;
            background-color: pink;       
            height: 100px; 
        }

        .parent span {
            background-color: yellow;
            width: 100px;
            height: 50px;            
            padding-left: 100px;
            display: inline-block;
        }        
        .parent i {
            background-color:skyblue;
            width: 100px;
            height: 50px;   
            padding-left:100px;
            display: inline-block;
        }
        .parent a{
            background-color:rgb(49, 231, 49);
            width: 100px;
            height: 50px;   
            padding-left:100px;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="parent">
        <span>span</span>
        <i>iiiiiii</i>
        <a ref="#">aaaaaa</a>    
    </div>
</body>
</html>

（3）将元素设置为“ position: absolute;”之后，就可以直接设置高度和宽度

加绝对定位之前显示效果：

加了绝对定位之后显示效果

<!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>
        .parent {
            position: relative;
            background-color: pink;           
            width: 500px;
            height: 100px;        
        }
        /* 给span没有设置绝对定位之前，设置宽度和高度是不起作用的  */
        .parent span {
            background-color: yellow;
            width: 100px;
            height: 50px;
        }        
        /* 第一个span靠左绝对定位  */
        .parent span:nth-child(1) {
            position: absolute;     
            top:10px;              
        }
        /* 第二个span靠右绝对定位  */
        .parent span:nth-child(2) {
            position: absolute;
            right: 10px;  
            top:10px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <span>测试1</span>
        <span>测试2</span>
    </div>
</body>
</html>

标签：块级,行内,span,parent,哪些,元素,100px,html,宽度
来源： https://www.cnblogs.com/lifengjuan/p/15932395.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html小总结（哪些可以直接设置高度和宽度）