CSS中的auto講解

2021-07-15 08:42:39 字數 1391 閱讀 6342

首先來說一下 右對齊margin-left:auto; 左對齊margin-right:auto; 以及居中對齊margin:0 auto; 注意margin-left:auto是右對齊,而margin-right:auto;是左對齊,並不是我打錯了,它就是這樣。

這三個與margin有關的auto是用來對齊元素的,你需要記住以下幾點:

1.該元素必須是區塊(如果還不熟悉區塊和內聯的話我可以以後再介紹一下區塊和內聯的區別,這裡假設你已經了解了區塊和內聯的區別了)。

舉幾個例子 等等這些元素是區塊,單獨佔據一行,這些元素可以使用margin:0 auto; 

2.該元素需要設定寬度,如果不設定寬度,則預設寬度為width:auto;一會再解釋width:auto;的情況,你只需要記住,如果不設寬度,很多情況該區塊的寬度會與父元素的寬度一樣,這樣就無所謂左對齊右對齊或居中對齊了,因為該元素會一直佔據著整個父元素的寬度。只有當該元素的寬度小於父元素的寬度時候,才能看出左對齊,右對齊和居中對齊的效果。

然後再說一下width:auto;的情況,這個比較複雜。

首先你需要理解乙個區塊 比如,如果不給它設定width,那麼瀏覽器會自動給該區塊自動賦值為auto,當然,你也可以手動給設定為width:auto; 而設為width:auto;的div的寬度到底是多少呢,這個你需要了解盒模型的概念,建議你看書來了解一下,或者上網搜一下盒模型,因為這個需要用圖來說明,否則很難表達清楚。不過我這裡還是給你簡單介紹一下,乙個區塊設定為width:auto;之後,會根據父元素的width,該元素本身的margin,該元素本身的border,該元素本身的padding來一起決定該元素的width。 換句話說,該元素的width+padding*2+border*2+margin*2 = 父元素的width。假設你的父元素的width是200px,而當前元素本身的padding為5px,border為1px solid red,margin為10px;當前元素的width為auto,那麼瀏覽器會自動計算width,200-(5*2+1*2+10*2) = 168 為什麼都要乘以2呢,因為邊距既有左邊又有右邊,同樣border也是既有左邊又有右邊,所以需要乘以2,加入你只設定了padding-left:5px;而padding-right:0px;那麼就不需要乘以2了。

以上說明的是非浮動情況下的width:auto;如果浮動乙個width:auto的區塊,則由於該區塊脫離了文件流,所以以上的情況一律不適用,那該區塊的width將會根據區塊的內容自動擴充套件。換句話說,如果區塊內容只有hello這個單詞,那麼該區塊的width就是包括該hello單詞的寬度,你加乙個背景顏色就能看出來了。加入該區塊的內容是hello world,那麼該區塊的width則為包括hello world的寬度,當然以上所說的都是width:auto的區塊,如果乙個區塊顯示指定了width,比如width:200px;那麼不管浮動還是不浮動,該區塊的width永遠都是指定的寬度。

談一談css中的100 和auto

在web前端的程式設計過程中,利用 數值和auto來進行設定元素的寬度和高度等是很常見的,但是他們的值是怎樣計算的呢?一 100 百分比設定畫素是很常見的,也比較簡單。一般在兩個地方用的比較多 設定子元素寬高和設定 內 外 邊距。1.首先看設定寬高,先看例子 html class content d...

CSS的inherit與auto使用分析

本文 通常是乙個很小的數值,經過層層放大歪曲後,整個布局就走形了。css是一門很簡單的語言,易學易用,但也最容易出垃圾 這是沒有深入研究這門語言所致。本人認為,css是由以下三大塊構成的 預設值,繼承系統與加權系統。預設值,也就是瀏覽器在使用者沒有設定屬性的情況下,預設指定的屬性。css框架基本都有...

C 中auto的使用

auto是乙個c c 語言儲存型別,僅在語句塊內部使用,初始化可為任何表示式,其特點是當執行流程進入該語句塊的時候初始化可為任何表示式。c語言中提供了儲存說明符auto register extern static說明的四種儲存類別。四種儲存類別說明符有兩種儲存期 自動儲存期和靜態儲存期。其中aut...