ブロックレベル要素、行内要素および行内ブロック要素の違い

5890 ワード
HTML CSS
cssを学習する過程で、各ページ要素にはdisplay属性があり、その要素のタイプを決定するために使用され、各要素にはdiv要素などのデフォルトのdisplay属性値があり、そのデフォルトのdisplay属性値は「block」であり、「ブロックレベル」要素(block-level)となる.一方、span要素のデフォルトdisplay属性値は「inline」であり、「行内」要素と呼ばれます.今日は、blockとinlineの違いについてお話しします.
よく使われるブロックレベル要素(block):div,p,ul,ol,li,form,dl,pre,h 1,h 2など......
常用行内要素(inline):span,a,label,u,textareaなど.......
ブロックレベル要素の特徴:(display:block;)
a)幅がない場合、デフォルト幅100%、
b)幅の高さを設定することができ、
c)1行を単独で占有し、その幅にかかわらず、次の要素は次の行に並べられる
以下はインスタンスのコード部分です.インスタンスを見てください.ここを押してください.>クリックしてリンクを開きます.



    
    
         —      
    


        
ブロック  の  

		
     ，    100%    height:50px;

		
        height:50px;width:400px;  

		           ，       ，

行内要素の特徴:(display:inline;)
a)幅、幅、高さに応じたコンテンツのサイズを設定できません.
b)他の行の要素と同じ行に並べてもよい.ラベルの間にスペースがある場合は、ブラウザで解析されます.
c)margin:autoはサポートされていません.中央揃え親要素にtextalign:centerを設定できます.彼を中央に表示させます
d)垂直方向のmargin設定はサポートされていません.
e)その上下内ピッチ(padding)は自分にしか有効ではありません.
次に、行の要素のインスタンスコードを示します.インスタンスを見て、ここを押してください.>クリックしてリンクを開きます.



    
    
         —      
    


        
ブロック  の  

		      ，             。   height:200px;height:200px;         

		               。          ，        。

		   margin:auto;  。 margin:auto;   margin:auto;  

		        margin  。  margin-top:20px;margin-bottom:20px;       margin  
		
                        pading 

		

		       (padding)      。 padding-top:20px;padding-bottom:10px;      padding             。 
		

		
                      pading 

		

		
       (padding)          。   ： padding-top:20px;padding-bottom:10px;

在块级元素和行内与元素中，我们也发现块级元素的缺点是会自动换行，而行内元素的缺点是无法设置宽高，不支持垂直方向的外边距合内边距，那么有没有同时支持宽高，又不会自动换行，并且可以设置上下边距的样式呢？inline-block就是这样的一个属性。下面，我们来看看什么inline-block有哪些特性。

行内块元素的特征：(display:inline-block;)

a) 可以和其他元素在同一行显示，但是标签之间的空格会被解析
b) 可以设置宽高。
c) 可以支持垂直方向的margin设置。
d) 不支持margin:auto;居中。
e) ie6 ie7 不支持这个属性。

下面是行内块元素的示例代码             看实例请戳这里——>点击打开链接




    
    
         —      
    


        
ブロック  の  

		
             
 
             。


        
      。  width:800px;height:50px;


		
         margin  。margin-top:10px;


		
   margin:auto;  。 margin:auto;
asp.net core3.1実戦開発(ミドルウェアの詳細)
cssはIEhack方式に対して(最もよく使われる)