一種新的布局方式

2021-08-03 22:18:22 字數 1326 閱讀 5724

通過王老師的講解,讓我認識到了自己的不足,也學到了一種新的布局方式(主要是宋老師「恐嚇」我們,說如果我們去面試,面試官如果要我們使用這種方式,我們怎麼辦,怎麼解決,我才想深入了解下的),王老師提出了兩個問題,她自己也為我們解答了,現在需要我們自己去總結,化為自己的知識。

第乙個問題:為什麼會兩個內聯標籤之間會出現空格

我是誰    我來自什麼

上面這段**,先定義了乙個大div(maxbox),然後在定義了兩個左右的div,分別是left、right,再把塊集標籤div轉換為內聯標籤。這樣兩個div就會出現在一行裡面了。

上面**執行結果:

很明顯,我們能看出來中間有一條空隙,這條空隙出現的原因是我們換行了,就會產生空格。那麼我們怎麼把這個空隙消掉呢?下面提供了三種方法。

1.以為那條空隙是換行出現的,那麼我們就不換行。把right的div放在left的div後面讓他們連線起來。這樣就不會產生空隙了。

2.把font-size設定為0.因為換行也是乙個字元,而這個空隙又是因為換行產生的,所以就把字元大小設定為0.這樣也不會產生空隙。

3.對left新增乙個margin-right屬性的值,令margin-right:-5px;。這樣我們也能實現兩個div無縫連線。

這樣我們就完成了第乙個問題。

第二個問題:當right有多個p時,他們兩個會對不齊

會出現這種效果。那麼他是怎麼出現的,我們該怎麼解決。

出現的原因是x基線的問題,基線對齊方式是他進行內容的底端對齊,就是「我是誰「」和第三個「我來自什麼」的底端對齊,所以會出現這種情況。解決的方案呢?既然是x基線的對齊方式有問題,那麼我們可以更改對齊方式。首先找到vertical-align,把他的值設定為top,這樣他就會上邊框對齊。我們把這個屬性值寫在共同的裡面,以為兩個的對齊方式要一樣。

最後的結果:

嘗試一種新的帶人方式

嘗試一種新的帶人方式 最早帶人時,沒有什麼經驗,我總是覺得他們做事太慢。慢得讓我受不了時,乾脆幫他們把 和文件都寫了。一般情況下,也勉強能趕上進度。但這占去了我大部分業餘時間,搞我很累,他們似乎也不領情。我也知道這不是辦法,他們成長很慢,我也只能乾著急。軟體中的 bug很多,這也在意料之中,這樣差的...

一種新的乘法

做厭了乘法計算題的卡特,有一天突發奇想,創造了一種新的乘法運算法則。在這套法則裡,x y等於乙個取自x 乙個取自y的所有數字對的乘積的和。比方說,123 45等於1 4 1 5 2 4 2 5 3 4 3 5 54。對於2個給定的數x y 1 x,y 長整型最大數 你的任務是,用新的乘法法則計算x ...

雙飛燕布局的一種實現方式

使用絕對定位將兩側元素放到左邊和右邊,中間元素寬度設為100 父元素設定padding,使中間元素能完全展示。這時父元素寬度變寬了 加上了padding 為父元素設定box sizing border box 即可 lang zh charset utf 8 title section sectio...