中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

當(dāng)前位置： 首頁(yè) > news >正文

雁塔免費(fèi)做網(wǎng)站關(guān)鍵詞云圖

news 2025/7/13 23:34:53
雁塔免費(fèi)做網(wǎng)站,關(guān)鍵詞云圖,怎么建立公司的網(wǎng)站嗎,用html做班級(jí)網(wǎng)站一、什么是CSS 1.CSS 介紹 CSS（Cascading Style Sheets，層疊樣式表）是一種用來(lái)控制網(wǎng)頁(yè)布局和設(shè)計(jì)外觀的樣式語(yǔ)言。它使得開(kāi)發(fā)者可以分離網(wǎng)頁(yè)的內(nèi)容（HTML）和表現(xiàn)形式（樣式），提高了…

一、什么是CSS

1.CSS 介紹

CSS（Cascading Style Sheets，層疊樣式表）是一種用來(lái)控制網(wǎng)頁(yè)布局和設(shè)計(jì)外觀的樣式語(yǔ)言。它使得開(kāi)發(fā)者可以分離網(wǎng)頁(yè)的內(nèi)容（HTML）和表現(xiàn)形式（樣式），提高了內(nèi)容的可訪問(wèn)性，提供了更強(qiáng)的靈活性和控制性，也使得網(wǎng)頁(yè)的維護(hù)和修改變得更加容易。

CSS 如何與 HTML 一起工作：

  1. 結(jié)構(gòu)與樣式分離：

    • HTML 用于構(gòu)建網(wǎng)頁(yè)的結(jié)構(gòu)，定義網(wǎng)頁(yè)的內(nèi)容，如文本、圖片、鏈接等。
    • CSS 用于定義這些結(jié)構(gòu)的表現(xiàn)形式，比如布局、顏色、字體大小和樣式等。

  2. 引入方式：
    CSS 可以通過(guò)以下三種方式添加到HTML中：

    • 內(nèi)聯(lián)樣式：直接在HTML元素中使用style屬性定義樣式。適用于單個(gè)元素的快速樣式調(diào)整。
    • 內(nèi)部樣式表：在HTML文檔的<head>部分使用<style>標(biāo)簽定義。適用于單個(gè)頁(yè)面的樣式設(shè)計(jì)。
    • 外部樣式表：將CSS寫(xiě)在外部文件中，文件以.css擴(kuò)展名保存，然后通過(guò)HTML的<link>標(biāo)簽鏈接到HTML文檔。這是最常用的方法，因?yàn)樗梢栽诙鄠€(gè)頁(yè)面之間共享樣式。<link rel="stylesheet" href="./style.css">

  3. 選擇器：

    • CSS 使用選擇器來(lái)指定哪些HTML元素應(yīng)該應(yīng)用特定的樣式。這些選擇器可以基于元素名、類名、ID、屬性等多種方式定義。

  4. 層疊與繼承：

    • 層疊：當(dāng)多個(gè)樣式規(guī)則應(yīng)用于同一個(gè)元素時(shí)，CSS需要決定使用哪個(gè)規(guī)則。這通過(guò)特定的層疊規(guī)則來(lái)解決，這些規(guī)則基于選擇器的特異性、重要性和來(lái)源。
    • 繼承：某些CSS屬性可以從父元素繼承到子元素，這意味著你不需要為每個(gè)元素單獨(dú)指定所有的樣式。

注釋：

<!-- html中的單行注釋 -->
<!-- html中的多行注釋html中的多行注釋html中的多行注釋
-->/* css中的單行注釋 */
/* css中的多行注釋css中的多行注釋css中的多行注釋
*/

基本語(yǔ)法：
包含一個(gè)選擇器和一個(gè)聲明塊

  • 通過(guò)選擇器可以選中頁(yè)面中的指定元素
  • 通過(guò)聲明塊{ }指定要為元素設(shè)置的樣式
    （聲明塊由一個(gè)一個(gè)的聲明組成，聲明是一個(gè)鍵值對(duì)結(jié)構(gòu)；一個(gè)樣式名對(duì)應(yīng)一個(gè)樣式值，名和值之間以 : 連接，以 ; 結(jié)尾）

2.CSS如何工作的

  1. 瀏覽器加載 HTML（例如，從網(wǎng)絡(luò)接收它）。
  2. 它將 HTML 轉(zhuǎn)換為 DOM（文檔對(duì)象模型）。DOM 表示計(jì)算機(jī)內(nèi)存中的文檔。DOM 將在下一節(jié)中更詳細(xì)地解釋。
  3. 然后，瀏覽器會(huì)獲取 HTML 文檔鏈接到的大部分資源，例如嵌入的圖像、視頻，甚至鏈接的 CSS！JavaScript 在稍后的處理過(guò)程中會(huì)進(jìn)行處理。
  4. 瀏覽器解析獲取的 CSS，并按選擇器類型將不同的規(guī)則分類到不同的“存儲(chǔ)桶”中，例如元素、類、ID 等。根據(jù)它找到的選擇器，它計(jì)算出哪些規(guī)則應(yīng)該應(yīng)用于 DOM 中的哪些節(jié)點(diǎn)，并根據(jù)需要將樣式附加到它們（這個(gè)中間步驟稱為渲染樹(shù)）。
  5. 渲染樹(shù)在應(yīng)用規(guī)則后應(yīng)顯示的結(jié)構(gòu)中布局。
  6. 頁(yè)面的視覺(jué)顯示顯示在屏幕上（此階段稱為繪畫(huà)）。

在這里插入圖片描述

3.DOM

DOM，文檔對(duì)象模型，是一種跨平臺(tái)的、獨(dú)立于語(yǔ)言的接口（通常使用Javascript操作），它允許程序和腳本動(dòng)態(tài)地訪問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。它主要用于網(wǎng)頁(yè)和XML文檔，是HTML和JavaScript在Web頁(yè)面中交互的一個(gè)重要部分。通過(guò)DOM，開(kāi)發(fā)者可以添加、移除或修改頁(yè)面的某些部分。DOM 是在瀏覽器中加載的文檔模型，將文檔表示為節(jié)點(diǎn)樹(shù)或 DOM 樹(shù)，其中每個(gè)節(jié)點(diǎn)代表文檔的一部分（例如元素、文本字符串或注釋），以便編程語(yǔ)言與頁(yè)面交互。

