盒尺寸

来源:https://www.cnblogs.com/Dusks/archive/2020/06/12/13099272.html
-Advertisement-
Play Games

# 從零開始的前端生活--盒尺寸 padding padding對塊級元素的影響 css中預設的box-sizing 是content-box,使用padding會額外增加元素的尺寸。 當padding足夠大，把width擠沒掉了，這時width就無效。裡面的內容表現為“首選最小寬度” 首選最小寬 ...


從零開始的前端生活--盒尺寸

padding

padding對塊級元素的影響

  1. css中預設的box-sizing 是content-box,使用padding會額外增加元素的尺寸。

  2. 當padding足夠大，把width擠沒掉了，這時width就無效。裡面的內容表現為“首選最小寬度”

    首選最小寬度

    1. 對於中文，寬度表現為每個漢字的寬度
    2. 對於西方文字，寬度表現為特定的連續的英文字元單位組成，一般會終止於空格、短橫線、問號、以及其他非英文字元 （如果想要表現為每個字元為最小寬度，可用 word-break: break-all; ）
    3. 類似於圖片等替換元素，寬度就是該元素內容本身的寬度

padding對純內聯元素(不包括替換元素)的影響

對上下元素的原本佈局沒有任何影響，僅僅是垂直方向發生了層疊

看下下麵這個例子，兩個div之間夾著inline元素a標簽

<div class="box"></div>
<a href="">padding</a>
<div class="box"></div>

.box {
    height: 50px;
    background-color: pink;
}

a {
    background-color: skyblue;
    padding: 50px;
    text-decoration: none;
}

不瞭解的話，會認為a標簽撐開了div，兩個div之間距離會大於100px。實際上卻是這樣的。

padding1

結果是發生了層疊，在細品，兩個div之間的高度就是padding的font-size，也就是a標簽的content-box的高度，padding絲毫沒影響上下元素(註意這裡特指純內聯元素)

應用的話，我們可以利用純內聯元素的padding不影響上下元素的特點來增加點擊區域。

還有一個應用就是，如果一個網頁有頂部固定fixed一個導航欄，當我們通過地址欄的hash值和頁面html的id值相對應元素髮生瞄點定位或者電梯導航。標題就會被導航欄擋住了。如果我們希望不被擋住要怎麼實現？

假設我們標題使用h3，然後在padding或者margin的話，雖然符合要求，但是頁面佈局就亂了，這顯然不是我們想要的，我們要的是既能符合要求，又不影響上下元素。所以純內聯元素的padding就很好解決了問題。可以這樣用

<nav>導航欄</nav>
<h3 id="hash1">這是我們的標題</h3>
<h4><span id="hash2">這是我們的標題四</span></h4>
<h4><span id="hash3">這是我們的標題四</span></h4>

h3 {
    background-color: pink;
    padding-top: 50px;
    height: 1000px;
}

h4 {
    background-color: pink;
    height: 600px;
}

h4 span {
    border: 1px solid black;
    padding-top: 50px;
}

簡單寫了代碼，就是在h4裡面套一個純內聯元素然後就可以滿足我們需求了。

  1. padding是不支持負值的

margin

理清一下各類尺寸

尺寸 原生DOM jQuery
元素尺寸(包括padding和border) offsetWidth $().outerWidth()
元素內部尺寸(包括padding不包括border)(元素可視尺寸) clientWidth $().innerWidth()
元素外部尺寸 $().outerWidth(true)

margin和內部尺寸

padding會改變元素可視尺寸，畢竟上表寫著。margin只有在元素是“充分利用可用空間”狀態的時候，margin才會改變元素的可視尺寸。

什麼是充分利用可利用空間 的狀態？如下代碼

<div class="father">
    <div class="son"></div>
</div>

.father{
    width:300px;
    margin: 0 -20px;
}

對於son這個div，他沒有設定width，也沒有保持包裹性，他就表現為“充分利用可利用空間”狀態，這個時候son的width就等於父元素的width。這個狀態就會受margin影響，如我們在son上加個 margin: -30px;此時son的寬度就等於父元素的寬度+30*2。無論垂直還是水平方向(這是對具有拉伸特性的絕對定位元素來說)，我覺得哪一個方向符合“充分利用可利用空間”狀態就會被margin影響。

margin和外部尺寸

