Css深刻理解width:auto的用法執行個體分享

來源:互聯網
上載者:User
本文主要介紹了Css深刻理解width:auto的用法的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望能協助到大家。

前言

看了我上篇文章的人可能覺得我小題大做,css2有什麼好看的?那麼我就參考《css世界》這本書,與大家一同複習理解下具體的點,對我們代碼的影響。

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

常見的4種寬度表現

充分利用可用空間

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

收縮與包裹

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

收縮到最小

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

超出容器寬度

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

  1. 內容出現了英文或者數字,不換行顯示

  2. 設定了樣式white-space:nowrap,不換行。

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

  1. word-break:break-all

  2. white-space:normal

其他特性

外部尺寸與流體特性

正常流寬度

塊元素預設有流體特性,繼承父元素寬度,不會超出父元素寬度。然而有些人還是這樣寫代碼:


a{display:block;width:100%;}

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


.nav{width:240px}.nav-a{display:block;width:200px;margin:0 10px;padding:9px 10px ;}

格式化寬度

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


.par{   width:1000px;   position:relative;   }   //子項目寬度為700px   .son{   position:absolute;   left:100px;   right:200px;}

內部尺寸與流體特性

包裹性

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

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


.container{text-align:center;}.content{display:inline-block;text-align:left;}

首選最小寬度

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

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


.ao{width:0;display:inline-block;}.ao:before{color:#fff;content:'love你love';outline:2px solid #000;}

最大寬度

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

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

相關推薦;

HTML裡怎麼使用margin 0 auto

html5中設定或返迴音視頻是否在載入後即開始播放的屬性autoplay

Laravel中autoload方法實現的用法詳解

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.