粗大的内捧猛烈进出小视频,日本成人精品视频一区,在线播放亚洲成人av,精品人妻少妇嫩草av专区,亚洲AV永久久久久久久浪潮,性导航app精品视频,九九热精品免费视频,一本一本大道香蕉久在线播放 

  
      
    

        

	
        
		
        
			
        
				
        【CSS基礎(chǔ)學(xué)習(xí)】行內(nèi)元素，塊級(jí)元素，行內(nèi)塊級(jí)元素
        
				
        
					
         2020-4-24      前端達(dá)人      
        
					
					
        
						
					
        
				
        
				
			
        
			
        
				
        
    文章目錄

        

          
    
            
        
          • 
            元素的顯示方式和轉(zhuǎn)換 
        
            • 
        
        
            
            
            
        
            
        
        
            
            
            
        
            
        
            
            元素的顯示方式和轉(zhuǎn)換
        
            
        
            
            塊級(jí)元素
        
            
        
            
            塊級(jí)元素（inline）：
            
塊級(jí)元素可以包含行內(nèi)元素和其它塊級(jí)元素，且占據(jù)父元素的整個(gè)空間，可以設(shè)置 width 和 height 屬性，瀏覽器通常會(huì)在塊級(jí)元素前后另起一個(gè)新行。
            
常見塊級(jí)元素： 
        
            
header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer
            
特點(diǎn)：
            

            
塊級(jí)元素會(huì)獨(dú)占一行
            
高度，行高，外邊距和內(nèi)邊距都可以單獨(dú)設(shè)置
            
寬度默認(rèn)是容器的100%
            
可以容納內(nèi)聯(lián)元素和其他的塊級(jí)元素
            
例如：
            
        
            
            
            
        
            
        
            
            
            
        
            
        
            
            
            
        
            
        
            
            
            
        
            

            <!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>
        div{
            width: 150px;
            height: 150px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div>塊級(jí)元素1</div>
    <div>塊級(jí)元素2</div>
</body>
</html>

            
        
            
            
            
        
            
        
            
            
            
        
            

             
            
        
            
            分析：
            
塊級(jí)元素的高和寬可以被修改，而且塊級(jí)元素會(huì)在一個(gè)塊級(jí)元素之后另起一行。
            

            
行級(jí)元素
            
行級(jí)元素（block）：
            
一般情況下，行內(nèi)元素只能包含內(nèi)容或者其它行內(nèi)元素，寬度和長度依據(jù)內(nèi)容而定，不可以設(shè)置，可以和其它元素和平共處于一行。
            
常見行級(jí)元素：
            
a,b,strong,span,img,label,button,input,select,textarea
            
特點(diǎn)：
            

            
和相鄰的行內(nèi)元素在一行上
            
高度和寬度無效，但是水平方向上的padding和margin可以設(shè)置，垂直方向上的無效
            
默認(rèn)的寬度就是它本身的寬度
            
行內(nèi)元素只能容納純文本或者是其他的行內(nèi)元素（a標(biāo)簽除外）
            
例如：
        
            

            <!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>
        span{
            width: 150px;
            height: 150px;
            font-size: 40px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <span>行級(jí)元素1</span>
    <span>行級(jí)元素2</span>
</body>
</html>

            
        
            
            
            
        
            
分析：
            
對(duì)他的高和寬進(jìn)行修改，但是沒有發(fā)生改變，對(duì)他的字體大小進(jìn)行修改卻發(fā)生了整體大小的改變，所以得出結(jié)論行級(jí)元素的寬高是與內(nèi)容有關(guān)的，且不可修改高寬的屬性，只能對(duì)內(nèi)容修改。
            

            
行內(nèi)塊級(jí)元素
            
行內(nèi)塊級(jí)元素（inline-block）：
            
他包含了行級(jí)元素與塊級(jí)元素的特點(diǎn)，在同一行顯示，可以設(shè)置元素寬度和高度，可以將塊級(jí)元素和行級(jí)元素轉(zhuǎn)化為行內(nèi)塊級(jí)元素。他不屬于基本的元素，是通過修改獲得的。
            
特點(diǎn)：
            

            
和其他行內(nèi)或行內(nèi)塊級(jí)元素元素放置在同一行上
            
元素的高度、寬度、行高以及頂和底邊距都可設(shè)置
            
舉例：
            

            <!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>
        span{
            width: 150px;
            height: 150px;
            font-size: 20px;
            background-color: cadetblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <span>以前我是行級(jí)元素，</span>
    <span>現(xiàn)在我只想做行內(nèi)塊級(jí)元素。</span>
</body>
</html>

            
        
            
            
            
        
            
分析：
            
他可以進(jìn)行修改寬高，也屬于同一行，包含著行級(jí)元素和塊級(jí)元素的特點(diǎn)，他就是行！內(nèi)！塊！級(jí)！元！素！
            

            
顯示方式之間的轉(zhuǎn)化
            
想要轉(zhuǎn)成什么顯示方式 格式
            
塊級(jí)元素 display:inline;
            
行級(jí)元素 display: block;
            
行內(nèi)塊級(jí)元素 display: inline-block;
            
這些直接在元素里面添加就可以了，就會(huì)轉(zhuǎn)換成相對(duì)應(yīng)的格式。
            
舉例：
            
        
            
            
            
        
            

            <!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>
        div{
            width: 150px;
            height: 150px;
            font-size: 30px;
            background-color: cadetblue;
            display: inline;
        }
    </style>
</head>
<body>
    <div>我以前是塊級(jí)元素，</div>
    <div>現(xiàn)在我是行級(jí)元素！</div>
</body>
</html>

            
        
            
            
            
        
            

            
        
            
            
            
        
            
        
            
            
            
        
            
        
            
            
            
        
            
        
            
            分析：
            
在VSC中，修改寬高的代碼已經(jīng)出現(xiàn)了波浪線，證明他是錯(cuò)誤的，所以現(xiàn)在的div已經(jīng)變成了行級(jí)元素。 
        
            
        
            
            
            
        
            
        
            
            
            
        
            
        
            
            
            
        
            
        
            
            
            
        
            
        
            
            
            
        
            
        
            
            ————————————————
            
版權(quán)聲明：本文為CSDN博主「董小宇」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
            
原文鏈接：https://blog.csdn.net/lolly1023/article/details/105715892
        
            
        
            
            
            
        
            
        
            
            
            
        
            
    
          

        				
        
								
			
        
		
        
		
		
	
        


        
    
  
        
    
        日歷
        
    
        
        
        
        
    
        
  
        
    
    
        
      
        鏈接
        
      
          
                
        
    
        
    
        
      
        個(gè)人資料
        
      
    
        
    
        
      
        存檔