[Note] Normal Flow and Out of Flow-CSS -

正常流(Normal Flow)

先大致講解區塊元素（Block elements)與行內元素(Inline elements)在HTML的默認佈局

區塊元素

區塊元素在HTML中預設為display:block;會跟隨父元素寬度，同時建立多個區塊元素排列方式從HTML程式碼從上往下渲染。

以下方為例：在Ｂ區塊元素前後另起一行區塊元素，A, C會與Ｂ區元素上下分開，各自獨立佔滿父元素。

HTML

<!--Html-->
<div class="box">
  <h2>A</h2>
</div>
<div class="box">
  <h2>B</h2>
</div>
<div class="box">
  <h2>C</h2>
</div>

CSS

/* CSS */
.box{
  background:#E5E8EE;
  margin-bottom:10px;
  text-align:center;
  color:#B7B7B7;
  border-radius:12px;
}

行內元素

行內元素預設為display:inline;無法設定width、height其寬高會隨者內容佔滿，行內元素排列方式會由左至右並列。

HTML

<!--Html-->
<a href="#">btn</a>
<a href="#">btn1</a>

CSS

/* CSS */
.box{
  background:#E5E8EE;
  margin-bottom:10px;
  text-align:center;
  color:#B7B7B7;
  border-radius:12px;
}

上述提及瀏覽器默認排列組合，區塊元素排列由上至下，行內元素由左至右，按照代碼排列渲染至頁面中，該佈局稱為正常流。

脫離常規流 (Out of Flow)

可透過變更屬性來改寫預設佈局，如：定位(position)、浮動元素(float)。

其中定位(position)有五種：

靜態定位 `position: static`

呈現如預設值，若有必要還原預設值可使用此語法。

相對定位 `position: relative`

在父元素內移動元素位置，子元素可加上position:relative; 設置top, right, bottom, left從父元素內推動子元素。

HTML

<!--Html-->
<p>Hi I'm<span>here.</span>ya</p>

CSS

/*CSS*/
span{
    position: relative;
    top:20px;
    font-weight: bold;
    background-color:#0037FF;
    color:#fff;
}

絕對定位 `position: absolute`

若在父層範圍內將子元素推移

父元素position:relative;子元素position:absolute;

在子元素設定top,right,bottom,left正或負數值，讓子元素依據父元素定位做推移。

HTML

<!--Html-->
<div class="papa">
<div class="child"><h2>Child</h2></div>
</div>

CSS

/*CSS*/
.papa{
    position: relative;
    background-color:#EFF1F5;
    text-align: center;
    height: 200px;
    border-radius: 10px; 
}

.child{
    position: absolute;
    top:10px;
    left: 10px;
    background-color:#002bc7;
    color: #fff;  
    padding: 50px;
    border-radius: 10px;   
}

絕對定位 `position: fixed`

該元素與viewport相對定位，設定屬性top,right,bottom,left 會依據viewport寬高設定數值推動此元素位置。

黏性定位 `position: sticky`

受限於父元素設定，將子元素設為position:sticky，設定top,right,bottom,left其閾值，當子元素滑動到達閾值且超過，位置會在瀏覽器呈現固定顯示。

e.g. A元素設有position: sticky，top:0px;當畫面捲動至A設定數值，Ａ會固定瀏覽視窗上方，直至滑到下一個設有position: sticky、top:0px;B元素，B會取代Ａ位置。若父元素範圍設有C, D…相通屬性元素，顯示方式以此類推。

HTML

