CSS語言基礎

盒子模型

概述：所有HTML元素都可以看作盒子，在CSS中，盒子模型是用來設計和佈局時使用。它就像是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容，我們在其它元素和周圍元素邊框之間的空間放置元素。
盒子的組件：
Margin(外邊距) : 清除邊框外的區域，外邊距是透明的。
Border(邊框) : 圍繞在內邊距和內容外的邊框。
Padding(內邊距) : 清除內容周圍的區域，內邊距是透明的。
Content(內容) : 盒子的內容，顯示文本和圖像。
在網頁的元素的實際大小：
每一個元素都會在頁面上生成一個盒子，HTML頁面實際上就是由一堆盒子組成的。

/*盒子模型：25px 內間距，25px 外間距、25px 綠色邊框*/
div {
    width: 300px;
    border: 25px solid green; 
    padding: 25px;
    margin: 25px;
}

一個元素的實際寬高：
寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

設計邊距：

/*外邊距*/
margin: 10px 20px 30px 40px;/*四個值:上邊距是10px,右邊距是20px,下邊距是30px,左邊距是40px*/
margin: 10px 20px 30px;     /*三個值:上邊距是10px,左右邊距是20px,下邊距是30px*/
margin: 10px 20px;          /*兩個值:上下邊距是10px,左右邊距是20px*/
margin: 10px;               /*一個值:四個邊距都是10px*/
margin: 0 auto;             /*外邊距的妙用：居中元素*/
/*邊框*/
border: 25px solid green    /*參數:粗細 邊框樣式(實虛線) 顏色*/
/*內邊距*/
padding: 10px 20px 30px 40px; /*和margin屬性一樣,但沒有auto參數*/

圓角（border-radius）

/*設置一個值,即邊框的四個角弧度一樣大,數值越大弧度越大*/
/*四個值: 第一個值爲左上角，第二個值爲右上角，第三個值爲右下角，第四個值爲左下角。
  三個值: 第一個值爲左上角, 第二個值爲右上角和左下角，第三個值爲右下角
  兩個值: 第一個值爲左上角與右下角，第二個值爲右上角與左下角*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            border-radius: 20px;
            background: blue;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
<p></p>
</body>
</html>

結果：

盒子陰影：

box-shadow: 10px 10px 5px 20px #888888; /*第一二的值都是必需的:分別是水平陰影和垂直陰影的位置。*/
                                        /*第三個值:模糊距離,數值越大越模糊*/
                                        /*第四個值:陰影的大小*/
                                        /*第五個值:陰影顏色*/

結果：

浮動

標準文檔流：
瞭解浮動之前我們先了解一下標準文檔流，當我們的HTML頁面被瀏覽器打開時，瀏覽器首先會對頁面進行解析，讀取HTML頁面的所有內容，之後將內容顯示在瀏覽器的頁面，在默認的情況下，顯示的內容會按照標準的排版模式進行佈局，瀏覽器會根據的讀取標籤的先後順序來排序HTML元素，按照從左到右，從上到下的順序進行排列。
塊級元素和行內元素：

塊級元素：獨佔一行（h1~h6 p div 列表…）
行內元素：不獨佔一行（span a img strong…）
內嵌：塊級元素可以包含行內元素；但行內元素不能包含塊級元素，只能包含文本或者其他行內元素

概述：會使元素向左或向右移動，其周圍的元素也會重新排列；往往是用於圖像，但它在佈局時一樣非常有用。
display屬性：
規定元素應該生成的框的類型

display:inline;/*默認的值,此元素會被顯示爲內聯元素,元素前後沒有換行符,即兩個元素在同一行*/
display:block; /*此元素將顯示爲塊級元素,此元素前後會帶有換行符*/
display:none;  /*隱藏HTML元素,該元素不會被顯示*/

盒子浮動

float屬性：

/*表示文本或圖像移動到父級元素的左右側*/
float:none|left|right; /*默認值,不浮動 | 向左浮動 | 向右浮動*/

右浮動演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        img
        {
            float:right;
        }
    </style>
