很多人css數值(百分比|負值)基準分不清,今天給你講講

来源:https://www.cnblogs.com/coderhf/archive/2020/07/08/13267680.html
-Advertisement-
Play Games

今天為什麼要給大家講解這個東西呢,因為css這部分,尤其是數值這部分感覺非常簡單,但是尤其是簡單的,卻很多人根本就沒有弄懂。所以今天就來講一下css的數值問題吧。大家還是好好聽一下吧。 width height 百分比 當元素的height、width設置為百分比時,分別基於包含它的塊級對象的高度、 ...


今天為什麼要給大家講解這個東西呢,因為css這部分,尤其是數值這部分感覺非常簡單,但是尤其是簡單的,卻很多人根本就沒有弄懂。所以今天就來講一下css的數值問題吧。大家還是好好聽一下吧。

width height 百分比

當元素的height、width設置為百分比時,分別基於包含它的塊級對象的高度、寬度。這個是常規百分比的含義。

 <div class="container">
   <div class="inner">註意這裡</div>
   <div class="divider">我是分割線</div>
 </div>
 ​
 .container{
   width: 500px;
   height: 300px;
   border: 1px solid grey;
 }
 ​
 .inner{
   background: lightblue;
   text-align: center;
   width: 50%;
   height: 50%;
 }
 .divider{
   border-top: 1px solid lightblue;
   text-align: center;
 }

 

 

margin 百分比

假設一個塊級容器,寬 500px,高 300px,塊級子元素定義 margin:10% 5%;,你覺得 margin 的 top, right, bottom, left 計算值最終是多少?

我們來實際看一下

 <div class="container">
   <div class="inner">註意這裡</div>
   <div class="divider">我是分割線</div>
 </div>
 ​
 .container{
   width: 500px;
   height: 300px;
   border: 1px solid grey;
 }
 ​
 .inner{
   margin: 10% 10%;
   background: lightblue;
   text -align: center;
 }
 .divider{
   border-top: 1px solid lightblue;
   text-align: center;
 }

 

 

結果出來了,50px 50px 50px 50px,並不是50px 30px 50px 30px

為什麼

CSS權威指南中的解釋:

我們認為,正常流中的大多數元素都會足夠高以包含其後代元素(包括外邊距),如果一個元素的上下外邊距是父元素的height的百分數,就可能導致一個無限迴圈,父元素的height會增加,以適應後代元素上下外邊距的增加,而相應的,上下外邊距因為父元素height的增加也會增加。

margin 的百分比值參照其包含塊的寬度進行計算。

當書寫模式變成縱向的時候,其參照將會變成包含塊的高度。我們改變一下上面例子中的 CSS 書寫模式:

 .container{
   width: 500px;
   height: 300px;
   border: 1px solid grey;
   writing-mode: vertical-lr;
 }

 

 

這時的結果為:30px 30px 30px 30px

也就是說書寫模式影響 margin 百分比的參照對象

padding 百分比

同上 Î

舉個例子看看效果。註意,這是縱向排列的例子。

註意這裡

我是分割線

同上一個例子相比, 左側元素占位區域並沒有擴大,僅僅是由於margin 改為padding 導致背景區域擴大而已。

因此,padding的百分比不是相對於自身,而是當書寫模式為預設橫向排列時,相對最近父元素的寬度,書寫模式為writing-mode: vertical-lr; 縱向排列時,百分比相對於父元素高度

width、padding 聯合百分比

單用一個很簡單,但如果聯合,可能就會有問題了。這裡我不禁要問一句:

兄弟,你聽過盒模型麽?

  • W3C的標準盒模型 box-sizing: content-box,預設屬性 設置的width或height是對 實際內容(content)的width或height進行設置,內容周圍的border和padding另外設置

  • 怪異盒模型 box-sizing: border-box 設置的width或height是對 實際內容(content)+內邊距(padding)+邊框(border)之和

現在,我們來看個慄子,其中內部元素width設為100%padding設為10%

 <div class="container">
   <div class="inner"><div class="text">註意這裡</div></div>
   <div class="divider">我是分割線</div>
 </div>
 ​
 .container{
   width: 500px;
   height: 300px;
   border: 1px solid grey;
 }
 .inner{
   background: lightblue;
   text-align: center;
   width: 100%;
   padding: 10% 10%;
   box-sizing: content-box; // 補上這裡是因為有些環境預設不是標準盒模型
 }
 .divider{
   border-top: 1px solid lightblue;
   text-align: center;
 }
 .text{
   background: yellow;
 }

 

 

在標準盒模型下,width: 100%; padding: 10% 10%; 會導致內部元素溢出,如果遇到這種情況,一般都會使用怪異盒模型,即設置box-sizing: border-box,這時候width的值是會包含padding的距離的。你可以自己打開控制台試試,這裡就不舉例了。

top、left、right、bottom 百分比

還是看圖說話

 <div class="container">
   <div class="inner"></div>
 </div>
 ​
 .container{
   width: 500px;
   height: 300px;
   border: 1px solid grey;
   position: relative;
 }
 ​
 .inner{
   width: 200px;
   height: 100px;
   background: lightblue;
   top:10%;
   left: 10%;
   position: absolute;
 }

 

可以很明顯的看出,left相對於父元素寬度,top相對於父元素高度。同理可推出right相對於父元素寬度,bottom相對於父元素高度。

translate百分比

在translate 函數當中使用百分比是以該元素自身的寬高作為基準。

