6-24 块元素行内元素

TVTOwO

于 2019-06-24 10:52:25 发布

阅读量118

点赞数

分类专栏：课后总结

课后总结专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在这里插入图片描述

块元素

行元素，独占一行
加个颜色，看看块元素的效果

<style>
        .box {
            background-color:green
        }
</style>
</head>
<body> 
	<div class="box">hello </div>
	<p>whord</p>
	<div class="box">I am no happy</div>

</body>

行内元素

<style>               
  	.box {width:250px;                            
  		background-color:yellow                        
  		}          
  </style>      
  </head>     
  <body>   
  	<div class="box">            
  		<a href="#">链接？？？</a>            
  		<a href="#">链接？？？</a>            
  		<a href="#">链接？？？</a>        
  	</div>        
  </body>

在这里插入图片描述
display:inline-block

<style>         
	.box {width:500px;             
		height:300px;             
		border:1px solid #000;             
		margin:50px auto 0;        
		 }
	.box a {                 
		background-color:gold;                 
		width:100px;                 
		height:50px;                
		padding:0 10px;                 
		display:inline-block;             
		} 
</style> 
</head> 
<body>    
	<div class="box">
       		<a href="#">链接？？？</a>
       		<a href="#">链接？？？</a>
       		<a href="#">链接？？？</a>
       		<a href="#">链接？？？</a>
       		<a href="#">链接？？？</a>
</div>
</body>

display属性

在这里插入图片描述