CSS行内元素盒模型 

 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>        
~

 

posted @ 2020-11-11 17:44  zou-ting-rong  阅读(277)  评论(0)  编辑  收藏  举报