CSSレイアウト

CSS レイアウトを説明する前に、CSS では、HTML 内のラベル要素は一般的に次の 3 つの種類に分類されます。

ブロック要素、インライン要素 (インライン要素とも呼ばれる)、およびインラインブロック要素。

一般的に使用されるブロック要素は次のとおりです:

、

、

...

、

、

、

、、、

一般的に使用されるインライン要素は次のとおりです:

、、
、、、、、、、 ;、<コード>

よく使用されるインラインブロック要素は次のとおりです:

、

要素の分類 -- ブロックレベルの要素

ブロックレベル要素とは何ですか? HTML では、

、

、

、

、

および
• はブロックレベルの要素です。

  を設定すると、要素がブロックレベルの要素として表示されます。次のコードは、display:blockinline 要素 a を block 要素 に変換し、a 要素が block 要素 の特性を持つようにします。 リーリー

  ブロックレベル要素の機能:

  1. 各ブロックレベルの要素は新しい行で始まり、後続の要素も新しい行で始まります。 (とても横暴で、1 つのブロックレベルの要素が 1 行を占有します)
  2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。
  3. 設定されていない場合、幅が設定されていない限り、要素の幅は親コンテナの 100% (親要素の幅と同じ) になります。
  要素の分類 - インライン要素
  HTML では、、、、 および が典型的な

  インライン要素 (インライン要素) (インライン) 要素です。もちろん、ブロック要素は、コードを通じてdisplay:inlineインライン要素に設定することもできます。次のコードは、ブロック要素 div を inline 要素 に変換し、div 要素が inline 要素 の特性を持つようにします。 リーリー

  インライン要素の機能:

  1 と他の要素は同じ行にあります。

  2. 要素の高さ、幅、上下の余白は設定できません

  ;

  3. 要素の幅は、要素に含まれるテキストまたは画像の幅であり、変更できません。 要素の分類 - インラインブロック要素

  Inline-block

  (

  inline-block

  ) は、インライン要素とブロック要素の両方の特徴を持ち、要素をインラインブロック要素に設定するコードです。 (css2.1 の新機能)、 タグはそのようなインライン ブロック タグです。 インラインブロック要素の機能: display:inline-block1 と他の要素は同じ行にあります。

  2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。
  ボックスモデル

  CSSレイアウトモデル

  CSS ボックス モデルの基本概念とボックス モデル タイプを理解した後、Web ページ レイアウトの基本モデルを詳しく掘り下げることができます。レイアウト モデルは、ボックス モデルと同様、CSS の最も基本的かつ中心的な概念です。 ただし、レイアウト モデルはボックス モデルに基づいており、私たちがよく CSS レイアウト スタイルや CSS レイアウト テンプレートと呼ぶものとは異なります。レイアウト モデルが基礎である場合、CSS レイアウト テンプレートは最終的な外部表現です。

  CSS には、英語で要約すると、Flow、Layer、Float という 3 つの基本的なレイアウト モデルが含まれています。

  Web ページでは、要素には 3 つのレイアウト モデルがあります:

  1. フロー モデル (Flow)

  2. フローティング モデル (Float)

  3. レイヤー モデル (Layer)
  
  

  流动模型

  先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

  流动布局模型具有2个比较典型的特征：

  第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

   

  第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

   

  右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

  浮动模型

  块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

  任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

  <span style="color: #000000;">div{
      width:200px;
      height:200px;
      border:2px red solid;
      float:left;
  }
  </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div2"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

   

  层模型--绝对定位

  如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

  如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

  <span style="color: #000000;">div{
      width:200px;
      height:200px;
      border:2px red solid;
      position:absolute;
      left:100px;
      top:50px;
  }
  </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

  层模型--相对定位

  如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

  如下代码实现相对于以前位置向下移动50px，向右移动100px;

   

  <span style="color: #000000;">#div1{
      width:200px;
      height:200px;
      border:2px red solid;
      position:relative;
      left:100px;
      top:50px;
  }
  
  </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

  层模型--固定定位

  fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

  <span style="color: #000000;">#div1{
      width:200px;
      height:200px;
      border:2px red solid;
      position:fixed;
      left:100px;
      top:50px;
  }
  </span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

  隐性改变display类型

  有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

   1. position : absolute 

   2. float : left 或 float:right 

  简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

  如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。

  <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>进入课程请单击这里<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #000000;">
  css代码
  
  </span><span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
  .container a</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
      position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
      width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
      background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
  <span style="background-color: #f5f5f5; color: #000000;">}</span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>