CSSスパン

<スパン> 要素は、

に似た一般的なHTML要素です。 。思い出してください。divは主にウェブページのレイアウトに使用される一般的なコンテナであり、ブロックであるため、できるだけ多くのスペースを占有します。 エレメント。 
 
 
 スパンはインラインです エレメント。それらは必要なだけのスペースを占有し、主に何かを強調するために使用されます。 
 
 
 それぞれの視覚的表現は次のとおりです。
  <！DOCTYPE html>      Divs vs Spans      Divs 
 私はdivです


私できるだけ多くのスペースを占有する


スパン
私はスパンです私必要なだけのスペースを占有します。テキストを非常に強調します。 スパンはdiv内に入ることができます...
...他のテキストとは異なるスタイルになります...
 ...そして display：inline-block   
    
 クラスを使用してスパンとdivをグループ化し、CSSの色と背景色を変更します。  display：inline-block を追加しない限り、スパンの高さや幅は変更できないことに注意してください 財産。 
 
 
 連携すると次のようになります。
  <！DOCTYPE html>      Divs / Spans      DivとSpansを一緒に使用する：
   Div 1：メインの全体的なコンテナー
   Div 1a：ヘッダー

DivはWebレイアウト用のボックスを作成できます
 
 Div 1b：サイドバー-メインコンテンツ
    Div 1b.1  サイドバーコンテナ 
   Div 1b.2  メインコンテナ  子供11b.2.1
 子供21b.2.2
 
 
 
 フッターコンテナここに移動
 
    
 
 スパンとdivは、他のHTML要素と連携して機能し、Webサイトの基本的な構成要素を作成します。スパンは、divとは別にスタイルを設定して、強調することができます。 
 

            

               

            
                
                    
                    CSS：オブジェクトフィット        
                
                
                    CSSスティッキーフッター     
                    
                
             

             
                 
                    
 
                         
                         
                             
                                 CSSFlexbox 
                             
                             
                               CSS Flexboxモデルは、確立されたCSSボックスモデルを改善するために作成されました。 Flexboxモデルには、Boxモデルの主要な要素（マージン、パディング、境界線、コンテンツ）が引き続き含まれていますが、コンテナ/親の子でスペースを最適に埋める柔軟性を提供します。    このチュートリアルは、フレックスボックスモジュールを少しよく理解するのに役立ち、サイトの応答性を高めることができます。   以下は、基本的なフレックスボックスモデルのデモンストレーションのスターターコードです。フレックスボックスについて説明するときは、それに従ってください。   <!DOCTYPE html                             
                         
                     
 
                         
                         
                             
                                 CSSでNoneを表示しない 
                             
                             
                               要素を削除するには、CSSのdisplaynoneプロパティ値を使用します。 noneプロパティ値を実装する例を見てみましょう- 例  例を見てみましょう- <!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: orange;
   color: white;
}
p.demo {
   display: none;
}
span.demo1 {
   display: inline;
}