記住一句話，只要是塊狀元素，margin就會影響其外部尺寸。無論垂直還是水平。

只能使用子元素的margin-bottom來實現滾動容器的底部留白。

margin的百分比值的計算規則和padding一樣，都是相對於寬度計算的。

margin合併

定義：塊級元素的上外邊距與下外邊距有時會合併成單個外邊距，這個現象稱為“margin合併”。

備註：1、這裡的塊級元素不包括浮動和定位元素。2、預設是只發生在垂直方向上

margin合併的三種情況：

  1. 相鄰兄弟元素margin合併

  2. 父元素和第一個子元素/最後一個子元素

    解決辦法(舉例margin-top)：

    • 父元素設置為塊狀格式化上下文元素，如設置overflow：hidden；
    • 父元素設置border-top值
    • 父元素設置padding-top值
    • 父元素和第一個子元素之間添加內聯元素進行分隔

  3. 空塊級元素的margin合併

    <div class="father">
    <div class="son">
    </div>
</div>

    .father{ overflow: hidden;}
.son{ margin: 10px 0;}

    分析: father設置 overflow是為了防止出現第二種情況(父子合併)，結果還真沒出現父子合併，不過出現了空塊級元素合併，father的div高度結果為10px，並不是所想的20px

    解決空塊元素合併：

    • 設置垂直方向的border或padding
    • 裡面添加內聯元素
    • 設置height或者min-height

合併的計算規則：

"正正取大值，正負值相加，負負最負值"

舉個慄子

<div class="a"></div>
<div class="b"></div>

.a{ margin-bottom: 50px;}
.b{ margin-top:20px;}

結果a與b之間的間距為50，正正取大值嘛

margin: auto;

先看個慄子

<div class="father">
    <div class="son">
    </div>
</div>

.father{
    width: 300px;
}
.son{
    width:200px;
    margin-right: 80px;
    margin-left: auto;
}

這是單側的auto，效果是這樣的，margin-left = 20px；auto其實就是計算後的剩餘空間，原本300px-200px-80px = 20px

margin的auto就是為塊級元素的左中右對齊而設計的，和內聯元素的text-align相對應。如果上面的son改成

.son{
    width: 200px;
    margin-left: auto;
}

這樣實現的是右對齊。

.son{
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

這樣實現的是居中對齊。

剛開始的時候，我覺得margin: auto; 應該是垂直居中對齊的，可是有時顯示不出來。原因分析如下

margin: auto; 計算是有前提條件的，就是元素具有對應方向的填充特性的，什麼意思？假設把son的寬度200px去掉，則son的寬度就會自動填充到和father一樣的寬度，這就是填充特性啊！height行不？當然不行，塊級元素的特點就是這樣，沒設height時就會預設為0，不會像width那樣填充。

所以由上分析，height沒有符合條件，預設下不會auto計算。

但是我們可以創造條件，如下

<div class="box">
    <div class="innerbox">hhhhhh</div>
</div>
<div class="father">
    <div class="son"></div>
</div>

.father {
    width: 300px;
    height: 150px;
    position: relative;
    background-color: pink;
}

.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: skyblue;
}

先看下效果

margin

這樣就是垂直居中對齊。為什麼？我們用定位，top：0；等這些，把son尺寸表現為："格式化寬度和格式化高度"，使寬高都具有填充特性。這樣他就可以auto計算了。

真的是太妙了！！！我人傻了。

margin無效

  1. 純內聯元素的垂直margin是無效的，並且對於內聯替換元素，它的垂直margin有效且不發生合併現象

  2. 有時候我們定位和float，margin會失效，記住方位要一致，否則只能影響兄弟元素，影響不了元素定位。比如，

    top: xx;對應 margin-top； float: right; 對應margin-right;

也許對於第一點，會有這樣例子

<div class="box">
    <img src="xxx.jpg">
</div>

.box img{
    height: 96px;
    margin-top: -200px;
}

這個例子圖片按道理會在box的外面，實際上它往上偏移到一定距離就不動了，margin失效了？不！有生效果，不過內聯元素還受到vertical-align和幽靈空白點的影響！

border

border不支持百分比值

border-width還支持關鍵字，thin,medium,thick,分別對應1px，3px，4px。

border-style

  1. 預設值為none
  2. solid 實線邊框
  3. dashed 虛線邊框
  4. dotted 圓點邊框
  5. double 雙線邊框