當子元素的width和height未知時,無法通過設置margin-left:-width/2和margin-top:-height/2來實現,這時候可以設置子元素的transform: translate(-50%,-50%)

 <div class="container">
   <div class="inner"></div>
 </div>
 .container{
   width: 500px;
   height: 300px;
   border: 1px solid grey;
   position: relative;
 }
 ​
 .inner{
   width: 50%;
   height: 50%;
   background: lightblue;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
 }

 

translate 屬性和絕對定位、相對定位屬性加上 top、left 數值都可以使元素產生位移,但存在細微差別,表現在offsetLeft 和 offsetTop 屬性。

使用絕對定位、相對定位屬性加上 top、left ,會影響offsetTop和 offsetLeft 的值;

使用 translate 的offsetTop和 offsetLeft 與沒有產生位移的元素沒有區別,即無論translate 的值為多少,offsetTop和 offsetLeft 的值都是固定不變的。

margin為負值

  1. margin-left,margin-right為負值

  • 元素本身沒有寬度,會增加元素寬度

 <div class="container">
   <div class="inner">裡層的元素設置了margin-right:-100px</div>
 </div>
 .container{
   width: 500px;
   height: 200px;
   border: 1px solid grey;
   margin-left: 100px;
 }
 ​
 .inner{
   height: 100px;
   background: lightblue;
   margin-left: -100px;
 }

 

裡層的元素設置了margin-left:-100px

  • 元素本身有寬度,會產生位移 補充inner元素寬度屬性

 .inner{
   height: 100px;
   background: lightblue;
   margin-left: -100px;
   width: 100%;
 }

 

裡層的元素設置了margin-left:-100px

  1. margin-top為負值,不管是否設置高度,都不會增加高度,而是會產生向上的位移

 .inner{
   height: 100px;
   background: lightblue;
   margin-left: -100px;
   width: 100%;
 }

 

裡層的元素設置了margin-top:-100px

  1. margin-bottom為負值的時候不會位移,而是會減少自身供css讀取的高度.

 <div class="container">
   <div class="inner">裡層的元素設置了margin-bottom:-100px</div>
   <div>這裡是下一個元素</div>
 </div>
 ​
 .inner{
   height: 150px; // 此處height變為150px
   background: lightblue;
   margin-bottom: -100px;
   width: 100%;
 }

 

裡層的元素設置了margin-bottom:-100px

這裡是下一個元素

那麼,你覺得負值改為負百分比又是什麼情況呢?歡迎留言

## padding 為負值

很遺憾,padding不允許指定為負,指定了也無效~

 

更多優質文章請關註我的知乎:打造小白進階web前端高級工程師資料庫,看完學的更加快,知識更牢固。你值得擁有(持續更新)~

 


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

-Advertisement-
Play Games
更多相關文章
  • 前言 eCharts作為國內優秀的開源圖表工具,功能強大,但是使用中也存在一定的問題。 文檔更新較慢,文檔說明不詳細。 前端使用的弱類型語言,數據結構在靈活的同時,也容易造成一些問題。例如某些屬性到底應該放入怎麼樣的數據才是正確的(文檔也沒有提到)。 大小寫敏感,配置不但拼寫要正確,大小寫也不能錯 ...
  • 我是風箏,公眾號「古時的風箏」。 文章會收錄在 JavaNewBee 中,更有 Java 後端知識圖譜,從小白到大牛要走的路都在裡面。 沒別的意思,今天就是為了給你推薦幾款 MySQL 客戶端,這幾款客戶端有一個共通點,那就是好用而且免費。 “害,我看也就是平平無奇嘛!” 然後,轉身趕緊下載體驗一下 ...
  • 本文更新於2019-09-22,使用MySQL 5.7,操作系統為Deepin 15.4。 鎖 鎖概述 MyISAM和MEMORY存儲引擎使用表級鎖。BDB存儲引擎進使用頁級鎖,但也支持表級鎖。InnoDB存儲引擎預設使用行級鎖,也支持表級鎖。 表級鎖:開銷小,加鎖快;不會出現死鎖;鎖定粒度大,發生 ...
  • 腳本文件是utf-8,mysql資料庫utf-8; 運行mysql文件,在navicat打開,中文註釋亂碼 解決方法如下: 5.5和5.6版本修複中文亂碼後,運行mysql刪除腳本,資料庫存在遺漏的數據表 (遺漏數據表中存在主外鍵關係) 1.查詢資料庫的編碼格式 show variables lik ...
  • 教程 Flutter 和桌面應用的最新進展 譯】Flutter vs React Native vs Native:深度性能比較 Flutter 中的圖文混排與原理解析 告別 Flutter Channel,調用 Native API 僅需一行代碼! Flutter 核心原理與混合開發模式 我們用 ...
  • AJAX Asynchronous Javascript And XML"(非同步 JavaScript 和 XML),是指一種創建互動式網頁應用的網頁開發技術。通過在後臺與伺服器進行少量數據交換,Ajax 可以使網頁實現非同步更新。意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。傳統的 ...
  • ​互聯網的高速發展促使互聯網企業對於網站等頁面的用戶體驗要求也越來越高,導致網站開發難度越來越大,於是一個新興職業應運而生——web前端工程師。因為互聯網時代的高速發展,公司企業的迫切需求web前端工程師,web人才成為各大公司名企爭搶的“香餑餑”。 ...
  • 簡介 http-server是一個簡單的零配置命令行http伺服器。 它足夠強大,足以用於生產用途,但它既簡單又易於破解,可用於測試,本地開發和學習 應用場景 1、區域網訪問靜態頁面 訪問本地電腦中的文件都是基於file協議,如果要開放我們的本地文件給區域網人員訪問,是不能使用file協議。得用h ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...