深入理解和應用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...