其實(shí)就是瀏覽器實(shí)現(xiàn)了不同DOM標(biāo)準(zhǔn)，使得用戶可以使用腳本語(yǔ)言通過(guò)DOM提供的接口與文檔交互。當(dāng)一個(gè)網(wǎng)頁(yè)被加載到瀏覽器中時(shí)，瀏覽器會(huì)解析HTML文檔并構(gòu)建一個(gè)DOM樹(shù)。這個(gè)DOM樹(shù)是HTML文檔的對(duì)象表現(xiàn)形式，它包括了文檔中的所有元素、屬性、文本內(nèi)容等。DOM允許腳本動(dòng)態(tài)地訪問(wèn)和修改HTML文檔的內(nèi)容、結(jié)構(gòu)和樣式。這是現(xiàn)代網(wǎng)頁(yè)交互性的基礎(chǔ)，比如響應(yīng)用戶點(diǎn)擊、更新頁(yè)面內(nèi)容、動(dòng)態(tài)添加或刪除HTML元素等。

4.級(jí)聯(lián)（Cascade）

級(jí)聯(lián)是CSS中的一個(gè)基本特征，它定義了當(dāng)存在多個(gè)相互沖突的規(guī)則時(shí)，哪些規(guī)則會(huì)被應(yīng)用到元素上。CSS處理沖突的方法是根據(jù)規(guī)則的來(lái)源、重要性和被引用的順序來(lái)決定優(yōu)先級(jí)：

來(lái)源排序：瀏覽器默認(rèn)樣式、用戶定義樣式和開(kāi)發(fā)者定義樣式具有不同的優(yōu)先級(jí)。通常，開(kāi)發(fā)者的樣式優(yōu)先于用戶的樣式，用戶的樣式又優(yōu)先于瀏覽器的默認(rèn)樣式。
重要性排序：樣式標(biāo)記為!important的規(guī)則具有更高的優(yōu)先級(jí)。
代碼順序：如果兩個(gè)規(guī)則具有相同的優(yōu)先級(jí)，那么在CSS文件中后出現(xiàn)的規(guī)則將覆蓋先前的規(guī)則。

5.特異性（Specificity）

特異性是一個(gè)權(quán)重系統(tǒng)，用于計(jì)算選擇器的具體程度。當(dāng)兩條規(guī)則沖突時(shí)，特異性更高的規(guī)則將被應(yīng)用。特異性是根據(jù)選擇器中不同類型的選擇器計(jì)數(shù)來(lái)決定的：

ID選擇器（如#example）具有最高的特異性。
類選擇器（如.example）、屬性選擇器（如[type=“text”]）和偽類（如:hover）具有次高的特異性。
元素選擇器和偽元素選擇器（如div、::before）具有最低的特異性。
如果特異性相同，則遵循前述的級(jí)聯(lián)規(guī)則中的代碼順序。

5.遺傳繼承（Inheritance）

CSS的遺傳繼承機(jī)制允許某些樣式屬性從父元素傳遞到其子元素，即使這些子元素沒(méi)有明確被指定這些樣式。這主要應(yīng)用于文本相關(guān)屬性如color、font-*等，有助于保持頁(yè)面的視覺(jué)一致性。

默認(rèn)繼承：某些CSS屬性具有繼承性，這意味著如果沒(méi)有為元素明確指定值，它將繼承其父元素的值。例如，如果你設(shè)置一個(gè)元素的color為red，則其內(nèi)部的所有文本默認(rèn)也會(huì)變?yōu)榧t色，除非另有指定。
強(qiáng)制繼承：可以使用inherit關(guān)鍵字強(qiáng)制屬性繼承父元素的值，即使該屬性默認(rèn)不繼承。

二、選擇器

通配選擇器：選擇所有元素：*{}
元素選擇器：也叫類型選擇器、標(biāo)簽選擇器，根據(jù)標(biāo)簽名來(lái)選擇指定元素：elementname{}
類選擇器：根據(jù)class屬性值選擇元素：.class{}
ID選擇器：根據(jù)ID屬性值選擇元素：#ID{}
屬性選擇器：根據(jù)元素屬性值選擇一組元素：

  • [屬性名] 選擇含有指定屬性的元素
  • [屬性名=屬性值] 選擇含有指定屬性和屬性值的元素
  • [屬性名^=屬性值] 選擇屬性值以指定值開(kāi)頭的元素
  • [屬性名$=屬性值] 選擇屬性值以指定值結(jié)尾的元素
  • [屬性名*=屬性值] 選擇屬性值中含有某值的元素

交集選擇器：選中同時(shí)符合多個(gè)條件的元素（有元素選擇器必須以此開(kāi)頭），選擇器1選擇器2…選擇器n { }
并集選擇器：同時(shí)選擇多個(gè)選擇器對(duì)應(yīng)的元素，選擇器1,選擇器2,…選擇器n { }
關(guān)系選擇器：

  • 選中指定父元素的指定子元素：父元素 > 子元素 { }
  • 選中指定元素內(nèi)的指定后代元素：祖先 后代 { }
  • 找緊挨著的下一個(gè)兄弟元素：A1 + A2 { }
  • 后面所有兄弟元素：A1 ~ A3 { }

偽選擇器：不存在的類，可以指第一個(gè)元素、最后一個(gè)元素、被訪問(wèn)過(guò)的元素；

  • 偽類: 偽選擇器支持按照未被包含在文檔樹(shù)中的狀態(tài)信息來(lái)選擇元素。
    例子：a:visited 匹配所有曾被訪問(wèn)過(guò)的 <a> 元素。
  • 偽元素:: 偽選擇器用于表示無(wú)法用 HTML 語(yǔ)義表達(dá)的實(shí)體。
    例子：p::first-line 匹配所有<p> 元素的第一行。