<div class="wrap">
  <nav class="nav">
    <h2>I am Sticky<//h2>
  </nav>
  <article class="wording">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum id atque nisi nemo beatae velit eaque veritatis optio possimus eos commodi repellendus, eum ut quae! Eaque inventore exercitationem nobis adipisci.
    Inventore ipsa eum eius ipsam maxime, a dignissimos eveniet, sit consequatur omnis totam neque placeat temporibus soluta perspiciatis quia commodi blanditiis cum magni provident maiores! Harum laborum quae voluptas rem!
    Dolorem tenetur rem sapiente in earum asperiores cum officia est aperiam nulla repellat nisi natus eaque, blanditiis accusantium. Voluptatibus magni quidem architecto expedita illum hic, ex dolore consequatur unde aliquid?
    Eius aut atque, numquam quos sed ab non natus mollitia expedita at eaque magni consectetur, repellendus ex doloribus necessitatibus iusto tempore quidem maxime vitae laudantium pariatur quod. Iste, esse labore.
    Architecto repellat quisquam explicabo corporis, iusto suscipit dolorum accusamus quo inventore voluptates laudantium alias id hic aliquam quod dolore, autem delectus harum odit quae repudiandae, a eligendi! Exercitationem, excepturi praesentium!
    Nemo adipisci pariatur et aspernatur, minus, cumque commodi veniam soluta velit eligendi repellendus voluptatum cupiditate repudiandae itaque eos non reprehenderit dicta. Minus eligendi, voluptas praesentium quaerat asperiores facilis veniam alias.
    Itaque, ipsam laboriosam dicta earum reprehenderit, id alias neque totam dolorum facere modi fugit tenetur necessitatibus, architecto ipsum. Unde aliquam minus dignissimos natus aperiam? Aperiam harum veritatis animi earum explicabo.
    Pariatur unde veritatis id officiis debitis cumque beatae molestias quasi laudantium maiores earum, at quos modi fuga hic consequuntur nobis tempore eius! Inventore illum in ipsum recusandae illo, optio dignissimos?
    Fuga debitis repellat, maxime laudantium rem iure assumenda hic ad quis consequatur culpa labore, perspiciatis et. Doloribus, maxime nihil fugiat aliquid distinctio optio quia itaque magni praesentium. Laudantium, cum saepe.
    Iure deleniti sequi laborum, ut laudantium tenetur libero minus at in nesciunt quibusdam quos ex quidem quaerat ducimus delectus consequuntur itaque reprehenderit voluptas magnam! Obcaecati ipsa corrupti beatae quibusdam necessitatibus! </p>
  </article>
   <nav class="nav2">
    <h2>I am Sticky2</h2>
  </nav>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt expedita doloribus molestias, at aliquid distinctio ad, deserunt saepe totam maiores cumque non et neque omnis ipsum eaque accusamus est? Voluptatem!
  Magni esse tempora fugit consequatur quam a neque quod velit quidem optio hic dolores, molestiae perspiciatis beatae laudantium quas fuga officia officiis asperiores odit ducimus necessitatibus qui praesentium amet. Non.
  Architecto vel adipisci dignissimos pariatur voluptatum, nostrum, ratione eligendi laboriosam dolorum nihil, nam debitis quis rem ducimus ab quibusdam quidem incidunt minima earum. Magni veniam officia doloribus, beatae odio nostrum!
  Ut distinctio nesciunt unde, iusto eius deserunt quia doloremque impedit, ipsa consectetur magnam cupiditate rem excepturi quam consequuntur recusandae possimus. Alias deserunt quisquam iure, ex ducimus magni provident quaerat enim!
  Atque quibusdam excepturi cumque quas doloribus dolores labore harum inventore ea quam nostrum, autem laborum, mollitia architecto hic asperiores nesciunt? Necessitatibus mollitia saepe numquam minima dolorem quas dolor facere sunt.
  officia doloribus, beatae odio nostrum!
  Ut distinctio nesciunt unde, iusto eius deserunt quia doloremque impedit, ipsa consectetur magnam cupiditate rem excepturi quam consequuntur recusandae possimus. Alias deserunt quisquam iure, ex ducimus magni provident quaerat enim!
 Atque quibusdam excepturi cumque quas doloribus dolores labore harum inventore ea quam nostrum, autem laborum, mollitia architecto hic asperiores nesciunt? Necessitatibus mollitia saepe numquam minima dolorem quas dolor facere sunt
   Atque quibusdam excepturi cumque quas doloribus dolores labore harum inventore ea quam nostrum, autem laborum, mollitia architecto hic asperiores nesciunt? Necessitatibus mollitia saepe numquam minima dolorem quas dolor facere sunt
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic sed aut, nisi labore quas dolores quis eum ut praesentium reprehenderit consectetur, est quaerat voluptatum explicabo. Neque debitis aspernatur odit facilis.
  Commodi alias nam sint quod perferendis corporis ullam dolorum animi delectus ad id accusantium est quisquam, quas totam unde iure. Ipsum porro sequi tempore numquam dicta! Porro fuga nulla ipsam.
  Cupiditate debitis, ex eius error, doloribus delectus voluptates sed deleniti consequatur reiciendis officiis obcaecati veritatis rem omnis non voluptas. Blanditiis sunt dolorum perspiciatis. Iste ullam quae assumenda suscipit qui. Voluptatem?
  Nulla odit explicabo corrupti tenetur similique voluptates maiores accusamus quia ut. Similique tempore ipsa minus. Architecto ullam dolore mollitia nulla ratione corporis fuga neque in. Quidem laudantium qui obcaecati similique!
  Vitae explicabo saepe perferendis ea odio dignissimos voluptate, eos nostrum accusamus nemo sint iure, ratione assumenda at asperiores quis, id ullam harum excepturi iusto veritatis! Voluptate laboriosam fuga quaerat ipsum?
  Quo quis dolores molestiae vero at hic corrupti labore, vitae sunt est itaque minima autem neque modi cum quam eum nam, quos temporibus tempora repellat voluptatem. Repudiandae soluta error ad.
  Nihil, incidunt eaque velit consequuntur quibusdam ducimus ullam tempore alias voluptatibus qui unde, laborum beatae iure tenetur similique! Architecto modi ullam deleniti voluptate esse consequuntur explicabo facilis eos non illo?
  Laborum, nisi soluta exercitationem aliquid quidem sed deserunt repellat dolore dolor possimus adipisci officia vel ullam atque. Voluptatibus, esse laudantium omnis aliquam soluta corporis distinctio neque culpa expedita non odio.</p>
 <footer class="footer">
   <h2>footer</h2>
  </footer>
