Css之行块属性

   一. 块标签，行内标签以及行内块标签

     1.块标签：

            (1)   定义 ：通俗来说就是，写出代码时，会出现一个大盒子，四方方块，可以在页面中显示。

　　  （2） 特点：

                        <1>元素的高度、宽度、行高和顶底边距都是可以设置的 ;

                        <2>每个块元素都是单独占领一行，如果后年输入其他元素，也将会另起一行 ；

                        <3> 如果不设置宽度的同时，那么它的默认宽度为100%，默认为父元素的宽度。

         （3）代表元素：div 、ul 、li 、ol 、h1~h6 、p、hr、ol 、form等元素

            (4) 代码如下：　

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title></title>
 7     <style type="text/css">
 8         div{
 9             width: 300px;
10             height: 300px;
11             background: lightblue;
12              }
13          
14     </style>
15 </head>
16 <body>
17 
18  <div>我是div</div><div>我是div</div>
19    <h1>我是h1</h1>
20    <h2>我是h2</h2>
21    <h3>我是h3</h3>   
22 <p> 我是p</p>
23 </body>
24 </html>

    2.行内标签：

           (1)   定义 ：一个标签如果跟另一个标签出现，那么这两个元素将在一行出现。

　　  （2） 特点：

                        <1>元素的高度、宽度、行高和顶底边距都是不可以设置的 ;

                        <2>行内元素，可以与其元素共处一行 ；

                        <3> 行内元素的宽高，由该内容进行撑开。

         （3）代表元素：a、span、em、strong、b、i、u、label、br等元素

            (4) 代码如下：　

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title></title>
 7     <style type="text/css">
 8 
 9              span{
10                  width: 300px;
11                  height: 300px;
12                  background: lightgreen;
13             }
14 
15 
16  <span>我是span</span><span>我是span</span>
17 <a href="“>我是超链接a</a>
18 
19 </body>
20 </html>

    3.行内块标签：

           (1)   定义 ：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示。

　　  （2） 特点：

                        <1>可以设置宽高 ;

                        <2>行内元素，可以与其元素共处一行 ；

         （3）代表元素：img,input,textarear等元素

            (4) 代码如下：　

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
    
             input{
                 width: 400px;
                 height: 50px;
             }
    </style>
</head>
<body>


 <input type="text" name="">
  <input type="text" name="">
</body>
</html>

   4.各种标签之间的转换

      (1):块级标签转换为行内标签：display:inline;
      (2): 行内标签转换为块级标签：display:block;
      (3) :转换为行内块标签：display：inline-block;

   5.各个标签之间的区别

     (1): 块标签：独自占领一行、可以进行宽高的数值的设定；
     (2): 行标签：在一行内显示、不可以进行宽高的数值设定；
     (3):  行内块标签：能和其他元素待在一行，能设置宽高；

 

　

posted @ 2021-11-07 15:37  爱吃小橙子  阅读(103)  评论(0)    收藏  举报