HTML中的行块属性 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
        <style type="text/css">
            div{
                width: 300px;
                height: 300px;
                background: lightblue;
                display: inline-block; 块元素转换为行内块元素,块元素的宽高属性失效
            
            }
            span{
                width: 300px;
                height: 300px;
                background: pink;
                /*display: inline-block;*/
                
            }
            input{
                height: 30px;
                width: 300px;

            }
            img{
                width: 200px;
                height: 300px
            ;
            }

        </style>
    
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <br>
    <span>
        从前书信很慢，车马很远，一生只能爱一人。
        以后的日子不奢望做的每一个选择都正确，只希望每一个选择造成的后果自己都能接受。
        喜欢就别克制住爱意，留不住就祝她岁岁平安。
        书要好好读，喜欢的人要好好在一起。
    </span>
    <hr>
    <span>
        做自己的治愈者，和自己握手言和。
        这世间所有的温柔都值得我们踮起脚尖。
        习惯了这个词他强大了，代替了所有的一言难尽。
        热水治不了百病，情话过不了一生。
    </span>
    <hr>
    <input type="text" name="">

    <input type="text" name="">
    <img src="./shuai.jpg">
<!-- 
    块属性： div ， p ，ul ，ol ，li ，h1-h6等
    特点：
    1.可以设置宽高
    2.不可以与别人共处一行
    3.不设置宽高的情况下，宽度为100%

    行内属性：  span ， a
    特点：
    1.不可以设置宽高
    2.可以和别人共处一行
    3.其宽高由内容撑开

    行内块属性：img input
    特点：
    1.可以设置宽高
    2.可以和别人共处一行 -->
</body>
</html>

 

1.块属性

如图所示不加  

    display: inline-block;
的话
效果如图

因为

块属性： div ， p ，ul ，ol ，li ，h1-h6等
    特点：
    1.可以设置宽高
    2.不可以与别人共处一行
    3.不设置宽高的情况下，宽度为100%
因为块级元素不能共处一行所以在默认情况下，第二个div会自动换行
这样两个div会分处两行
如果让他们共处一行可以输入一下代码
                display: inline-block; 块元素转换为行内块元素。
效果如图所示

这样的话两个div就可以共处一行啦

2。行内属性

如图所示span，本来在代码中设置为

 

  span{
                width: 300px;
                height: 300px;
                background: pink;
                display: inline-block;
                
            }
但是如上图所示他的宽高是不足300px的。
因为
行内属性：  span ， a
    特点：
    1.不可以设置宽高
    2.可以和别人共处一行
    3.其宽高由内容撑开
所以他的宽高是由内容决定的


如果我们将span的内容扩展一下
<span>
从前书信很慢，车马很远，一生只能爱一人。
以后的日子不奢望做的每一个选择都正确，只希望每一个选择造成的后果自己都能接受。
喜欢就别克制住爱意，留不住就祝她岁岁平安。
书要好好读，喜欢的人要好好在一起。
</span>
<hr>
<span>
做自己的治愈者，和自己握手言和。
这世间所有的温柔都值得我们踮起脚尖。
习惯了这个词他强大了，代替了所有的一言难尽。
热水治不了百病，情话过不了一生。
</span>

效果如图所示

如图所示，他是根据span里面的内容变化而变化，就是

  3.其宽高由内容撑开

3.行内块属性

  行内块属性：img input
    特点：
    1.可以设置宽高
    2.可以和别人共处一行
如图所示

 

两个输入框在一行

因为

input是行内块元素可以共处一行

 

图片太大了

因为img也是行内块元素

我们可以改变他的大小

 代码如图

           img{
                width: 200px;
                height: 300px
            ;
            }

页面效果如下

 

 

 




 

 

 





 

 



 

posted @ 2021-11-08 19:33  doudou帅  阅读(187)  评论(0)    收藏  举报