border-color

border-color的預設顏色就是color色值

border繪製圖形

看下下麵代碼

<div class="box"></div>

.box {
    width: 0;
    border: 50px solid;
    border-color: pink red yellow skyblue;
}

結果是這樣的

border

驚呆了！當寬度和高度為0時，是這樣的，我之前以為border是長方條，我錯了！！！

我們把寬度和高度改成20px看看

.box {
    width: 20px;
    height: 20px;
    border: 50px solid;
    border-color: pink red yellow skyblue;
}

變成這樣

border1

變成梯形了，神奇！！！

border等高佈局

原理：元素邊框高度總是和元素自身高度保持一致

結語

讀張老師的css世界寫的筆記


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

-Advertisement-
Play Games
更多相關文章
  • ✍ 寫一個擴展性較強的搜索主頁
    前置 點擊按鈕切換搜索引擎 搜索框跟隨切換改變樣式 使用 vue 最快了 template 為了方便擴展，使用 v-for 迴圈渲染出按鈕，綁定切換搜索引擎的 method ， 傳入不同名稱以區別搜索引擎。按鈕的樣式也動態綁定。 輸入框動態綁定樣式，在點擊按鈕切換搜索引擎時，搜索框綁定的樣式對應的 ...
  • Vue3教程，搶先學習
    Vue 3尚未正式發佈，但是維護者已經發佈了Beta版本，供我們的參與者嘗試並提供反饋。 如果你想知道Vue 3的主要功能和主要變化是什麼，那麼我將在這篇文章中重點介紹一下，告訴你使用Vue 3 beta 9創建一個簡單的應用程式。 我將介紹儘可能多的新內容，包括fragments，teleport ...
  • JQuery跳出each迴圈的方法(包含數組遍歷)【轉】
    0. 前言 也許我們通過 jquery 的迴圈方法進行數組遍歷，但是當不符合條件時，怎麼跳出當前迴圈？（即用each方法內，當不滿足條件時想break跳出迴圈體，想continue繼續執行下一個迴圈遍歷），我們經常會習慣JS中的break何continue,但是使用之後沒有效果，因為在JQuery中 ...
  • Webpack 5模塊聯邦會不會引發微前端的革命呢？ 本文詳解
    Webpack 5的模塊聯邦提供載入部分編譯好的代碼能力，這個似乎會成為微前端架構的標準實現。 Webpack只是我分享的一小點，我是08年出道的高級前端架構師，有問題或者交流經驗可以進我的扣扣裙 519293536 我都會儘力幫大家哦 引言 在當前的微前端實現中，我們需要通過一系列的技巧去實現。正 ...
  • 基於AntV圖表庫的Ant DeSign Charts圖表展示的簡單應用
    摘要 數據是我們每天都在接觸的東西，我們需要清晰的瞭解去瞭解數據的變化趨勢，就需要讓數據可視化。最近在接觸學習antd的社區精選組件，上一篇文章主要是講了高德地圖的應用，這次我們就來分享下G2Plot在react中實現可視化數據圖表的簡單應用。 Ant Design Charts的使用方法 安裝 n ...
  • 基於React-Amap組件庫的高德地圖簡單應用
    摘要 平常生活中，地圖導航是必不可少的，最近在學習Ant Design，瞭解了下社區的精選組件，看到了與地圖相關的精品組件庫，高德地圖組件庫。所以記錄下這次高德地圖的使用心得，既可以提升自己的業務多樣性，也可以分享給需要的小伙伴。 React-Amap用法 安裝 npm install --save ...
  • uglifyjs 合併壓縮 js, clean-css 合併壓縮css
    本文主要介紹如何通過CLI命令行（也就是終端或者cmd打開的那個shell視窗）實現 js和 css 的合併壓縮。 uglifyjs 合併壓縮 js: 1.安裝node 這一步就不多說了，下載node自行安裝。 2.安裝 uglifyjs 全局安裝： npm install -g uglify-js ...
  • 最詳盡的 JS 原型與原型鏈終極詳解，包你學廢！（一）
    一. 普通對象與函數對象 JavaScript 中，萬物皆對象！但對象也是有區別的。分為普通對象和函數對象，Object 、Function 是 JS 自帶的函數對象。下麵舉例說明 var o1 = {}; var o2 =new Object(); var o3 = new f1(); ​ fun ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類