前言

看了我上篇文章的人可能覺得我小題大做，css2有什么好看的？那么我就參考《css世界》這本書，與大家一同復(fù)習(xí)理解下具體的點(diǎn)，對我們代碼的影響。

首先，我們需要清楚width默認(rèn)值就是auto，所以不用去人為寫代碼控制其寬度自動哦。

常見的4種寬度表現(xiàn)

充分利用可用空間

默認(rèn)塊元素都是100%父元素寬度，這點(diǎn)大家都知道，但很多人會針對塊元素寫多余的寬度為100%。

收縮與包裹

常見的是浮動，行內(nèi)塊元素，絕對定位。我們稱這種特性為包裹性。

收縮到最小

這個(gè)最容易出現(xiàn)在table-layout為auto表格中，我們不控制表格單元格寬高的時(shí)候，當(dāng)每一列都放不下的時(shí)候，會把文字截?cái)?，然而手機(jī)號，英文單詞，數(shù)字等不能斷，就可能會導(dǎo)致某些只是文字的列，每個(gè)字都換行顯示，稱min-content。

超出容器寬度

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

1. 內(nèi)容出現(xiàn)了英文或者數(shù)字，不換行顯示
2. 設(shè)置了樣式white-space:nowrap，不換行。

針對上面兩個(gè)問題，可以分別做如下糾正。

1. word-break:break-all
2. white-space:normal

其他特性

外部尺寸與流體特性

正常流寬度

塊元素默認(rèn)有流體特性，繼承父元素寬度，不會超出父元素寬度。然而有些人還是這樣寫代碼：

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

又或者這樣的代碼，你給導(dǎo)航中的a標(biāo)簽設(shè)置間距寬度什么的，其實(shí)標(biāo)簽變?yōu)閴K級之后，會自動根據(jù)計(jì)算拿到屬于自己的寬度，多此一舉。

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

格式化寬度

格式化寬度指出現(xiàn)在絕對定位模型中，包括絕對定位以及固定位置，只是兩者參考點(diǎn)不同而已。默認(rèn)情況下其特性為包括性，由內(nèi)容寬度決定盒子寬度，但是當(dāng)（非替換元素）left/right同時(shí)設(shè)置的時(shí)候，其寬度為相對于最近的定位特性不是static的祖先元素計(jì)算。其寬度會是父元素寬度-left-right,而其他特性仍然不變。這點(diǎn)在我們實(shí)際的布局中有很大的用途，比如我分享的css實(shí)用技術(shù)中的變寬與固寬結(jié)合的布局。

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

內(nèi)部尺寸與流體特性

包裹性

包括性是指當(dāng)元素為非塊元素的時(shí)候，其寬度由內(nèi)容決定，自己只負(fù)責(zé)根據(jù)需要擴(kuò)大，而由于外部肯定是塊元素，所以又不會超出容器特性。

實(shí)際作用有可以不用腳本實(shí)現(xiàn)文字較少水平居中，文字較多，靠左顯示。

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

首選最小寬度

這個(gè)簡單的理解就是元素的實(shí)際寬度取決于內(nèi)容的最小單元，這個(gè)優(yōu)先級比width:0高。比如你設(shè)置了寬度是0，但是內(nèi)容有一個(gè)漢字，就會有一個(gè)漢字的大??；為一個(gè)單詞就會顯示一個(gè)單詞的大小。

這種實(shí)際的用途可以做各種簡單的圖形，比如凹凸形狀的，然后內(nèi)容設(shè)置為白色就可以。

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

最大寬度

最大寬度就是元素可以有的最大寬度，一般情況下我們用于限制文字或者內(nèi)容特別多的情況。這樣的實(shí)際場景并不多。

在這里我們只延伸兩種滾動效果，一種是原生的頁面或者dom滾動，另一種就是iscroll那樣的設(shè)置內(nèi)部元素與容器的位置關(guān)系來展現(xiàn)，效果更好。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論