深入理解和應用display屬性（二）

2022-01-26 03:43:43 字數 4548 閱讀 6945

此類元素是inline + block的合體

1) margin和padding都有效；width和height都有效；

.inline

<


div 


class


="inline"


><


a>inline01


a>


div>


<


div 


class


="inline"


><


a>inline02


a>


div>


<


div 


class


="inline"


><


a>inline03


a>


div>


<


div 


class


="inline"


><


a>inline04


a>


div>

1) 還是存在8畫素的間隔

2) block/inline-block元素包裹的inline-block元素，預設超width會換行，hieght撐開，可以通過white-space:nowrap強制不換行，但不能實現文字省略顯示。

a.overwidth

<


div 


class


="overwidth"


>


<


a>a01dd


a>


<


a>a000000002


a>


div>

繼承父元素的display屬性。

實現盒子布局，主要分為容器和子元素相種。在容器元素上用display:flex指定為flex盒子，在子元素上用flex指定元素所占用的格仔數。

flex容器重要屬性：

1) flex-direction：表示專案排列方向，可以有四個，左到右，右到左，上到下，下到上

2) flex-wrap：表示是否允許換行，預設不允許(nowrap)

flex-flow：是flex-direction和flex-wrap的組合寫法

.wrap02.grid02

<


div 


class


="wrap02"


>


<


div 


class


="grid02"


>01


div>


<


div 


class


="grid02"


>02


div>


<


div 


class


="grid02"


>03


div>


<


div 


class


="grid02 grid04 "


>04


div>


<


div 


class


="grid02"


>05


div>


div>

4) justify-content：設定專案的間隔對齊方式（x軸），注意space-between（兩端對齊，專案之間間隔一樣，頂邊）；space-around（每個專案兩側的間隔相等，所以，專案之間的間隔比專案與邊框的間隔大一倍）

.wrap02.grid02

<


div 


class


="wrap02"


>


<


div 


class


="grid02"


>01


div>


<


div 


class


="grid02"


>02


div>


<


div 


class


="grid02"


>03


div>


<


div 


class


="grid02 grid04 "


>04


div>


<


div 


class


="grid02"


>05


div>


div>

5) align-items：屬性定義在交叉軸上的對齊方式（y軸，垂直對齊），stretch可以拉申(預設值)

.wrap02.grid02

<


div 


class


="wrap02"


>


<


div 


class


="grid02"


>01


div>


<


div 


class


="grid02"


>02


div>


<


div 


class


="grid02"


>03


div>


<


div 


class


="grid02 grid04 "


>04


div>


<


div 


class


="grid02"


>05


div>


div>

flex專案的重要屬性：

1) align-self：專案自身的對齊方式，可以覆蓋容器的align-items屬性的值

2) flex：他是flow-grow\flow-shrink\flex-basis簡寫，設定元素占用的格仔數，如下例子格仔是均分的

.wrap.grid.mid

<


div 


class


="wrap"


>


<


div 


class


="grid"


>01


div>


<


div 


class


="mid"


>01


div>


<


div 


class


="grid"


>01


div>


div>

3) flex-grow：所有子元素之和小於容器寬度時，如果處理剩餘寬度，flex-grow預設為0，如果設定為正數，則表示索取剩餘寬度值，公式如下：

子元素自身寬度 + 剩餘寬度*(子元素自身glex-frow)/(所有子元素的flex-grow之後和)

.wrap.grid.mid

<


div 


class


="wrap"


>


<


div 


class


="grid"


>01


div>


<


div 


class


="mid"


>01


div>


<


div 


class


="grid"


>01


div>


div>

grid1和grid3計算：50 + 240 * 1/2 = 170

grid2計算：沒有設定flex-grow屬性，所以為固定值

4) flex-shrink：所有子元素之和大於容器寬度時，如果處理超出寬度，flex-shrink預設為1，值越大減小的越厲害，值為0，表示不減少,公式如下：

子元素自身寬度 – 超出寬度 * ( 子元素自身寬度 * 子元素自身的flex-shrink/ ( 所有子元素寬度 * 子元素的flex-shrink之和) )

.wrap.grid.mid

<


div 


class


="wrap"


>


<


div 


class


="grid"


>01


div>


<


div 


class


="mid"


>01


div>


<


div 


class


="grid"


>01


div>


div>

grid1和grid3計算：200 – 100 * 200 / 500 = 160

grid2計算：100 – 100 * 100 /500 = 80

注意事項：

1) flex-grow和flex-shrink不好和flex直接混合應用，此兩個值是在固定寬度的情況下進行均分的演算法，如果嵌入flex屬性，演算法還不明確。

深入理解和應用display屬性（二）

此類元素是inline block的合體 1 margin和padding都有效 width和height都有效 inline div class inline a inline01 a div div class inline a inline02 a div div class inline a...

深入理解Display類的使用

深入理解display類的使用 email cqucyf gmail.com 熟悉了midlet類的使用以後，下面來熟悉一下display類的使用，這個類也是進行j2me程式設計中經常要使用到的類之一。display類有兩個最主要的作用 1 獲得螢幕的屬性。例如螢幕是否是彩色的，以及支援的顏色數量等...

display和visibility的屬性

display屬性設定元素的顯示方式，對應指令碼特性為display，可選值為none block和inline，各值的說明如下 none 隱藏元素，不保留元素顯示時的空間。block塊方式顯示元素。inline 以內嵌方式顯示元素。visibility屬性設定是否顯示元素，對應的指令碼特性為vis...