</head>
<body>
<p>
    <img src="images/4.jpg" width="200" height="84" />
    這是一些文本。這是一些文本。這是一些文本。
    這是一些文本。這是一些文本。這是一些文本。
    這是一些文本。這是一些文本。這是一些文本。
    這是一些文本。這是一些文本。這是一些文本。
    這是一些文本。這是一些文本。這是一些文本。
    這是一些文本。這是一些文本。這是一些文本。
    這是一些文本。這是一些文本。這是一些文本。
</p>
</body>
</html>

結果：

父級邊框塌陷

產生的原因：
一個盒子使用了CSS float屬性，導致父級盒子不能被撐開，由此產生塌陷；例如左邊盒子使用左浮動，右邊元素使用右浮動，兩個盒子被包在另一個盒子中，由於兩個盒子均使用浮動導致外部盒子不能被撐開。
塌陷的產生的影響：
背景圖片不能顯示、邊框不能被撐開、margin padding設置值不能正確顯示
解決方法：

1、增加父級元素的高度

#father {
    height: 800px;
}

2、增加一個空的div標籤，清除浮動

<div class="clear"></div>
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3、overflow: hidden

#father {
    overflow: hidden;
}

4、父類添加一個僞類：after

#father:after{
    content: '';
    display: block;
    clear: both;
}

演示塌陷及處理：向一個父級盒子插入三張圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
    <div id="father">
        <div class="layer01"><img src="images/5.jpg" alt=""/></div>
        <div class="layer02"><img src="images/6.jpg" alt=""/></div>
        <div class="layer03"><img src="images/4.jpg" alt=""/></div>
    </div>
</div>
</body>
</html>

div {
    margin:10px;
    padding:5px;
}
#father{
    border:1px #000 solid;
}
#father:after{
    content:"";
    clear: both;
    display: block;
}
.layer01 {
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02 {
    border:1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03 {
    border:1px #060 dashed;
    display: inline-block;
    float: right;
}

沒處理塌陷之前：所有子元素浮動在父級邊框外

添加僞類處理塌陷：所有元素內嵌在父級邊框內

display屬性：方向不可以控制
float屬性：浮動起來的話會脫離標準文檔流，需要解決父級邊框塌陷的問題。

定位

相對定位：
將標籤從自己原來的位置移動到一個相對的位置，移動的方向一定是相對於自己原來的位置；
比如 left 100px，是將元素向右移動100px，但是移動前的位置相對於移動後的位置是在左邊。

position: relative;
right|left|bottom|top|: 移動的值 可以爲負值

絕對定位：將標籤放置到絕對座標位置，與文檔流無關，不佔用空間，可以浮在網頁上

position: absolute;

固定定位：生成絕對定位的元素，相對於瀏覽器窗口進行定位，即使窗口是滾動的它也不會移動

position: fixed;

頁面頂部的粉色條爲固定定位，當滾動頁面時它不會移動；隨頁面的移動而移動的方塊爲絕對定位

堆疊順序

z-index: 數值 (可以爲負值)  /*默認是0，最高無限*/

擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面

背景透明度

opacity: 0.5; /*從 0.0 (完全透明) 到 1.0 (完全不透明)*/

演示堆疊和透明度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        img
        {
            position:absolute;
            left:0px;
            top:0px;
            z-index:-1;
            opacity: 0.5;
        }
    </style>
</head>

<body>
<h1>這是一個標題</h1>
<img src="images/4.jpg" width="200" height="110" />
<p>標題下的一段文字，in-index 值爲 -1</p>
</body>
</html>

結果：沒加透明度之前

結果：加透明度

//下篇再見…謝謝

CSS基礎3（盒子模型、浮動、定位）

CSS語言基礎

盒子模型

浮動

盒子浮動

定位

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

druid數據源 xml配置

MySQL基礎3（函數（常用函數、聚合函數、MD-5加密）、事務（概述、四個性質、執行事務、模擬事務）、創建索引、索引查詢）

CSS基礎2（頁面的美化（字體文本樣式、字體陰影、背景、漸變））

CSS基礎3（盒子模型、浮動、定位）

JavaScript語言5（框架庫 - jQuery（概述、引入、選擇器、事件（獲取移動鼠標的座標）））

Linux基礎（磁盤管理（分區、格式化、掛載、拉伸磁盤容量））

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

linux以太網驅動總結