WEB前端第十二課——CSS盒子

来源:https://www.cnblogs.com/husa/archive/2020/07/23/13368626.html
-Advertisement-
Play Games

1.盒子模型主要定義四個區域:內容(content)、內邊距(padding)、邊框(border)、外邊距(margin) 2.border,設置元素的邊框,屬性(邊框三要素):寬度、樣式、顏色,這也是通常border屬性值的書寫順序(非嚴格要求) 單獨書寫:border-width(寬度,預設3 ...


1.盒子模型主要定義四個區域:內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)

2.border,設置元素的邊框,屬性(邊框三要素):寬度、樣式、顏色,這也是通常border屬性值的書寫順序(非嚴格要求)

  單獨書寫:border-width(寬度,預設3px)、border-style(樣式,預設none)、border-color(顏色,預設黑色)

  border-style屬性值:dotted(點狀)、solid(實線)、double(雙實線)、dashed(虛線)、無邊框(none)

3.padding,設置元素內容與邊框之間的距離,增加內邊距會擴大元素邊框所占用的區域

  書寫格式:padding:value(四邊設置,可多值)、padding-top/right/bottom/left:value(單邊設置),value取值可以為像素、百分比,但不能為負數

4.margin,設置元素邊框外周圍的空白區域,外邊距是透明的

  書寫格式:margin:value(四邊設置、可多值)、margin-top/right/bottom/left:value(單邊設置),value取值可以為像素、百分比、auto、負數

  外邊距合併,當兩個垂直外邊距相遇時,他們將形成一個外邊距,即外邊距合併

        合併後的外邊距的高度等於發生合併的兩個外邊距中高度較大者

        兩個塊級元素是包含關係時,要設置被包含元素的相對邊距,需要增加父元素border(邊框)或使用“ overflow:hidden”或“ padding”

  外邊距特點:① 塊級元素的垂直相鄰外邊距外邊距會合併,② 行內元素不占上下外邊距,且左右外邊距不會合併,③ 浮動元素的外邊距也不會合併,④ 允許指定負數外邊距值

5.怪異盒子,盒子模型分為兩種,一種是符合W3C規範的標準盒子模型,另一種是IE的盒子模型,也被叫做怪異盒子

  IE盒子模型也包括margin、border、padding、content,不過IE盒子模型的寬(width)包含了border和padding

6.box-sizing,該屬性用於指定當前元素使用哪種盒子模型,標準(W3C)或 怪異(IE)

  屬性值:

     content-box(標準),padding和border不會被包含在width和height內

     border-box(怪異),padding和border被包含在width和height內,即元素實際大小隻與width和height有關

7.flexbox,伸縮盒子模型(也叫彈性盒子)

  它決定一個盒子在其他盒子中的分佈,以及如何處理可用的空間。

  該模型可以輕鬆的創建“自適應”瀏覽器視窗的流動佈局。

  傳統盒子模型基於HTML文檔流排列,彈性盒子模型可以規定特定的順序。

  通過設置 display屬性值為 flex開啟彈性盒子模型。

  設置了彈性盒子模型後,float、clear、vertical-align在 flex中不起作用。

8.flex

  基本結構:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS選擇器</title>
    <style>
        .d0 {
            width: 100%;
            height: 600px;
            background-color: aliceblue;
            display: flex;
        }
        .d1 {flex-grow: 1; background-color: blue;}
        .d2 {flex-grow: 2; background-color: aquamarine;}
        .d3 {flex-grow: 1; background-color: coral;}
    </style>
</head>
<body>
    <div class="d0">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
