您现在的位置:爱折腾>> web>>正文内容

css块级元素与行内元素解析

块级元素行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别。今天简单的介绍下二者的区别。

常见块级元素行内元素

常见的块级元素有:div p form ul ol li 等;

常见的行内元素有:span stronh em 等;

主要区别

1、块级元素独自占一行且宽度会占满父元素宽度,行内元素不会独占一行,相邻行内元素可以排在同一行。

  1. <head> 
  2.     <meta charset="UTF-8"> 
  3.     <title>测试</title> 
  4.     <style type="text/css"> 
  5.     p{background-color: red;}  
  6.     div{background-color: green;}  
  7.     span{background-color: gray;}  
  8.     strong{background-color: blue;}  
  9.     </style> 
  10. </head> 
  11. <body> 
  12.         <p>块级元素一</p> 
  13.         <p>块级元素二</p> 
  14.         <span>行内元素一</span> 
  15.         <span>行内元素二</span> 
  16.    
  17. </body> 

如图:

block&inline1

2、块级元素可以设置weith和height,行内元素设置width和height无效,而且块级元素即使设置宽度也还是独占一行。

  1. <head> 
  2.     <meta charset="UTF-8"> 
  3.     <title>测试</title> 
  4.     <style type="text/css"> 
  5.     p{background-color: red;height: 50px;width: 50%;}  
  6.     div{background-color: green;height: 50px;width: 40%;}  
  7.     span{background-color: gray;height: 70px;}  
  8.     strong{background-color: blue;height: 70px;}  
  9.     </style> 
  10. </head> 
  11. <body> 
  12.         <p>块级元素一</p> 
  13.         <div>块级元素二</div> 
  14.         <span>行内元素一</span> 
  15.         <strong>行内元素二</strong> 
  16.    
  17. </body> 

如图:

block&inline2

3、块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果,但是竖直方向的如padding-top和margin-bottom不会产生边距效果

  1. <head> 
  2.     <meta charset="UTF-8"> 
  3.     <title>测试</title> 
  4.     <style type="text/css"> 
  5.     p{background-color: red;height: 50px;width: 50%;padding: 20px;margin: 20px;}  
  6.     div{background-color: green;height: 50px;width: 40%;;padding: 20px;margin: 20px;}  
  7.     span{background-color: gray;height: 70px;padding: 40px;margin: 20px;}  
  8.     strong{background-color: blue;height: 70px;padding: 40px;margin: 20px;}  
  9.     </style> 
  10. </head> 
  11. <body> 
  12.         <p>块级元素一</p> 
  13.         <div>块级元素二</div> 
  14.         <span>行内元素一</span> 
  15.         <strong>行内元素二</strong> 
  16.    
  17. </body> 

如图:

block&inline3

4、最后是块级元素和行内元素的相关属性:display。其中块级元素对应display:block,行内元素对应display:inline。可以通过修改元素的display属性来切换行内元素和块级元素。

  1. <head> 
  2.     <meta charset="UTF-8"> 
  3.     <title>测试</title> 
  4.     <style type="text/css"> 
  5.     p{background-color: red;display:inline;}  
  6.     div{background-color: green;display:inline;}  
  7.     span{background-color: gray;display:block;}  
  8.     strong{background-color: blue;display:block;}  
  9.     </style> 
  10. </head> 
  11. <body> 
  12.         <p>块级元素一</p> 
  13.         <p>块级元素二</p> 
  14.         <span>行内元素一</span> 
  15.         <span>行内元素二</span> 
  16.    
  17. </body> 

如图:

block&inline4

相关文章