</div>

CSS

.wrap{
  width:900px;
  margin:0 auto;
}


.nav{
    margin-top:50px;
    position: sticky;
    top:0px;
    background-color: #002bc7;
    color: #fff;
    text-align: center;
    padding:10px;
}

.nav2{
    position: sticky;
    top:0px;
    background-color: #000000;
    color: #fff;
    text-align: center;
    padding:10px;
}

.wording{
   background-color:#E0F0FF;
}

p{
  color:#999999;
}

.footer{
   background-color:#4285F4;
   text-align:center;
   padding:20px;
   color:#fff;
}

Run Code

浮動元素 `position: float`

半脫離文檔流，子元素在父元素有限範圍內脫離，父元素會讓出子元素物件位置，將原本內容環繞在物件周圍。

須留意父元素在未設定高度之下，通常是由子元素撐出高度，但是當子元素設定position:float; 會影響父元素判斷，導致無法撐出正確排列內容，此狀況可以透過清除浮動，讓子元素按照規則排列顯示。

HTML

<!--Html-->
<div class="wrap">
<p><img src="https://cdn.logo.com/hotlink-ok/logo-social.png" width="200px">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laboriosam consectetur 
quo obcaecati a ab sequi veritatis voluptas, repudiandae dignissimos beatae nesciunt 
perspiciatis! Ipsa odio et obcaecati minus, mollitia id!
Fugiat architecto suscipit officiis placeat porro nam exercitationem sit corporis eligendi, 
laborum quaerat enim quia obcaecati magnam voluptas accusantium soluta! Itaque voluptas porro 
nihil vel quos placeat! Quos, magni impedit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam quasi nam soluta est. 
Ullam eligendi fugiat iusto id, laudantium nesciunt quo minima repellat nam vitae! Eum sunt 
esse reprehenderit voluptatibus.
Voluptatem, hic aut nesciunt maiores odio inventore provident necessitatibus fugit nisi 
expedita amet unde labore culpa, delectus doloribus molestiae incidunt officiis, reiciendis debitis. Recusandae libero autem rem necessitatibus nostrum enim!
</p>
</div>

CSS

/*CSS*/
.wrap{
  background-color:#ccc;
  margin:0 auto;
  width:800px;
  padding:20px;
}

p{
  color:#999;
}

img{
  float:right;
  border-radius:10px;
}

此為記錄學習筆記，若內容有誤，歡迎留言指正。

Abby

筆記一下