HTML利用posotion屬性定位 小技巧

2022-02-27 23:01:25 字數 1249 閱讀 5379

1.居中效果

父級div (index-top )屬性設定為 text-align:center;

子級div( tabindex-main)屬性設定為 margin:0 auto;

2.左右對齊效果

父級div( tabindex-main)屬性設定為 position:relative

子級div(city) 跟(search)屬性為posotion:absolute

(absolute : 將物件從文件流中拖出,使用 left , right , top , bottom

等屬性相對於其最接近的乙個最有定位設定的父物件(position:relative)進行絕對定位。

如果不存在這樣的父物件,則依據 body 物件。而其層疊通過 z-index 屬性定義) 

樣式:

.index-top 

.city

.tabindex-main

.tab1

.tab2

.search

**如下:

<

div

class

="index-top"

>

<

div

class

="tabindex-main"

>

<

div

class

="city"

>廈門

div>

<

div

class

="tabindex"

>

<

span

class

="tab1"

>問題

span

><

span

class

="tab2"

>答主

span

>

div>

<

div

class

="search"

><

div>

div>

div>

HTML學習筆記(二) HTML5常用元素與屬性

1.插入乙個換行,定義水平線 個人對這兩個標籤經常混淆。2.div與span的區別 div是塊級元素,前後都引入了行分割,span是行內元素 也叫內嵌元素 span預設不會換行。塊元素和行內元素也不是一成不變的,通過定義css的display屬性值可以互相轉化 與以上兩個 元素效果類似的還有標籤,而...

HTML學習筆記(三) HTML5常用元素與屬性

1.超連結 錨點 主要可以包含文字,影象,各種文字格式化元素和表單元素等內容,可指定如下三個重要屬性 1 href 指定超連結指定的另一資源,可以是絕對位址,也可以是相對位址 2 target 指定使用框架中的哪乙個框架來裝載另乙個資源,屬性值可以是 self,blank,top,parent四個值...

專用於table的html標籤和css屬性

標籤定義 的標題。標籤必須直接放置到 標籤之後。您只能對每個 定義乙個標題。caption side bottom 屬性規定 標題的位置。可以有top bottom inherit。不支援left right。如果標題要放在左側的話,不考慮ie的話,可以給table設定display flex。這樣...