偽類和偽元素的區(qū)別：偽類是用來(lái)匹配元素的特殊狀態(tài)的；偽元素是匹配元素的隸屬元素的，創(chuàng)建不在dom樹(shù)上的元素，可以在頁(yè)面中展示，但在dom中不體現(xiàn)，無(wú)非通過(guò)js控制它

選擇器優(yōu)先級(jí)：
!important > 內(nèi)聯(lián)樣式 > ID > 類 > 標(biāo)簽 > 通用

三、基本模型

1.布局方式

CSS的所有內(nèi)容都可以說(shuō)是一個(gè)框，有不同類型，通過(guò)display設(shè)置。它決定了元素如何在頁(yè)面上顯示，以及它們?nèi)绾闻c周?chē)剡M(jìn)行布局交互。

  1. display: inline：元素不會(huì)開(kāi)始新的行，它們會(huì)在文本流中順序排列，通常不會(huì)受到 width 和 height 屬性的影響，它們的尺寸由內(nèi)容決定，適用于少量文本或圖像
  2. display: block：元素會(huì)占據(jù)整個(gè)可用寬度，通常會(huì)在新的一行開(kāi)始，并且其后的元素也會(huì)在新的一行顯示；可以設(shè)置 width 和 height，默認(rèn)寬度是其容器的100%，除非另外指定；適用于需要明確大小和位置控制的元素
  3. display: inline-block：結(jié)合了 inline 和 block 的特性。像 inline 元素一樣，inline-block 元素不會(huì)開(kāi)始新的行，但它們會(huì)表現(xiàn)出 block 元素的特性，比如可以設(shè)置寬度和高度；可以控制尺寸，同時(shí)在文本行中流式排列；適合需要在一行內(nèi)顯示的容器，且這些容器需要設(shè)置尺寸或者內(nèi)部布局。
  4. display: none：此設(shè)置會(huì)使元素從文檔布局中完全消失，就好像它從來(lái)不存在一樣。與 visibility: hidden 不同，后者仍然占據(jù)空間，只是看不見(jiàn)；不占據(jù)任何空間；用于隱藏內(nèi)容而不影響布局。
  5. display: flex：使元素成為一個(gè)彈性容器，其子元素的布局更加靈活。子元素（flex items）可以在容器內(nèi)動(dòng)態(tài)地調(diào)整大小和順序；子元素可以根據(jù)需要擴(kuò)大或縮小來(lái)填充可用空間；適用于需要高度靈活布局的場(chǎng)景，特別是當(dāng)子元素大小和布局需根據(jù)容器大小動(dòng)態(tài)變化時(shí)。
  6. display: grid：使元素成為一個(gè)網(wǎng)格容器，可以定義行和列，創(chuàng)建復(fù)雜的布局結(jié)構(gòu)；可以精確控制網(wǎng)格中每個(gè)元素的位置和大小；適用于需要復(fù)雜布局，如多欄布局或控制元素精確位置的界面設(shè)計(jì)。

2.長(zhǎng)度單位

CSS中的長(zhǎng)度單位是設(shè)置元素大小、間距、邊框等屬性時(shí)的基礎(chǔ)，它們可以分為兩大類：絕對(duì)單位和相對(duì)單位。

絕對(duì)單位：
絕對(duì)長(zhǎng)度單位與物理尺寸有關(guān)，通常用于打印媒體或者當(dāng)你需要精確控制在屏幕上的顯示效果時(shí)。它們不依賴于任何其他元素的尺寸或者設(shè)備的顯示特性：

  • 像素（px）：是屏幕顯示的基本單位，通常用于屏幕媒體。盡管它被稱為“絕對(duì)”，在現(xiàn)代的設(shè)備上，一個(gè)像素可能不會(huì)嚴(yán)格對(duì)應(yīng)于設(shè)備的一個(gè)物理像素，特別是在高分辨率的屏幕上。
  • 點(diǎn)（pt）：主要用于打印媒體，1點(diǎn)等于1/72英寸。
  • 派卡（pc）：同樣主要用于打印，1派卡等于12點(diǎn)。
  • 毫米（mm）、厘米（cm）、英寸（in）：這些單位常用于打印媒體，直接對(duì)應(yīng)于它們的實(shí)際尺寸。

相對(duì)單位：
相對(duì)單位基于其他屬性的值，如元素的字體大小或者視口的尺寸，使得布局能更加靈活適應(yīng)不同的顯示環(huán)境：

  • 百分比（%）：基于父元素的相應(yīng)屬性來(lái)計(jì)算大小。例如，寬度設(shè)置為50%將使元素寬度為其父元素寬度的一半。
  • em：相對(duì)于當(dāng)前元素的字體大小。例如，2em通常意味著當(dāng)前字體大小的兩倍。
  • rem：相對(duì)于根元素（）的字體大小。這使得整個(gè)文檔的大小調(diào)整更加一致。
  • 視口寬度（vw）/視口高度（vh）：分別是視口寬度和高度的百分之一。例如，50vw是視口寬度的50%。
  • 視口最小（vmin）/視口最大（vmax）：分別是視口寬度和高度中的最小值和最大值的百分之一。

在Web開(kāi)發(fā)中選擇合適的單位對(duì)于創(chuàng)建響應(yīng)式和高可用性的網(wǎng)站至關(guān)重要：

  • 使用px進(jìn)行精確控制，尤其是對(duì)于邊框、陰影等需要精確像素值的地方。
  • 使用em和rem進(jìn)行字體大小和間距的設(shè)置，特別是當(dāng)你想要界面在不同字體大小設(shè)置下保持良好的可讀性和布局一致性時(shí)。
  • 使用vw、vh、vmin和vmax進(jìn)行布局的視口相關(guān)設(shè)計(jì)，幫助創(chuàng)建更好的響應(yīng)式設(shè)計(jì)。

