css基礎三

思維導圖：

標準流

所謂的標準流: 就是標籤按照規定好默認方式排列

浮動

是什麼？

float 屬性用於創建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。

特性
1.浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。
2.浮動的元素會具有行內塊元素的特性
3.浮動元素的大小根據內容來決定
4.浮動的盒子中間是沒有縫隙的

有什麼用？

有很多的佈局效果，標準流沒有辦法完成，此時就可以利用浮動完成佈局。因爲浮動可以改變元素標籤默認的排列方式.

怎麼用？

浮動元素經常和標準流父級搭配使用

浮動佈局注意點

1、浮動和標準流的父盒子搭配。

先用標準流的父元素排列上下位置, 之後內部子元素採取浮動排列左右位置

2、一個元素浮動了，理論上其餘的兄弟元素也要浮動。

一個盒子裏面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動，以防止引起問題。

浮動的盒子只會影響浮動盒子後面的標準流,不會影響前面的標準流.

清除浮動

爲什麼要清除浮動

由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不佔有位置，最後父級盒子高度爲 0 時，就會影響下面的標準流盒子。

清除浮動的本質
- 清除浮動的本質是清除浮動元素造成的影響：浮動的子標籤無法撐開父盒子的高度
  注意：

1.如果父盒子本身有高度，則不需要清除浮動
2. 清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。
3.父級有了高度，就不會影響下面的標準流了

清除浮動的方式

1.、額外標籤法

額外標籤法也稱爲隔牆法，是 W3C 推薦的做法。

使用方式：
額外標籤法會在浮動元素末尾添加一個空的標籤。

<div style="clear:both"></div>，或者其他標籤（如<br />等）。

優點： 通俗易懂，書寫方便

缺點： 添加許多無意義的標籤，結構化較差

注意：要求這個新的空標籤必須是塊級元素。

2.父級添加 overflow:hidden(BFC規範) 屬性
可以給父級添加 overflow 屬性，將其屬性值設置爲 hidden、 auto 或 scroll 。

例如：

overflow:hidden | auto | scroll;

優點：代碼簡潔

缺點：無法顯示溢出的部分，如果有子元素想溢出，那麼會受到影響。

注意：是給父元素添加代碼

3.父級添加after僞元素（推薦）

:after 方式是額外標籤法的升級版。給父元素添加：

 .clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 專有 */ 
   *zoom: 1;
 }

優點：沒有增加標籤，結構更簡單

缺點：照顧低版本瀏覽器

代表網站：百度、淘寶網、網易等

4.父級添加雙僞元素（推薦）

給父元素添加

 .clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }

優點：代碼更簡潔

缺點：照顧低版本瀏覽器

代表網站：小米、騰訊等

總結:

1、清除浮動本質是?

清除浮動的本質是清除浮動元素脫離標準流造成的影響

2、清除浮動策略是?

閉合浮動. 只讓浮動在父盒子內部影響,不影響父盒子外面的其他盒子.

3、額外標籤法?

隔牆法, 就是在最後一個浮動的子元素後面添

4、加一個額外標籤, 添加清除浮動樣式.

實際工作可能會遇到,但是不常用

定位

CSS position 屬性

通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。

position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，作爲文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。

relative 相對定位

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。

1.不使元素脫離文檔流
2.不影響其他元素佈局
3.left 、top、right、bottom是相對當前元素自身進行偏移的

absolute 絕對定位

元素框從文檔流完全刪除，並相對於其包含塊定位。

1.使元素完全脫離文檔流
2.使內聯元素支持寬高
3.使塊元素默認寬根據內容決定（讓塊具有內聯的特性）
4.如果定位祖先元素相對於定位祖先元素髮生偏移，沒有定位祖先元素相對於整個文檔發生偏移（絕對、相對、固定）

相對定位、絕對定位案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位實現元素居中</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid;
            /* 設置相對定位作爲box2 的祖先級 */
            position: relative;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 絕對定位 */
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box2"></div>
    </div>
</body>

</html>

效果：

實現下拉菜單：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位實現下拉菜單</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .menu {
            width: 100px;
            height: 30px;
            border: 1px black solid;
            margin: 20px auto;
            /*相對定位 這裏不加的話下面ul的偏移則相對於整個頁面，加了則以這個父容器 */
            position: relative;
        }

        .menu ul {
            width: 100px;
            border: 1px black solid;
            /* 絕對定位 */
            position: absolute;
            left: -1px;
            top: 30px;
            display: none;
            background-color: #ffffff;
        }

        .menu:hover ul {
            display: block;
        }

        .menu ul li:hover {
            background-color: gray;

        }

        p {
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="menu">
        賣家中心
        <ul>
            <li>選項1</li>
            <li>選項2</li>
            <li>選項3</li>
            <li>選項4</li>
        </ul>
    </div>
    <p>測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落</p>
</body>

</html>

fixed 固定定位

元素框的表現類似於將 position 設置爲 absolute，不過其包含塊是視窗本身。
提示：相對定位實際上被看作普通流定位模型的一部分，因爲元素的位置相對於它在普通流中的位置。

1.使元素完全脫離文檔流
2.使內聯元素支持寬高（讓內聯具備塊特性）
3.使塊元素默認寬根據內容決定（讓塊具備內聯的特性）
4.相對於整個瀏覽器窗口進行偏移，不受瀏覽器滾動條的影響

sticky 粘性定位

在指定的位置進行粘性操作

z-index 定位層級

默認層級爲0
嵌套時候的層級問題

其他

顯示框類型

display:none 不佔空間的隱藏
visibility: hidden 佔空間的隱藏

溢出隱藏

定義和用法

overflow 屬性規定當內容溢出元素框時發生的事情。
overflow-x、overflow-y針對兩個軸分別設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* div{ width:300px; height:200px; border:1px black solid; overflow: hidden;} */
    /* div{ width:300px; height:200px; border:1px black solid; overflow: scroll;} */
    /* div{ width:300px; height:200px; border:1px black solid; overflow: auto;} */
    div{ width:300px; height:200px; border:1px black solid; overflow-y: auto; overflow-x: scroll;}
    </style>
</head>
<body>
    <div>
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
        溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
    </div>
</body>
</html>

效果：

透明度與手勢

opacity : 0(透明) ~ 1(不透明)
0.5(半透明)

    注：佔空間、所有的子內容也會透明

rgba() : 0 ~ 1

    注：可以讓指定的樣式透明，而不影響其他樣式

cursor : 手勢
default : 默認箭頭
要實現自定義手勢：
準備圖片： .cur 、 .ico
cursor : url(./img/cursor.ico),auto;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠標手勢</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 鼠標手型 */
            /* cursor: pointer; */

            /* 自定義鼠標樣式 */
            cursor: url("./images/cursor.ico"), auto;
        }
    </style>
</head>

<body>
    <div>測試</div>
</body>

</html>

標準流

浮動

是什麼？

有什麼用？

怎麼用？

浮動佈局注意點

清除浮動

清除浮動的方式

定位

CSS position 屬性

其他

顯示框類型

溢出隱藏

透明度與手勢

微服務實踐k8s&dapr開發部署實驗（2）狀態管理

Win10 LTSC 2019 安裝後的一些步驟

Python 潮流週刊#52：Python 處理 Excel 的資源

移動web開發學習整理

博學谷案例練習

小米首頁案例練習

蘇寧易購首頁局部案例練習

簡書首頁案例練習

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結