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)行内元素转换为行内块元素或者块元素

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

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

 

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

 

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

<!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;”之后,就可以直接设置高度和宽度

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

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

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

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

<!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>

 

上一篇:中国甲酸钠市场运营模式及投资趋势预测报告2022~2028年


下一篇:【无标题】 全球及中国有机乳清行业营销策略及销售效益预测报告(新版)2022-2027