</body>
</html>

  display:flex,定義外層父容器 d0為彈性佈局,預設為水平佈局

  flex-grow:value,該屬性表示當前子項目在父容器中的占比,預設值為0

  flex-direction,定義靈活項目的佈局方向,屬性值:row(預設值,靈活項目水平排列)、row-reverse(靈活項目以相反的順序水平排列)

                          column(靈活項目垂直排列)、column-reverse(靈活項目以相反的順序垂直排列)

  justify-content,設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式,使用該屬性之前必須先聲明父元素為彈性盒子

     屬性值:flex-start(預設值,子項目位於容器的開頭)、flex-end(子項目位於容器的結尾)、center(子項目位於容器的中心)、

         space-between(子項目位於各行之間留有空白的容器內)、space-around(子項目位於各行之前、之間、之後都留有空白的容器內)

  align-items,該屬性定義靈活子項目在flex父容器的側軸(縱軸)方向上的對齊方式

     屬性值:stretch(預設值,拉伸子項目以適應容器)、center(子項目在容器中心)、flex-start(子項目在容器開頭)、flex-end(子項目在容器末端)、baseline(子項目在容器基線)

    


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文更新於2020-05-03,使用MySQL 5.7,操作系統為Deepin 15.4。 許可權 許可權存取需要用到mysql庫中user、db、host、tables_priv、columns_prvi這幾個許可權表。列分為4個部分:用戶列、許可權列、安全列、資源控制列。許可權列又分為普通許可權和管理許可權。 ...
  • 開始之前明確一下死鎖和鎖等待這兩個事件的異同相同的之處:兩者都是當前事物在試圖請求被其他事物已經占用的鎖,從而造成當前事物無法執行的現象不同的之處:死鎖是相關session雙方或者多方中必然要犧牲(回滾)至少一個事務,否則雙方(或者多方)都無法執行;鎖等待則不然,對於暫時無法申請到的鎖,嘗試持續地“ ...
  • MHA(Master HA)是一款開源的 MySQL 的高可用程式,它為 MySQL 主從複製架構提供了 automating master failover 功能。MHA 在監控到 master 節點故障時,會提升其中擁有最新數據的 slave 節點成為新的master 節點,在此期間,MHA 會 ...
  • 原文地址:https://www.citusdata.com/blog/2019/02/08/the-most-useful-postgres-extension-pg-stat-statements/Postgresql的Extensions能夠延伸,更改和推進Postgres的行為。怎麼樣?通過 ...
  • 一、隱士intent,緊接著上一次複習 得到第二個活動返回的數據之後,我們需要重寫onActivityResult()來獲取數據 protected void onActivityResult(int requestCode,int resultCode,Intent data){ switch(r ...
  • 請輸入有效的11位數字手機號碼,或者包含區號的11位或12位數字座機號碼 出現這個問題按照提示上的來看應該是手機號碼輸入的不對 但是輸入的手機號碼的確是11位 這個手機號是開發者賬號綁定的手機號 也就是這個開發者賬號的蘋果ID綁定的電子郵箱和綁定的手機號碼 解決方案就是在手機上登錄上開發者的那個賬號 ...
  • 首先刪除 SceneDelegate.h 和 SceneDelegate.m ,info.plist中的 Application Scene Manifest 和 AppDelegate.m 中的 #pragma mark - UISceneSession lifecycle - (UISceneC ...
  • 功能點: 1.更新彈窗UI 2.強更與非強更且別控制 3.屏蔽物理返回鍵(因為強更的時候點擊返回鍵,彈窗會消失) 4.點擊彈窗外透明區域時,彈窗不消失 ...
一周排行
    -Advertisement-
    Play Games
  • 記錄一篇.netwebapi開發過程 首先使用6+dapper+sqlserver 我們創建一個空項目使用HttpReports來監控api HttpReports 基於.Net Core 開發的APM監控系統,使用MIT開源協議,主要功能包括,統計, 分析, 可視化, 監控,追蹤等,適合在微服務環 ...
  • 本文技術源自外企,並已在多個世界500強大型項目開發中運用。 本文適合有初/中級.NET知識的同學閱讀。(支持.NET/.NET Framework/.NET Core) RabbitMQ作為一款主流的消息隊列工具早已廣受歡迎。相比於其它的MQ工具,RabbitMQ支持的語言更多、功能更完善。 本文 ...
  • ApeForms系列① 快速上手 @ 前言 ApeForms是一套基於WinForm框架免費的UI庫,提供了豐富的Metro風格控制項、針對WinForm開發中常見類型的擴展、通用Dialog/Notification的模板等。 目前ApeForms仍在持續開發擴充更多的控制項,如果有好的建議可以在評論 ...
  • C#-WinForm窗體仿Android桌面(左右翻頁) 利用ApeForms擴展方法使控制項平滑運動,並以此實現一個仿Android桌面翻頁的效果。 ...
  • 本文大部分來自官方教程的Google翻譯 但是加了一點點個人的理解和其他相關知識 轉載請註明 原文鏈接 :https://www.cnblogs.com/Multya/p/16317401.html 官方教程: https://www.sfml-dev.org/tutorials/2.5/ 播放聲音 ...
  • 背景 項目裡面的yml文件為了區別線上、測試、本地環境,分別有application-prod.yml,application-dev.yml,application-local.yml;但是每個裡面有很多相同的配置,希望配置文件裡面的運維相關的公共配置抽取出來,統一管理 實現方案 通過在appli ...
  • 最近 JetBrains 為旗下系列 IDE 發佈了全新的預設 UI: IDEA 官宣全新預設 UI,太震撼了!! 不過現在還是預覽版,需要通過以下鏈接參與試用: https://www.jetbrains.com/lp/intellij-new-ui-preview/ 棧長昨天也提交了試用申請,還 ...
  • 在IDEA中將Javafx項目打包成為可運行的.jar文件。 使用JDK17.0.2。 ...
  • 在Spring項目中進行簡單的cglib動態代理的學習測試,主要代碼如下: 一個目標類HaveDinnerService public class HaveDinnerService { public String eat(String food) { System.out.println("開始吃 ...
  • 記錄一下使用springSecurity搭建用戶認證和授權的代碼、、、 技術棧使用springSecurity + redis + JWT + mybatisPlus 部分代碼來自:https://blog.csdn.net/I_am_Hutengfei/article/details/100561 ...