3.盒模型

每個(gè)在HTML中的元素都可以被視為一個(gè)盒子，而CSS盒模型描述了這些盒子如何處理尺寸、邊距、邊框和內(nèi)邊距。

  • 內(nèi)容Content：顯示實(shí)際內(nèi)容的區(qū)域；使用 inline-size 和 block-size 或 width 和 height 等屬性來(lái)調(diào)整其大小。
  • 內(nèi)邊距Padding：內(nèi)容區(qū)域周?chē)目臻g，位于內(nèi)容和邊框之間。內(nèi)邊距不會(huì)影響內(nèi)容本身的尺寸，但它會(huì)增加元素總體占用的空間。內(nèi)邊距是透明的，不包含背景色。
  • 邊框Border：邊框環(huán)繞在內(nèi)邊距和內(nèi)容外，可以設(shè)定大小樣式，邊框尺寸也會(huì)影響總尺寸。
  • 外邊距Margin：是盒子與其他盒子之間的空間，位于邊框外側(cè)；是透明的，不可見(jiàn)的，不包含背景色，用于調(diào)節(jié)位置，不會(huì)影響尺寸。

在這里插入圖片描述

標(biāo)準(zhǔn)盒模型：

在標(biāo)準(zhǔn)盒模型中，元素的width和height屬性只包括內(nèi)容區(qū)域。
內(nèi)邊距、邊框和外邊距會(huì)額外增加到元素的總寬度和高度上。

盒模型的CSS3修訂（Box-Sizing）：
CSS3引入了box-sizing屬性，允許改變用于計(jì)算盒子尺寸的CSS盒模型。
box-sizing: content-box 是標(biāo)準(zhǔn)盒模型，width 和 height 只包括內(nèi)容。
box-sizing: border-box 是替代盒模型，width 和 height 包括內(nèi)容、內(nèi)邊距和邊框。

內(nèi)容Content：
使用width和height設(shè)置大小，使用background-color修改背景顏色。
內(nèi)邊距Padding：
內(nèi)邊距，也叫填充，是內(nèi)容區(qū)和邊框之間的空間，背景顏色會(huì)延申
padding：指定上右下左四個(gè)方向的邊距
padding-top：上內(nèi)邊距
padding-right：右內(nèi)邊距
padding-bottom：下內(nèi)邊距
padding-left：左內(nèi)邊距
邊框border：
同padding
outline：設(shè)置輪廓線，不改變盒子的布局，不影響可見(jiàn)框的大小，但border是布局的一部分。
box-shadow：設(shè)置陰影效果，不影響布局，第一個(gè)值-水平偏移量：設(shè)置陰影的水平位置，正值向右移動(dòng)，負(fù)值向左移動(dòng)；第二個(gè)值-垂直偏移量：設(shè)置陰影的垂直位置，正值向下移動(dòng)，負(fù)值向上移動(dòng)；第三個(gè)值-陰影的模糊半徑；第四個(gè)值-陰影的顏色
border-radius：設(shè)置邊框圓角：四個(gè)值：左上 右上 右下 左下；三個(gè)值：左上 右上/左下 右下；兩個(gè)值：對(duì)角一樣；一個(gè)值：全部一樣。border-top-left-radius；border-top-right-radius；border-bottom-right-radius；border-bottom-left-radius

4.文檔流

在CSS和HTML的上下文中，文本流（或正常流、文檔流）是一個(gè)重要的概念，它描述了元素在頁(yè)面上的默認(rèn)布局行為。文本流是指當(dāng)你向網(wǎng)頁(yè)中添加元素，這些元素如何按照HTML源代碼中的順序自動(dòng)排列的過(guò)程。這個(gè)布局模式受到了CSS盒模型的影響，而且是所有CSS布局機(jī)制（如Flexbox、Grid）的基礎(chǔ)。順序性，不會(huì)跳躍或重疊。

文本流的基本行為：

  1. 塊級(jí)元素：

    • 默認(rèn)情況下，塊級(jí)元素（如<div>、<p>、<h1>等）會(huì)占據(jù)整個(gè)容器的寬度，并從新的一行開(kāi)始。
    • 每個(gè)塊級(jí)元素通常會(huì)堆疊在前一個(gè)塊級(jí)元素的下面，形成一個(gè)垂直的元素列。

  2. 內(nèi)聯(lián)元素：

    • 內(nèi)聯(lián)元素（如<span>、<a>、<img>等）不會(huì)開(kāi)始新的行，而是繼續(xù)在當(dāng)前行中顯示，直到行的末端。
    • 當(dāng)達(dá)到行的末端時(shí)，內(nèi)聯(lián)元素會(huì)折回到新行的開(kāi)始繼續(xù)排列，這個(gè)過(guò)程類似于寫(xiě)字時(shí)從左到右，再?gòu)纳系较碌捻樞颉?/li>

脫離文檔流：

  • 塊元素不再獨(dú)占頁(yè)面的一行，脫離文檔流以后，塊元素的寬度和高度默認(rèn)為被內(nèi)容撐開(kāi)的范圍
  • 行內(nèi)元素不會(huì)完全脫離文檔流，脫離文檔流以后可以設(shè)置width，類似塊元素，仍然與未脫離的行內(nèi)元素順序排列。

文本流的影響因素：

  • 浮動(dòng)（Float）：當(dāng)元素被設(shè)置為浮動(dòng)時(shí)，它會(huì)脫離正常的文本流，允許文本和內(nèi)聯(lián)元素圍繞其周?chē)鲃?dòng)。浮動(dòng)元素原本占據(jù)的空間將被其他元素填充。
  • 定位（Positioning）：通過(guò)CSS定位屬性（如absolute、fixed、relative），元素可以部分或完全脫離文本流，它們可以被放置在頁(yè)面上的幾乎任何位置。
浮動(dòng) float：

使用float屬性來(lái)設(shè)置于元素的浮動(dòng)，可以使一個(gè)元素向其父元素的左側(cè)或右側(cè)移動(dòng)

  • none 默認(rèn)值，元素不浮動(dòng)
  • left 元素向左浮動(dòng)
  • right 元素向右浮動(dòng)

