HTML css 頁面按比例排版

2021-07-13 10:55:30 字數 702 閱讀 4161

在上面說的這樣的情況下,如果要定位排版,就應該使用position:relative

先說說relative,它是根據原位置進行定位的。那麼原位置是什麼呢?還用剛才的例子,乙個div大小是width:100%,height:30%; 另乙個divwidth:100%,height:40%;那麼正常來看,在這個頁面就是上面的乙個方塊從左上角開始,寬度全屏(之後不再說寬度了),高是瀏覽器寬度的30%,下面乙個寬度是40%。

這時,如果給第乙個div設定position:relative;top:10%;那麼第乙個div占用的空間就是瀏覽器上10%-40%的高度,第二個呢?

注意第二個div還是在30%-70%的位置,並不會被第乙個div的移動擠到下面去。 所以,如果當我希望這個頁面上面空10%,然後放第乙個div ,再空10%,放第二個div,最下面再空10%時,第乙個div top:10%,第二個div top:20%,這個20%,是相對於最初始自己的位置來移動的,10%用於隨著第乙個div的移動,另10%用來空出空間來。

left和top的原理是一樣的,都是根據當前元素自身的本身的位置進行移動。

這個relative的神奇之處就在於,對於第二個div來說,第乙個div用top改變了位置,但是它彷彿還在原來的位置,那個空間沒有動,第二個div還是緊挨著那個位置擺放

HTML CSS之段落排版

中文文字中的段前習慣空兩個文字的空白,這個特殊的樣式可以用下面 來實現 p,在head頭裡面寫上下面的 注意 2em的意思就是文字的2倍大小。text indent就是縮排的意思p 如果想在網頁排版中設定文字間隔或者字母間隔 就可以使用 letter spacing來實現 h1 如果我想設定英文單詞...

了解HTML CSS格式化排版 文字排版

這裡簡單的寫一些涉及到字型排版中常用到的屬性,大家可以學習檢視,也可以mark下以後看.font family micrsoft yahei 設定字型 font size 20px 設定字型大小 color red 設定顏色 font weight bold 文字加粗 font style ital...

android layout 按比例布局

為了建立比例大小的子view,可以將linearlayout的寬度和高度設為fill parent,而將子view的寬度或是高度設為0,然後為子view設定不同權重 weight 這樣子view的大小就會權值成比例。本例使用橫向linearlayout,linearlayout的android la...