當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3-06 样式 5

發布時間：2024/7/19 CSS 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3-06 样式 5 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

浮動（Float）

關于浮動，要說的可能就是：一個設置了浮動的元素會盡量向左移動或向右移動，且會對其后的元素造成影響，其后的元素會排列在其圍繞在其左下或右下部。似乎就這么簡單，但是在實際開發中，它應用這的是非常的多。在此，我會淺析浮動的基本原理，然后通過實例的方式盡量讓大家對浮動有更加深刻的理解

關于浮動
- 如何設置元素的浮動
  - 設置一個元素的浮動很簡單
    // 只能設置一個元素左浮動或又浮動 float: left/right;
  - 需要特別注意的是：浮動只能作用于文檔流中的元素。也就是說對于四種定位方式，只對默認定位（Static）、相對定位（Relative）的元素起作用。
- 浮動對其周圍元素的作用
  - 浮動只對其后邊的元素有影響，對前邊的元素沒有任何影響。
    - 示例
      <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>#red-div {background-color: red;width: 100px;height: 100px;}#blue-div {background-color: blue;width: 100px;height: 100px;float: right;}</style> </head> <body><div id="red-div"></div><p id="before">This is a paragraph. This is a paragraph. This is a paragraph. </p><div id="blue-div"></div><p id="after">This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.</p> </body> </html>
  - 浮動對其后邊元素的影響
    - 其后為非浮動元素
      - 我們說，“浮動元素后非浮動元素會圍繞在其左下或右下排布”。準確的說，“浮動元素后非浮動元素會按照文檔流的流失布局來排布，只不過會空出浮動元素所占的空間（浮動元素是處在文檔流中的，會占據文檔流的空間）”。但是有一點你需要明白：其后邊元素的所在的容器的是不會為浮動元素流出空間的。
      - 示例
        // 設置 blue 的透明度 #blue-div {background-color: rgba(0, 0, 255, 0.3);width: 100px;height: 100px;float: right; } // 改變 after 的內容長度 <p id="after">This is another paragraph.</p>
        
        觀察發現，after 按照正常的文檔流布局方式排列
        // 設置 after 的背景色 #after {background-color: orange; }
        
        觀察發現，after 占據了整個屏幕寬度
    - 其后為浮動元素
      - 浮動元素后邊的浮動元素，在空間允許的情況下會緊鄰其左下或右下方顯示（浮動方向相同）。
      - 示例
        <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>body {background-color: lightgray;}div {margin-right: 10px;}#red-div {background-color: red;width: 100px;height: 100px;float: right;}#blue-div {background-color: blue;width: 100px;height: 100px;float: right;}#green-div {background-color: green;width: 100px;height: 100px;float: right;}</style> </head> <body><div id="red-div"></div><div id="blue-div"></div><div id="green-div"></div> </html>
        
        我們可以發現，浮動元素后的浮動元素，在空間充足的情況下會緊鄰其左下或右下方顯示（可以理解為從浮動方向起，向相反方向排布）。我們接下來看看空間不足的情況。
        // 設置 blue 的款的為 400px #blue-div {background-color: blue;width: 400px;height: 100px;float: right; }
        
        在空間不足的情況下，其后的元素會排列在下一行，且從浮動方向起，向相反方向排列。接下來我們設置不同的浮動方向。
        // 設置 green 左浮動 #green-div {background-color: green;width: 100px;height: 100px;float: left; }
        
        設置 green 左浮動后，其會從其在文檔流的當前高度開始左右浮動（其不會對其前方的元素造成影響）
- 清除浮動
  - 大家都知道，浮動元素會對其后的元素造成影響。那么，總有些時候，我們是討厭這些影響的，這就需要清除浮動的影響。
    clear: both/left/right;
  - 示例
    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>body {background-color: lightgray;}div {margin-right: 10px;}#red-div {background-color: red;width: 100px;height: 100px;float: right;}#blue-div {background-color: blue;width: 400px;height: 100px;float: right;}#green-div {background-color: green;width: 100px;height: 100px;}</style> </head> <body><div id="red-div"></div><div id="blue-div"></div><div id="green-div"></div> </html>
    
    由圖可知，green-div 顯示到了 red-div 的左邊，其主要是受到 red-div 右浮動的影響。怎么知道其是收到了 red-div 而不是 blue-div 的影響呢？
    // 改變 green-div 的寬度 #green-div {background-color: green;width: 30px;height: 100px; }
    
    觀察發現，green-div 并沒顯示在 blue-div 的左邊（blue-div 的左邊足以容納 green-div）。接下來我們看看清除浮動后的效果。
    // 清楚 green-div 的浮動 #green-div {background-color: green;width: 30px;height: 100px;clear: both; }
    
    清除 green-div 的浮動后，green-div 重新按照文檔流默認的流式布局方式排布。