元素設(shè)置浮動(dòng)以后，水平布局的等式便不需要強(qiáng)制成立；元素設(shè)置浮動(dòng)以后，會(huì)完全從文檔流中脫離，不再占用文檔流的位置，所以元素下邊的還在文檔流中的元素會(huì)自動(dòng)向上移動(dòng)

  • 浮動(dòng)元素會(huì)完全脫離文檔流，不再占據(jù)文檔流中的位置；
  • 設(shè)置浮動(dòng)以后，元素會(huì)向父元素的左側(cè)或右側(cè)移動(dòng)
  • 浮動(dòng)元素默認(rèn)不會(huì)從父元素中移出
  • 浮動(dòng)元素向左或向右移動(dòng)時(shí)，不會(huì)超過(guò)前邊的浮動(dòng)元素（先來(lái)后到的順序）
  • 如果浮動(dòng)元素上邊是一個(gè)沒(méi)有浮動(dòng)的塊元素，則浮動(dòng)元素?zé)o法上移
  • 浮動(dòng)元素不會(huì)超過(guò)上邊的浮動(dòng)的兄弟元素，最多就是和它一樣高
  • 浮動(dòng)元素不會(huì)蓋住文字，文字會(huì)自動(dòng)環(huán)繞在浮動(dòng)元素的周?chē)?#xff0c;所以我們可以利用浮動(dòng)來(lái)設(shè)置文字環(huán)繞圖片的效果
定位position：

通過(guò)定位可以將元素?cái)[放到頁(yè)面的任意位置，使用position屬性來(lái)設(shè)置定位。

  • static：不開(kāi)啟定位，元素是靜止的，默認(rèn)值
  • relative：開(kāi)啟元素的相對(duì)定位
  • absolute：開(kāi)啟元素的絕對(duì)定位
  • fixed：開(kāi)啟元素的固定定位
  • sticky：開(kāi)啟元素的粘滯定位

relative相對(duì)定位：
設(shè)置偏移量，使用了相對(duì)定位后，只會(huì)移動(dòng)自身的布局位置，而不會(huì)對(duì)已存在的其他元素產(chǎn)生任何影響。

  • top：定位元素和定位位置的上邊距離

  • bottom：定位元素和定位位置的下邊距離

  • left：定位元素和定位位置的左側(cè)距離

  • right：定位元素和定位位置的右側(cè)距離

  • 當(dāng)元素開(kāi)啟相對(duì)定位以后，如果不設(shè)置偏移量元素，元素不會(huì)發(fā)生任何變化（這里注意不僅僅是位置） 不脫離文檔流，相對(duì)定位的元素仍然占據(jù)著文檔流中的空間，即使你移動(dòng)了它，它原來(lái)的位置仍然會(huì)保留，周?chē)脑夭粫?huì)調(diào)整位置來(lái)填補(bǔ)它的空缺。

  • 相對(duì)定位是參照于元素在文檔流中的原始位置進(jìn)行定位的（可理解為相對(duì)于自身原始位置）

  • 相對(duì)定位會(huì)提升元素的層級(jí)（表現(xiàn)為可以覆蓋其他元素）

  • 相對(duì)定位不會(huì)改變?cè)氐男再|(zhì)：塊還是塊，行內(nèi)還是行內(nèi)

浮動(dòng)和相對(duì)定位的區(qū)別：

  • 浮動(dòng)的參考系是其父元素；相對(duì)定位是相對(duì)于自身
  • 浮動(dòng)只能左右移動(dòng)；相對(duì)定位是上下左右移動(dòng)
  • 浮動(dòng)會(huì)影響頁(yè)面布局（包括下方元素位置影響和高度塌陷問(wèn)題）；相對(duì)定位不影響頁(yè)面布局
  • 浮動(dòng)會(huì)改變?cè)氐男再|(zhì)（不再獨(dú)占一行，寬高都會(huì)被內(nèi)容撐開(kāi)）；相對(duì)定位不改變?cè)匦再|(zhì)
  • 浮動(dòng)不會(huì)覆蓋文字；相對(duì)定位可以覆蓋文字
  • 浮動(dòng)和相對(duì)定位不會(huì)從父元素中移出
  • 浮動(dòng)脫離了文檔流，不再占據(jù)頁(yè)面位置；相對(duì)定位仍然占據(jù)頁(yè)面位置

絕對(duì)定位absolute：

  • 開(kāi)啟絕對(duì)定位后，如果不設(shè)置偏移量，元素的位置不會(huì)發(fā)生變化（只是位置不變，其他很多變了）
  • 絕對(duì)定位元素是相對(duì)于其包含塊進(jìn)行定位的（與相對(duì)定位不同）
  • 絕對(duì)定位會(huì)使元素提升一個(gè)層級(jí)
  • 開(kāi)啟絕對(duì)定位后，元素會(huì)從文檔流中脫離
  • 絕對(duì)定位會(huì)改變?cè)氐男再|(zhì)：行內(nèi)變成塊，塊的寬高默認(rèn)被內(nèi)容撐開(kāi)（與相對(duì)定位相反）

固定定位fixed：
固定定位（fixed positioning）是元素相對(duì)于瀏覽器窗口（viewport）固定位置。無(wú)論用戶如何滾動(dòng)頁(yè)面，固定定位的元素始終保持在視窗的固定位置，不會(huì)隨頁(yè)面的滾動(dòng)而移動(dòng)。

  • 固定定位的元素的位置是相對(duì)于視窗（瀏覽器窗口）的，而不是相對(duì)于父元素或其他元素。
  • 固定定位的元素不會(huì)占據(jù)文檔流中的位置，它們的位置是相對(duì)于視窗而言的，所以它們不會(huì)影響其他元素的布局。
  • 無(wú)論用戶如何滾動(dòng)頁(yè)面，固定定位的元素始終保持在指定的位置，通常是頁(yè)面的某個(gè)角落或者固定在屏幕的某個(gè)位置上。
  • 由于固定定位可以使元素始終可見(jiàn)，它通常用于制作頁(yè)面中固定的導(dǎo)航欄、工具欄、回到頂部按鈕等需要始終可訪問(wèn)的元素。

