CSS各個定位和顯示效果——每天一遍小知識

前言

這是我在這個網站整理的筆記，接下來還會持續更新。
B站用戶名：RodmaGO
作者：RodmaChen
轉載說明：務必註明來源，附帶本人博客連接。

一.顯示屬性——display

1.塊元素——block

• 介紹：塊元素是佔據最大可用寬度的元素，前後都有換行符。
• 事列：下例中的樣式規則將內聯<span>元素顯示爲塊級元素：

HTML

<span>內容</ span> 

CSS

span {
   display: block;
}

作者：RodmaChen

2.內聯元素——inline

• 介紹：不強制換行

p { 
   display：inline ; 
}

3.隱藏元素——none

介紹：元素將被隱藏，並且頁面將顯示爲該元素不在其中。

h1 {
   display: none;
}

二.是否顯示——visibility

介紹：visibility屬性指定是否一個元素是可見（visible）或隱藏（hidden）。

HTML

<div class="hidden">
   This text will not display in browser.
</div>

CSS

div.hidden {
   visibility: hidden;
}

三.定位——position

1.基本概念

1. CSS定位屬性允許您定位元素。它還可以將元素放置在另一個元素之後，並指定當元素的內容太大時應該怎麼做。作者：RodmaChen
2. 可以使用top，bottom，left，right屬性定位元素。但是，首先要設置position屬性，否則這些屬性將不起作用。

2.靜態定位——static

HTML元素默認情況下處於靜態位置。始終根據頁面的正常流程來定位靜態定位的元素。作者：RodmaChen

<p class="position_static">作者博客https://blog.csdn.net/weixin_46654114</p>

p.position_static {
   position:static;
   top: 30px;
   right: 5px;
   color: red;
}

靜態定位的元素不受top，bottom，left和right屬性的影響。

3.固定定位——Fixed Positioning

固定位置的元素相對於瀏覽器窗口定位，並且即使滾動窗口也不會移動。

p.position_fixed {
   position: fixed;
   top: 30px;
   right: 5px;
   color: red;
}

通俗的話講就是：一動不動。

4.相對定位——Relative Position

相對於自身的一種定位，隨意改變移動他的位置並不會影響其他元素的位置。作者：RodmaChen

HTML

<p>作者是誰 <span>RodmaChen </span> 給個贊吧。

CSS

p {
   width: 350px;
   border: 1px black solid;
   position: fixed;
}
span {
   background: green;
   color:white;
   position: relative;
   top: 150px;
   left: 50px;
}

相對定位的元素的內容可以移動並與其他元素重疊，但是仍保留該元素的空間。

5. 絕對定位——Absolute Position

1. 絕對定位使用通常是父級定義position:relative定位，子級定義position:absolute絕對定位屬性，並且子級使用left，right，top，bottom進行絕對定位。
2. 絕對定位的元素可以與其他元素重疊。

6.自我總結，代碼效果

HTML

<p>沒有定義的段落</p>
<p>沒有定義的段落</p>
<p>沒有定義的段落</p>
<p>沒有定義的段落</p>
<p>沒有定義的段落</p>
<p>沒有定義的段落</p>



<p>沒有定義的段落</p>

<p class="abs">這是絕對定位  作者 RodmaChen. </p>
<p>沒有定義的段落</p>
<p>沒有定義的段落</p>
<p>沒有定義的段落</p>

<p class="fix">這是固定定位 作者  RodmaChen </p>

<p>沒有定義的段落</p>
<p>沒有定義的段落</p>


<p class="rel">這是相對定位 作者 RodmaChen</p>


<p>沒有定義的段落</p>
<p>沒有定義的段落</p>

<p>沒有定義的段落</p>
<p>沒有定義的段落</p>

CSS

.abs {
    width: 150px;
    left:100;
    border: 3px black solid;
    position: absolute;}
    /* it works without top/bottom
    or left/right */
.fix {
    width: 150px;
    border: 2px red dotted;
    position: fixed;
    top:50; left:100;}
    /* work only with positioning */
.rel {
    width: 150px;
    border: 1px blue dashed;
    position: relative;}

輸出效果

作者：RodmaChen
本人博客：https://blog.csdn.net/weixin_46654114
qq：1342709867
轉載說明：務必註明來源，附帶本人博客連接。

請給我點個贊鼓勵我吧