浮動兩列布局
- 浮動的一個重要的應用是設置頁面的兩列或三列布局，我們通過示例看看如何使用浮動來實現頁面的兩列布局，及其注意事項。
- 示例
  <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>body {background-color: lightgray;}#container {background-color: yellow;}#red-div {background-color: red;float: left;}#green-div {background-color: green;float: right;}</style> </head> <body><div id="container"><div id="red-div"></div><div id="green-div"></div></div> </html>
  我們先搭建頁面的結構，但是在界面上，你什么都看不到。很明顯，對于 div，它默認的尺寸是其內容的尺寸，你沒有設置寬高，自然不會顯示。
  // 設置 red-div 和 blue-div 的尺寸 #red-div {background-color: red;width: 150px;height: 180px;float: left; } #green-div {background-color: green;width: 330px;height: 300px;float: right; }
  
  如圖，設置 red-div 和 blue-div 后，其確實顯示出來了。但是我們設置的父包含塊背景顏色卻沒有顯示出來。這明顯不符合上邊的說法“對于 div，它默認的尺寸是其內容的尺寸”，這又是怎么一會事呢？先不管怎么回事，我們先把問題解決了。
  // 設置 container 的 overflow 屬性為 hidden #container {background-color: yellow;overflow: hidden; }
  
  如圖所示，我們發現，背景圖片顯示出來了。但是原因是什么？原因是，當父包含塊中的子元素設置了浮動時，而其本身沒有設置浮動的情況器，其自身的高度就沒法擴展（不能隨著子元素的高度來改變自己的高度）。關于兩列布局，及如何解決這個問題，還有其他的方案，在此我們不在敘述。有興趣的朋友可以和我一起探討。

控制一個元素的顯示（Display）

我們知道，一個元素至少有兩種顯示狀態：顯示 / 隱藏。而 HTML 元素又分為塊級元素和內聯元素，我們通常需要改變一個 HTML 元素的具體的顯示狀態，來滿足實際的需求。在此，我們就來看看如何通過 display 屬性來控制一個 HTML 元素的顯示狀態。

控制隱藏或顯示
// 隱藏一個元素，元素默認顯示 display: none;
使用 display 隱藏一個元素，被隱藏的元素不會再占據文檔流的空間
// 使用 visibility 屬性隱藏一個元素 visibility: hidden;
使用 visibility 屬性隱藏一個元素，被隱藏的元素會占據原有的文檔流空間
控制以塊級元素或內斂元素顯示
- 默認情況下
  <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>body {background-color: lightgray;}#red-div {background-color: red;width: 100px;height: 100px;}</style> </head> <body><p>This is a paragraph.</p><div id="red-div">This is a div.</div><span>This is another paragraph.</span> </html>
- 使塊級元素顯示為內聯元素
  // 使 red-div 顯示為內聯元素 #red-div {background-color: red;width: 100px;height: 100px;display: inline; }
  
  觀察發現 red-div 和 span 顯示在了一行（塊級元素默認會在其前后添加一個換行）；且 red-div 設置的寬高也沒有效果，這是必然的（只有塊才有尺寸）。如果我們想讓 red-div 顯示在現在的位置，且可設置寬高，那么就讓它顯示為一個行內塊級元素。
  #red-div {background-color: red;width: 100px;height: 100px;display: inline-block; }
- 使內聯元素顯示為塊級元素
  // span 本身是一個內斂元素，設置它顯示為塊級元素 span {display: block; }
  
  圖示為設置 span 為塊級元素后的效果，但是我們會發現，沒有在其前邊增加換行。

對齊方式

通常情況下，我們需要設置一個元素或元素內容的對齊方式，來美化我們的界面。對齊主要在兩個方向上：水平和垂直

元素
- 左右對齊
  - 左右對齊
    - 使用 Absolute 定位實現左右對齊
      <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>body {background-color: lightgray;}#red-div {background-color: red;width: 100px;height: 100px;/*設置右對齊*/position: absolute;right: 0px;}</style> </head> <body><div id="red-div">This is a div.</div> </html>
    - 使用 float 設置左右對齊
      #red-div {background-color: red;width: 100px;height: 100px;/*設置右對齊*/float: right; }
  - 中心對齊
    #red-div {background-color: red;width: 100px;height: 100px;/*設置居中對齊*/margin: 0px auto; }
    需要注意的是，在使用 margin 來設置一個元素的居中對齊時，這個元素必須設置有寬度
- 上下對齊（主要用于圖文混排）
  - 設置垂直對齊
    vertical-align: top/middle/bottom;
  - 示例
    - 默認情況（頂部對齊）
      <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>body {background-color: lightgray;}#red-div {background-color: red;width: 100px;height: 100px;display: inline-block;}</style> </head> <body><div id="red-div">This is a div.</div><span>This is a paragraph.</span> </html>
    - 設置垂直居中對齊
      #red-div {background-color: red;width: 100px;height: 100px;display: inline-block;vertical-align: middle; }
內容（水平對齊）
- 使用 text-align 來設置文本內容的對齊方式
  <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>body {background-color: lightgray;}#red-div {background-color: red;width: 100px;height: 100px;text-align: center;}#content {background-color: yellow;width: 50px;height: 50px;}</style> </head> <body><div id="red-div"><div id="content">div</div></div> </html>
  
  我們發現，設置 text-align 后，red-div 的子孫元素的文本內容水平居中對齊了，其子元素 content 并沒有居中對齊。我們再試沒有辦法像控制元素一樣控制內容的垂直方向上的對齊方式。但是可以采用其他方案，如：邊距、填充等

后記

實在是枯燥無味，不知你是否能堅持看到這里。關于 HTML 和 CSS 基礎的介紹，到此就告一段落了。有關更多細節的東西，會在后續的博客中少有涉及。接下來，會介紹 JavaScript 的基礎。本目前在從事 iOS 和 web 開發工作，處于小妖修煉階段，很希望與大家交流，共同進步。

轉載于:https://www.cnblogs.com/theDesertIslandOutOfTheWorld/p/5535202.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS3-06 样式 5的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

样式

上一篇： jsonp模拟获取百度搜索相关词汇
下一篇：表单和iframe的使用