粘滯定位sticky：
元素到達(dá)一定位置后固定。

  • 相對(duì)定位的起點(diǎn)：元素首先按照正常文檔流中的位置進(jìn)行定位（相對(duì)定位），直到達(dá)到觸發(fā)條件（sticky 生效條件），然后表現(xiàn)為固定定位直到其父容器邊界結(jié)束。
  • 觸發(fā)條件：sticky 定位需要指定一個(gè)觸發(fā)條件，通常是距離頂部（top）、底部（bottom）、左側(cè)（left）或右側(cè)（right）某個(gè)距離時(shí)生效。這個(gè)距離是相對(duì)于最近的具有滾動(dòng)機(jī)制的祖先元素的邊界。
  • 滾動(dòng)時(shí)表現(xiàn)：當(dāng)頁(yè)面滾動(dòng)使元素的位置達(dá)到觸發(fā)條件時(shí)，元素將固定在父容器的邊界（可以理解為固定定位），直到它的上邊界達(dá)到了父容器的下邊界。
  • 兼容性：sticky 定位在現(xiàn)代瀏覽器中有良好的支持，但在某些舊版本的瀏覽器中可能存在兼容性問(wèn)題，特別是在移動(dòng)設(shè)備上。

包含塊（containing block）：
影響子元素定位和尺寸的父級(jí)塊級(jí)元素。
塊級(jí)元素的包含塊：通常是離它最近的塊級(jí)元素。行內(nèi)元素的包含塊：通常是離它最近的塊級(jí)元素，或者是包含它的塊級(jí)祖先元素。定位元素（position 屬性不為 static 的元素）：它們的包含塊由最近的祖先元素決定，且這個(gè)祖先元素的 position 屬性不為 static。

  • 定位：絕對(duì)定位（position: absolute）的元素的位置是相對(duì)于它的包含塊來(lái)計(jì)算的。
  • 尺寸：百分比尺寸（如 width: 50%）通常是相對(duì)于元素的包含塊的寬度來(lái)計(jì)算的。
  • 浮動(dòng)：浮動(dòng)元素（float）也會(huì)影響其包含塊中其他元素的布局。
z-index：

在 CSS 中，堆疊上下文（Stacking Context）是一種三維概念，它決定了元素在屏幕上的堆疊順序。
同一個(gè)堆疊上下文的元素：

  1. 根元素（HTML 根元素）是文檔中的根級(jí)堆疊上下文。所有其他元素都是它的后代。
  2. 定位元素：使用 CSS position 屬性值為 absolute, relative, fixed 或 sticky 的元素會(huì)形成新的堆疊上下文。
  3. 設(shè)置了 opacity 小于1 的元素：透明度不為1的元素也會(huì)創(chuàng)建新的堆疊上下文。
  4. 設(shè)置了 transform 屬性的元素：應(yīng)用了 2D 或 3D 變換的元素也會(huì)形成新的堆疊上下文。
  5. 設(shè)置了 filter 屬性的元素：應(yīng)用了濾鏡效果的元素也會(huì)形成新的堆疊上下文。
  6. mix-blend-mode 不為 normal 的元素：使用了混合模式的元素也會(huì)形成新的堆疊上下文。

如果元素在同一個(gè)堆疊上下文中，它們會(huì)相互影響彼此的層疊順序，通過(guò) z-index 控制顯示順序。不同堆疊上下文中的元素的層疊關(guān)系是相互獨(dú)立的，它們的 z-index 不會(huì)影響到其他堆疊上下文中的元素。

z-index 是 CSS 中用來(lái)控制堆疊順序（stacking order）的屬性，它影響了元素在層疊上下文（stacking context）中的顯示順序。當(dāng)頁(yè)面中有多個(gè)元素重疊時(shí)，z-index 可以決定哪個(gè)元素顯示在前面，哪個(gè)元素顯示在后面。

  1. 工作原理：

    • z-index 只對(duì)定位元素（positioned elements）有效，即使用了 position 屬性值為 absolute, relative, fixed 或 sticky 的元素。
    • 元素的 z-index 值越大，它在堆疊順序中越靠前（即顯示在更上層）。

  2. 堆疊上下文（Stacking Context）：

    • 每個(gè)元素都會(huì)創(chuàng)建一個(gè)堆疊上下文，堆疊上下文決定了元素如何在視覺(jué)上堆疊。
    • 在同一個(gè)堆疊上下文中，z-index 可以控制元素的層級(jí)關(guān)系。
    • 堆疊上下文的形成條件包括根元素（html）、定位元素（positioned elements）、設(shè)置了 opacity 小于1的元素、設(shè)置了 transform 的元素等。

  3. 默認(rèn)值：

    • 如果不顯式指定 z-index，元素的 z-index 默認(rèn)為 auto，這時(shí)元素在堆疊上下文中的層疊順序由其在文檔流中的位置決定。

  4. 注意事項(xiàng)：

    • z-index 只在定位元素之間比較才有效，對(duì)于未定位的元素或者處于不同堆疊上下文中的元素，z-index 無(wú)法直接控制它們的層疊關(guān)系。
    • 當(dāng)多個(gè)元素的 z-index 相同時(shí)，它們?cè)诙询B順序中的顯示順序由它們?cè)?HTML 結(jié)構(gòu)中的先后順序決定。

使用 z-index 可以幫助開(kāi)發(fā)者精確控制頁(yè)面中重疊元素的顯示順序，確保頁(yè)面布局的視覺(jué)效果符合設(shè)計(jì)需求。

