2. 程式人生 > >後端碼農談前端（CSS篇）第六課：盒子模型

後端碼農談前端（CSS篇）第六課：盒子模型

阿新 • • 發佈：2019-01-15

clipboard

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。

提示：背景應用於由內容和內邊距、邊框組成的區域。

一、CSS 內邊距屬性

屬性 描述
padding 簡寫屬性。作用是在一個宣告中設定元素的所內邊距屬性。
padding-bottom 設定元素的下內邊距。
padding-left 設定元素的左內邊距。
padding-right 設定元素的右內邊距。
padding-top 設定元素的上內邊距。

屬性值：

  • auto：瀏覽器計算內邊距。
  • length：規定以具體單位計的內邊距值，比如畫素、釐米等。預設值是 0px。
  • %：規定基於父元素的寬度的百分比的內邊距。
  • inherit：規定應該從父元素繼承內邊距。

    二、CSS 邊框屬性

    1、border

    屬性 描述
    border 簡寫屬性，用於把針對四個邊的屬性設定在一個宣告。
    border-bottom 簡寫屬性，用於把下邊框的所有屬性設定到一個宣告中。
    border-left 簡寫屬性，用於把左邊框的所有屬性設定到一個宣告中。
    border-right 簡寫屬性，用於把右邊框的所有屬性設定到一個宣告中。
    border-top 簡寫屬性，用於把上邊框的所有屬性設定到一個宣告中。

    2、border-style

    屬性 描述
    border-style 用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。
    border-bottom-style 設定元素的下邊框的樣式。
    border-left-style 設定元素的左邊框的樣式。
    border-right-style 設定元素的右邊框的樣式。
    border-top-style 設定元素的上邊框的樣式。

    屬性值：

  • none：定義無邊框。
  • hidden：與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
  • dotted：定義點狀邊框。在大多數瀏覽器中呈現為實線。
  • dashed：定義虛線。在大多數瀏覽器中呈現為實線。
  • solid：定義實線。
  • double：定義雙線。雙線的寬度等於 border-width 的值。
  • groove：定義 3D 凹槽邊框。其效果取決於 border-color 的值。
  • ridge：定義 3D 壟狀邊框。其效果取決於 border-color 的值。
  • inset：定義 3D inset 邊框。其效果取決於 border-color 的值。
  • outset：定義 3D outset 邊框。其效果取決於 border-color 的值。
  • inherit：規定應該從父元素繼承邊框樣式。

    3、border-width

    屬性 描述
    border-width 簡寫屬性，用於為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。
    border-bottom-width 設定元素的下邊框的寬度。
    border-left-width 設定元素的左邊框的寬度。
    border-right-width 設定元素的右邊框的寬度。
    border-top-width 設定元素的上邊框的寬度。

    屬性值：

  • thin：定義細的邊框。
  • medium：預設。定義中等的邊框。
  • thick：定義粗的邊框。
  • length：允許您自定義邊框的寬度。
  • inherit“規定應該從父元素繼承邊框寬度。

    4、border-color

    屬性 描述
    border-color 簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。
    border-bottom-color 設定元素的下邊框的顏色。
    border-left-color 設定元素的左邊框的顏色。
    border-right-color 設定元素的右邊框的顏色。
    border-top-color 設定元素的上邊框的顏色。
  • color_name：規定顏色值為顏色名稱的邊框顏色（比如 red）。
  • hex_number：規定顏色值為十六進位制值的邊框顏色（比如 #ff0000）。
  • rgb_number：規定顏色值為 rgb 程式碼的邊框顏色（比如 rgb(255,0,0)）。
  • transparent：預設值。邊框顏色為透明。
  • inherit：規定應該從父元素繼承邊框顏色。

    三、CSS 外邊距屬性

    屬性 描述
    margin 簡寫屬性。在一個宣告中設定所有外邊距屬性。
    margin-bottom 設定元素的下外邊距。
    margin-left 設定元素的左外邊距。
    margin-right 設定元素的右外邊距。
    margin-top 設定元素的上外邊距。

    屬性值：

  • auto：瀏覽器計算外邊距。
  • length：規定以具體單位計的外邊距值，比如畫素、釐米等。預設值是 0px。
  • %：規定基於父元素的寬度的百分比的外邊距。
  • inherit：規定應該從父元素繼承外邊距。

    四、外邊距合併：

    外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

    clipboard[6]

    • 相關推薦

    後端碼農談前端（CSS篇）第六課：盒子模型

    元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。 提示：背景應用於由內容和內邊距、邊框組成的區域。 一、CSS 內邊距屬性 屬性 描述 padding 簡寫屬性。作用是在一個宣告中

    後端碼農談前端（CSS篇）第五課：CSS樣式

    一、背景： CSS 允許應用純色作為背景，也允許使用背景影象建立相當複雜的效果。 1、背景色 可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。 例如： p {background-color: gray;} 2、背景影象 要把影象放入背景，需要使用 bac

    後端碼農談前端（CSS篇）第七課：定位與浮動

    一、定位： 1、定位的理解 （1）相對定位 相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。 如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 3

    （基礎篇）第1課：C#程序設計基礎——動起來的Label控件

    創建 文本編輯器 ble 知識 項目 pac too cli 雙擊 參考：學通C#的24堂課（羊皮卷系列） 1. Tool：VS2017(VS2008 VS2010 都可以) 2. 新建項目：C# -> Windows應用窗體程序 3. 在彈出的Form窗口中添加L

    軟體開發實訓（720科技）――第六課：轉換器和格式化、驗證器

    4. JS SR R 3 30 03 3 V Va al li id da at to or r 範 例     jsr303-validator 應用程式展示了 JSR 303 輸入驗證的例子。這個應用程式是對 spring-validator 進行修改之後的版本，與之前的版本有一些區別。首先，它沒有 Pr

    前後端分離，如何在前端專案中動態插入後端API基地址？（in docker）

    開門見山，本文分享**前後端分離，容器化前端專案時動態插入後端API基地址**，這是一個很讚的實踐，解決了前端專案容器化過程中受制後端呼叫的尷尬。 ## 尷尬從何而來 常見的web前後端分離：前後端分開部署，前端專案由nginx承載打包檔案，反向代理請求。 應用的某些部分必須是可配置的，比如`API呼叫

    後端結對編程小結（6.6）

    生成 需求文檔 com gen inf 數據 lin 利用 後端 鄒衛其、陳誌鍇 任務進度報告： 按照前一篇前端給出的數據庫需求文檔（link），用navicat新建了數據庫表，如下圖 並且利用逆向工程generator，生成了數據庫接口方法，實現了對兩個數據表的插入。

    後端架構師網址收藏（強烈推薦）

    收藏 .com ref hub 編寫 開源 技術棧 awesome get 1 《後端架構師技術圖譜》 -----阿裏巴巴 2 從部落到帝國 - 後端技術棧的演進及開源實踐 ----正在編寫書籍 後端架構師網址收藏（強烈推薦）

    後端好書閱讀與推薦（續五）

    Redis設計與實現 通過前面這本書我們已經知道redis怎麼用比較好了，現在我們來看看 Redis 的實現原理。這本書是作者自己看著原始碼寫出來的，不得不佩服作者的智慧與毅力。這本書基於redis3.0，此刻redis最新版是4.0.9，我們看書的時候可以自己

    前端知識點總結（CSS篇）

    聖盃佈局 CSS合併方法 盒子模型 CSS定位 CSS動畫原理 CSS3動畫（簡單動畫的實現，如旋轉等） CSS不同選擇器的權重(CSS層疊的規則) flexbox佈局 塊級元素和行內元素的異同 CSS在效能優化方面的實踐（比方說選擇器的效率等） CSS打包壓縮的

    前端（十二）—— JavaScript基礎操作：if語句、for循環、while循環、for...in、for...of、異常處理、函數、事件、JS選擇器、JS操作頁面樣式

    結束 建議 prop map、set -c 表單元素 tle form collect JavaScript基礎操作 一、分支結構 1、if語句 if 基礎語法 if (條件表達式) { 代碼塊; } // 當條件表達式結果為true，會執行代碼塊；反之不執行

    Python核心編程（第二版）第六章部分習題代碼

    enume 6.5 替代 部分 lower fir put valid else 6-2字符串標識符.修改例 6-1 的 idcheck.py 腳本,使之可以檢測長度為一的標識符,並且可以識別 Python 關鍵字,對後一個要求,你可以使用 keyword 模塊(特別是 k

    實現PHP伺服器+Android客戶端（Retrofit+RxJava）第六天推送的實現

    廢話不多說，今天來說說近幾天的成果。 如何實現推送 android客戶端nio的使用 為啥要使用長連線 長連線的建立 php伺服器如何實現長連線 後期需要優化的部分 如何實現推送 推送的原理其實也很簡單，伺服器和客戶端實現長連線，實現了長連線之後就

    根據後序和中序遍歷輸出先序遍歷 （25 分）第六章樹和二叉樹作業1—二叉樹--計算機17級 7-1

    7-1 根據後序和中序遍歷輸出先序遍歷 （25 分） 本題要求根據給定的一棵二叉樹的後序遍歷和中序遍歷結果，輸出該樹的先序遍歷結果。 輸入格式: 第一行給出正整數N(≤30)，是樹中結點的個數。隨後兩行，每行給出N個整數，分別對應後序遍歷和中序遍歷結果，數字間以空格分隔

    團隊作業8----第二次項目沖刺（Beta階段） 第六天

    mas 發現 blog 項目 功能 程序 src 代碼 images BETA階段沖刺第六天 1.當天站立式會議 本次會議主要總結昨天任務完成情況，並分配新任務。 2.每個人的工作 （1） 成員 昨天已完成的工作 今天計劃完成的工作 莊健鵬（2014

    第二次項目沖刺（Beta階段）--第六天

    新的 nbsp ima ava str 方式 r文件 測試 blog 一、站立式會議照片 二、項目燃盡圖 三、項目進展 1、繼續完成docx文件的讀取，聽取助教的意見采用原型法，先簡單寫了一個可運行的docx

    【第二組】項目沖刺（Beta版本）第六次每日例會 2017/7/24

    ima size 界面優化 png 整理 strong 技術 eight logs 項目沖刺（Beta版本）第六次每日例會 開發小組：Hunter 沖刺經理：林貴淵 小組成員：林軒宇，張太，李明君，劉仁人 1、每日例會內容 （1）昨天做了什麽 1、林軒宇：Button音

    加法變乘法——第六屆藍橋杯C語言B組（省賽）第六題

    clu 自己 nbsp 加法 藍橋杯 重新 () std spa 原創 加法變乘法 我們都知道：1+2+3+ ... + 49 = 1225現在要求你把其中兩個不相鄰的加號變成乘號，使得結果為2015 比如：1+2+3+...+10*11+12+...+27*28+29+

    HTML+CSS第六課：初識CSS之CSS選擇器的使用、為HTML文件新增CSS樣式的3種方式

    知識點：CSS的概念及語法、CSS選擇器的使用、CSS選擇器的優先順序、新增CSS樣式的3種方式。 1、CSS概念理解         CSS 是Cascading Style Sheet的縮寫，可以翻譯為“層疊樣式表”或者“級聯樣式表”，即“樣式

    （雲吶管理手冊）第六章：提交企業認證，啟用跨企業互動

    為保障服務供需雙方企業資訊的真實性，平臺規定企業資訊如未完善，無法使用企業互動功能。因此，如果需要使用企業互動功能，需要先完成企業認證。 平臺提供了Web、App兩個客戶端版本的企業認證入口，我們將根據客戶端不同，分別介紹企業認證的方法。 1.WEB企業認證 第一步：在“企業/相關配置/企業資