|
|
@@ -0,0 +1,71 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* 行块元素 */
|
|
|
+ /* 行元素他的大小是根据内容撑开 */
|
|
|
+ /* 行元素不接受宽高属性 */
|
|
|
+ /* 行元素设置margin 上下无效 左右是有效的 */
|
|
|
+ span{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: red;
|
|
|
+ /* margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px; */
|
|
|
+
|
|
|
+ /* display 转换当前标签的显示模式 */
|
|
|
+ /* block 块元素 */
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .box{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: blue;
|
|
|
+ /* inline 行元素 */
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .span1{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: rebeccapurple;
|
|
|
+ /* 行块元素 inline-block*/
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box1{
|
|
|
+ width: 100px;
|
|
|
+ border:3px solid black;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!-- <div class="box">123</div>
|
|
|
+ <span>hello</span><span>world</span>
|
|
|
+ <div class="box">123</div> -->
|
|
|
+
|
|
|
+ <!-- img标签是行块元素 即具备行元素和块元素的特点 -->
|
|
|
+ <!-- 行块元素特点：多个元素在同一行并且可以设置高度宽度 -->
|
|
|
+ <!-- <img src="./image/phone.png" alt="img">
|
|
|
+ <img src="./image/phone.png" alt="img"> -->
|
|
|
+
|
|
|
+
|
|
|
+ <span class="span1"> hello </span>
|
|
|
+ <span class="span1"> world </span>
|
|
|
+
|
|
|
+ <div class="box1">
|
|
|
+ <img src="./image/img1.jpg" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