水平方向的布局等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的寬度
當(dāng)使用絕對(duì)定位時(shí)，添加left和right兩個(gè)值（只是多添加了兩個(gè)值）
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其父元素的寬度
當(dāng)發(fā)生過(guò)度約束時(shí)

  • 如果9個(gè)值中沒(méi)有auto，則自動(dòng)調(diào)整right值以使等式滿足（之前7個(gè)值是margin-right）
  • 如果9個(gè)值中有auto，則自動(dòng)調(diào)整auto的值以使等式滿足
  • 可設(shè)置auto的值：margin-left margin-right width left right
  • left和right的值默認(rèn)是auto，如果沒(méi)有設(shè)置，會(huì)自動(dòng)調(diào)整這兩個(gè)值讓等式成立，優(yōu)先調(diào)right

所以水平居中：

  • 子元素 .box2 設(shè)置為絕對(duì)定位，并且同時(shí)使用 left: 0; right: 0; 來(lái)保證它在父容器 .box1 中水平居中。
  • 塊級(jí)元素，可以通過(guò)設(shè)置左右 margin 為 auto 來(lái)實(shí)現(xiàn)水平居中。
  • 對(duì)于內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素，可以通過(guò)將父元素的 text-align 屬性設(shè)置為 center 來(lái)實(shí)現(xiàn)其內(nèi)部?jī)?nèi)容的水平居中。
  • 將父元素的 display 屬性設(shè)置為 flex，并使用 justify-content 屬性來(lái)實(shí)現(xiàn)水平居中。
  • 將父元素的 display 屬性設(shè)置為 grid，并使用 justify-items 和 place-items 屬性來(lái)控制子元素的位置。
  • 對(duì)于需要絕對(duì)定位的元素，可以結(jié)合 left 和 transform 屬性來(lái)實(shí)現(xiàn)水平居中。
高度塌陷Collapsing Margins：

CSS布局中，兩個(gè)相鄰元素的上下外邊距（margin）可能會(huì)合并（collapse），導(dǎo)致它們的外邊距高度不是簡(jiǎn)單地相加，而是取其中較大者，或者在某些情況下取較小者，從而影響到它們?cè)陧?yè)面中的實(shí)際間距。

  • 父子元素間：在浮動(dòng)布局中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的。當(dāng)子元素浮動(dòng)后，會(huì)完全脫離文檔流，將會(huì)無(wú)法撐起父元素高度，導(dǎo)致父元素的高度丟失。父元素高度丟失以后，其下的元素會(huì)自動(dòng)上移，導(dǎo)致頁(yè)面的布局混亂。
  • 垂直相鄰元素：當(dāng)兩個(gè)垂直相鄰的塊級(jí)元素（比如div、p等）的上下外邊距相遇時(shí)，它們的外邊距會(huì)合并。
  • 空元素：沒(méi)有內(nèi)容、padding、border和非空的內(nèi)邊距的塊級(jí)元素的上外邊距和下外邊距也會(huì)發(fā)生合并。

解決高度塌陷：

  • 清除浮動(dòng)：在包含浮動(dòng)元素的容器中，可以使用clearfix技術(shù)或者設(shè)置overflow屬性來(lái)清除浮動(dòng)，從而避免父元素高度塌陷。
  • 使用padding：有時(shí)可以用padding代替margin，因?yàn)閜adding不會(huì)發(fā)生合并。
  • 使用邊框或空元素：給空元素或者沒(méi)有內(nèi)容的元素添加邊框或者非空的內(nèi)邊距，也可以避免高度塌陷問(wèn)題
BFC(Block Formatting Context)塊級(jí)格式上下文：

BFC（Block Formatting Context）塊級(jí)格式上下文是CSS布局中的一個(gè)重要概念，它影響和控制了塊級(jí)元素的布局及其內(nèi)部元素的排列方式。具體來(lái)說(shuō)，BFC決定了塊級(jí)盒子如何放置其內(nèi)部盒子，以及與其他盒子的關(guān)系，它的主要作用包括：

  1. 內(nèi)部元素的布局：在BFC中，塊級(jí)元素內(nèi)部的盒子按照一定規(guī)則進(jìn)行布局。這些規(guī)則包括垂直方向上盒子的排列順序、如何處理外邊距合并（margin collapsing）等。

  2. 邊界的清除：BFC可以防止外邊距合并問(wèn)題的發(fā)生，這在一些布局中非常有用。比如，兩個(gè)相鄰的塊級(jí)元素在同一個(gè)BFC中時(shí)，它們的垂直外邊距不會(huì)合并。

  3. 浮動(dòng)的影響：BFC對(duì)浮動(dòng)元素的布局有一定的影響。浮動(dòng)元素會(huì)影響到BFC中非浮動(dòng)元素的布局方式，可能會(huì)改變它們的排列順序或位置。

  4. 清除浮動(dòng)：BFC可以包含浮動(dòng)元素，使得其父元素可以正確地計(jì)算其高度，從而解決浮動(dòng)元素導(dǎo)致的父元素高度塌陷問(wèn)題。

要?jiǎng)?chuàng)建BFC，有幾種方式可以觸發(fā)：

  • 浮動(dòng)：一個(gè)元素浮動(dòng)（float）不為none時(shí)，會(huì)形成一個(gè)新的BFC。
  • 絕對(duì)定位：絕對(duì)定位元素（position: absolute或fixed）也可以創(chuàng)建BFC。
  • 塊級(jí)容器：一些塊級(jí)容器元素，display 屬性為 flow-root，如設(shè)置overflow屬性值為除了visible和clip以外的值（例如overflow: auto, overflow: hidden等），也可以形成BFC。
  • 行內(nèi)塊元素（display為inline-block、inline-flex、inline-grid等）：元素的 display 屬性為 inline-block、inline-flex、inline-grid 等。
  • 根元素：整個(gè)文檔的根元素 <html> 或包含它的元素。也是一個(gè)BFC。
  • 彈性容器（display為flex或inline-flex元素的直接子元素）：元素的 display 屬性為 flex 或 inline-flex 元素的直接子元素。
  • 表格：display: table-cell；display: table-caption；display: table；display: table-row；display: table-row-group；display: table-header-group；display: table-footer-group；display: inline-table

