admin

2_CSS/22_行_块_行块元素.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
-        .box{
+        .box {
             width: 200px;
             height: 200px;
             background-color: red;
         }
-        .text1{
+
+        .text1 {
             width: 200px;
             height: 200px;
             background-color: blue;
@@ -20,6 +21,40 @@
             border: 1px solid black;
             padding-bottom: 20px;
         }
+
+        img {
+            width: 200px;
+        }
+
+        input {
+            width: 200px;
+            height: 100px;
+        }
+        .text2{
+            width: 100px;
+            height: 100px;
+            background-color: red;
+            /* 将元素转换为块元素 */
+            display: block;
+        }
+        .box2{
+            width: 200px;
+            height: 200px;
+            background-color: blue;
+            /* 将元素转换为行内元素 */
+            display: inline;
+        }
+        .box3{
+            width: 200px;
+            height: 200px;
+            background-color: green;
+            /* 将元素转换为行内块元素 */
+            display: inline-block;
+        }
+        .box3{
+            /* 隐藏元素 */
+            display: none;
+        }
     </style>
 </head>
 
@@ -52,6 +87,22 @@
     <div class="box">
         这是一个块元素
     </div>
+
+
+    <!-- 行块元素 同时具备行内元素和块元素的特征 -->
+    <!-- 可以在同一行展示 可以设置宽度和高度 内边距  外边距 都可以使用-->
+    <img src="./img/phone2.png" alt="img">
+    <img src="./img/phone.png" alt="img">
+    <input type="text">
+    <input type="text">
+
+
+    <!-- 切换元素之间的形态 -->
+    <!-- 可以使用css的display属性来切换元素的形态 -->
+    <span class="text2">text2</span>
+    <div class="box2">box2</div>
+    <div class="box3">box3</div>
+    <div class="box3">box3</div>
 </body>
 
 </html>