1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1{ 8 width:200px; 9 height:200px; 10 background-color:orange; 11 } 12 .s2{ 13 border:10px red solid; 14 margin:100px; 15 /* 16 行内元素的盒模型 17 -行内元素不支持设置宽度和高度 18 -行内元素可以设置padding,但是垂直方向padding不会影响页> 面的布局 19 -行内元素可以设置border，垂直方向的border不会影响页面的 布局 20 -行内元素可以设置margin，垂直方向的margin不会影响布局 21 */ 22 } 23 a{ 24 background-color:orange; 25 width:100px; 26 height:100px; 27 /* 28 display用来设置元素显示的类型 29 可选值： 30 -inline将元素设置为行内元素 31 -block将元素设置为块元素 32 -inline-block将元素设置为行内块元素 33 -行内块，即可以设置宽度和高度单又不会独占一行 34 -table将元素设置为一个表格 35 -none元素比在我们页面中显示 36 visibility用来设置我们元素的显示状态 37 -可选值 38 -visible 默认值，元素在页面中正常显示 39 -hiden 元素在页面中隐藏不显示，但依然占据我们页面的 位置 40 */ 41 display:inline-block; 42 43 } 44 45 </style> 46 </head> 47 <body> 48 <a href="javescript:;">超链接</a> 49 <span class="s2">我是sapn2</span> 50 <div class="box1"></div> 51 </body> 52 </html> ~