Css深刻理解width auto的用法

2022-09-25 22:42:15 字數 1460 閱讀 9988

前言

首先,我們需要清楚width預設值就是auto,所以不用去人為寫**控制其寬度自動哦。

常見的4種寬度表現

充分利用可用空間

預設塊元素都是100%父元素寬度,這點大家都知道,但很多人會針對塊元tdnkzxtx素寫多餘的寬度為100%。

收縮與包裹

常見的是浮動,行內塊元素,絕對定位。我們稱這種特性為包裹性。

收縮到最小

這個最容易出現在table-layout為auto**中,我們不控制**單元格寬高的時候,當每一列都放不下的時候,會把文字截斷,然而手機號,英文單詞,數字等不能斷,就可能會導致某些只是文字的列,每個字都換行顯示,稱min-content。

超出容器寬度

一般元素不會超出容器顯示,除非以下兩種情況,尤其第一種是初級前端在開發中經常遇到的問題。

針對上面兩個問題,可以分別做如下糾正。

其他特性

外部尺寸與流體特性

正常流寬度

塊程式設計客棧元素預設有流體特性,繼承父元素寬度,不會超出父元素寬度。然而有些人還是這樣寫**:

a又或者這樣的**,你給導航中的a標籤設定間距寬度什麼的,其實標籤變為塊級之後,會自動根據計算拿到屬於自己的寬度,多此一舉。

.n**

.n**-a

格式化寬度

格式化寬度指出現在絕對定位模型中,包括絕對定位以及固定位置,只是兩者參考點不同而已。預設情況下其特性為包括性,由內容寬度決定盒子寬度,但是當(非替換元素)left/right同時設定的時候,其寬度為相對於最近的定位特性不是static的祖先元素計算。其寬度會是父元素寬度-left-right,而其他特性仍然不變。這點在我們實際的布局中有很大的用途,比如我分享的css實用技術中的變寬與固寬結合的布局。

.par

//子元素寬度為700px

.son

內部尺寸與流體特性

包裹性包括性是指當元素為非塊元素的時候,其寬度由內容決定,自己只負責根據需要擴大,而由於外部肯定是塊元素,所以又不會超出容器特性。

實際作用有可以不用指令碼實現文字較少水平居中,文字較多,靠左顯示。

.container

.content

首選最小寬度

這個簡單的理解就是元素的實際寬度取決於內容的最小單元,這個優先順序比width:0高。比如你設定了寬度是0,但是內容有乙個漢字,就會有乙個漢字的大小;為乙個單詞就會顯示乙個單詞的大小。

這種實際的用途可以做各種簡單的圖形,比如凹凸形狀的,然後內容設定為白色就可以。

.ao.ao:before

最大寬度

最大寬度就是元素可以有的最大寬度,一般情況下我們用於限制文字或者內容特別多的情況。這樣的實際場景並不多。

在這裡我們只延伸兩種滾動效果,一種是原生的頁面或者dom滾動,另一種就是iscroll那樣的設定內部元素與容器的位置關係來展現,效果更好。

本文標題: css深刻理解width:auto的用法

本文位址: /web/css/24474.html

深刻理解IdentityHashMap

新建pojo package test public class cat public string getname public void setname string name public integer getage public void setage integer age public...

深刻理解IdentityHashMap

新建pojo package test public class cat public string getname public void setname string name public integer getage public void setage integer age public...

JS深刻理解補充

對於函式的理解,首先看乙個函式定義 function functiondefined 顯而易見,functiondefined 為函式名字,在js中為指向這個函式體的指標,代表這個函式的指標的變數,並且和原始資料型別一樣儲存在棧中。而functiondefined函式體則儲存在堆中。每當new出乙個...