當(dāng)一個(gè)元素形成了BFC時(shí)，它具有以下特性：

  1. 內(nèi)部的盒子會(huì)在垂直方向上一個(gè)接一個(gè)地放置：BFC中的塊級(jí)盒子在垂直方向上會(huì)按照它們?cè)谖臋n流中的順序放置，因此它們不會(huì)重疊。

  2. 垂直方向的距離計(jì)算：BFC中的塊級(jí)盒子會(huì)根據(jù)它們的 margin 屬性相互影響，相鄰盒子的外邊距會(huì)折疊。

  3. BFC區(qū)域不會(huì)與浮動(dòng)盒子重疊：BFC中的塊級(jí)盒子會(huì)考慮浮動(dòng)元素的存在，不會(huì)與浮動(dòng)元素重疊，而是會(huì)環(huán)繞浮動(dòng)元素。

  4. BFC可以包含浮動(dòng)的子元素：BFC可以包含其內(nèi)部的浮動(dòng)元素，因此BFC可以用來(lái)清除浮動(dòng)（clearfix）。

  5. BFC阻止外部浮動(dòng)的影響：BFC中的塊級(jí)盒子不會(huì)受到外部浮動(dòng)元素的影響，不會(huì)被浮動(dòng)元素覆蓋。

文檔流是默認(rèn)的元素排列方式。
包含塊是用來(lái)確定元素位置和尺寸的上下文環(huán)境。
BFC是一種獨(dú)立的布局環(huán)境，用于控制元素布局方式和解決布局問(wèn)題。

clear:

clear作用：清除浮動(dòng)元素對(duì)當(dāng)前元素所產(chǎn)生的影響

  • 本質(zhì)是為元素添加一個(gè)margin-top屬性，值由瀏覽器自動(dòng)計(jì)算
  • left 清除左側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響
  • right 清除右側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響
  • both 清除兩側(cè)中影響較大一側(cè)元素的影響

可以采用::after偽元素(行內(nèi)元素)，轉(zhuǎn)為塊元素清除浮動(dòng)的影響：

.box1::after{display: block;content: '';clear: both;
}

高度塌陷問(wèn)題，一般用::after
外邊距重疊問(wèn)題，一般用::before
.clearfix::before是為了解決外邊距重疊問(wèn)題
.clearfix::after是為了解決高度塌陷問(wèn)題

http://m.risenshineclean.com/news/62401.html

相關(guān)文章：

  • 網(wǎng)站定時(shí)數(shù)據(jù)切換怎么做的上海網(wǎng)站關(guān)鍵詞排名
  • php網(wǎng)站后臺(tái)模版重慶seo整站優(yōu)化方案范文
  • wordpress批量替換標(biāo)簽aso優(yōu)化榜單
  • 網(wǎng)站 優(yōu)化手機(jī)版網(wǎng)絡(luò)優(yōu)化大師手機(jī)版
  • 網(wǎng)站建設(shè)需要提供哪些信息優(yōu)化法治化營(yíng)商環(huán)境
  • 浙江省住房城鄉(xiāng)建設(shè)廳官方網(wǎng)站推廣網(wǎng)站有效的免費(fèi)方法
  • 網(wǎng)站上的動(dòng)圖都怎么做的中小企業(yè)網(wǎng)絡(luò)營(yíng)銷(xiāo)現(xiàn)狀
  • 天津大學(xué)生專業(yè)做網(wǎng)站直鏈平臺(tái)
  • 網(wǎng)站建設(shè)小程序開(kāi)發(fā)公司關(guān)鍵詞推廣軟件排名
  • 娛樂(lè)網(wǎng)站 建站軟件搜索引擎優(yōu)化的主要策略
  • 即刻搜索收錄網(wǎng)站口碑優(yōu)化
  • 做網(wǎng)站接私活價(jià)格怎么算seo發(fā)包排名軟件
  • 如何解析域名安徽搜索引擎優(yōu)化
  • 如何網(wǎng)上建設(shè)網(wǎng)站優(yōu)化設(shè)計(jì)全部答案
  • asp簡(jiǎn)單購(gòu)物網(wǎng)站源碼西安關(guān)鍵詞優(yōu)化排名
  • 企業(yè)網(wǎng)站建設(shè) 招標(biāo) 評(píng)分表百度官網(wǎng)認(rèn)證多少錢(qián)
  • 策劃書(shū)標(biāo)準(zhǔn)格式seo是什么職位縮寫(xiě)
  • 做電影網(wǎng)站的圖片素材智能營(yíng)銷(xiāo)方法
  • 武漢市做網(wǎng)站志鴻優(yōu)化設(shè)計(jì)答案網(wǎng)
  • c 語(yǔ)言能開(kāi)發(fā)做網(wǎng)站嗎哪家網(wǎng)站推廣好
  • 廣東三網(wǎng)合一網(wǎng)站建設(shè)報(bào)價(jià)百度云網(wǎng)盤(pán)搜索引擎入口
  • 幼兒園行風(fēng)建設(shè)網(wǎng)站用稿資料免費(fèi)網(wǎng)站模板庫(kù)
  • 修改網(wǎng)站描述易觀數(shù)據(jù)app排行
  • 網(wǎng)站標(biāo)簽名詞西安seo代運(yùn)營(yíng)
  • 網(wǎng)站首頁(yè)輪播圖怎么換百度開(kāi)放平臺(tái)登錄
  • 個(gè)人網(wǎng)站需要備案嗎站長(zhǎng)工具是什么
  • 網(wǎng)站關(guān)鍵詞指數(shù)查詢seo百度貼吧
  • 中國(guó)化學(xué)工程第六建設(shè)公司網(wǎng)站蚌埠seo外包
  • 怎么做頁(yè)游網(wǎng)站運(yùn)營(yíng)1688的網(wǎng)站特色
  • 怎么做購(gòu)物網(wǎng)站到百度指數(shù)搜索榜