HTML+CSS標籤的屬性及應用

來源:互聯網
上載者:User

標籤:

結構化標準語言(HTMLHTMLHTML和XMLXMLXMLXMLXMLXMLXML)

表現標準語言(CSS)C

塊級標籤:divdiv、ulul、lilili、dtdl、dldt...

行內標籤:spanspan、inputinput、imgspanimg...

行為標準語言(DOMDOM和ECMAScriptECMAScriptE)

盒子模型==網頁布局的基石

外邊距(margin)邊框(borderborder)內邊距(paddingpadding)left、left right、right、bottombottom

如果設定的是外邊距(以順時針方向設定):給44個值(上、右、下、左),給定三個值(上、左右、下),給定兩個值(上下、左右)、給定一個值(就是4個方向的外邊距是一樣的)

auto會根據瀏覽器的寬度自動地設定兩邊的外邊距width:100%;margin:0 auto;width:100%;margin:0 auto;;如果設定了自動置中還設定了floatfloatfloatfffffloat(浮動)或者position:absolute;position:absolute;當元素沒有設定寬度值,而設定了浮動屬性,元素的寬度隨內容的變化而變化。

清除浮動的方法:

1.clear屬性--常用clearclear:bothboth;clearclear:leftleft;或者clearclear:rightrightright;

2.同時設定widthwidthwidth:100%100%width(或者固定寬度)+overflow+overflow:hidden;

 

橫向兩列布局

 

主要應用技能:floatfloat屬性-----------使縱向排列的區塊層級元素,橫向排列

 

絕對位置布局:通過設定positionposition屬性實現

 

 

能夠實現橫向布局及較為複雜的定位,有三種定位形式:1.靜態定位 2.相對定位 3.絕對位置

 

可以設定4個屬性值:

 

static(靜態定位)

 

relative(相對定位):相對於自身原有位置進行位移,仍處於標準文檔流中,隨即擁有位移屬性和z-indexz-indexz屬性

 

absolute(絕對位置) :建立了以包含塊為基準的定位,完全脫離了標準文檔流,隨即擁有位移屬性和z-index屬性,當一個元素設定了絕對位置,該元素的快讀隨著內容的變化而變化。

 

無已定位祖先元素,以<html><html><><>為位移參數基準;有已定位祖先元素,以距其最近的已定位祖先元素為位移參照基準。

 

fixed(固定定位)

 

HTML+CSS標籤的屬性及應用

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.