您現在的位置是:電腦技術吧?>? 編程技術 ??>??語法應用,什么是語法??>??正文詳情

語法應用,什么是語法

奕天佑2019-11-06 16:51:27 人圍觀
簡介語法app關于[CSS教程],下面電腦高手網編輯摘錄了對CSS定位語法應用知識的詳細了解,希望能給正在學習CSS知識的朋友們一些幫助或建議1CSS定位:position語語法怎么學

關于【css教程】,下面電腦高手網小編給大家摘錄一篇詳解CSS的定位語法應用知識,希望可以給正在學習CSS知識的朋友一些幫助或建議。

  一、CSS定位:position  語法:  position : static | absolute | fixed | relative  取值:  static :默認值。

無特殊定位,對象遵循HTML定位規則。

  absolute :將對象從文檔流中拖出,使用 left , right , top , bottom 等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。

如果不存在這樣的父對象,則依據 body 對象。

而其層疊通過 z-index 屬性定義。

  fixed :未支持。

對象定位遵從絕對(absolute)方式。

但是要遵守一些規范。

  relative :對象不可層疊,但將依據 left , right , top , bottom 等屬性在正常文檔流中偏移位置。

  說明:檢索對象的定位方式。

  設置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內容的布局。

假如其他具有不同 z-index 屬性的對象已經占據了給定的位置,他們之間不會相互影響,而會在同一位置層疊。

此時對象不具有外補丁( margin ),但仍有內補丁( padding )和邊框( border )。

  要激活對象的絕對(absolute)定位,必須指定 left , right , top , bottom 屬性中的至少一個,并且設置此屬性值為 absolute 。

否則上述屬性會使用他們的默認值 auto ,這將導致對象遵從正常的HTML布局規則,在前一個對象之后立即被呈遞。

  設置此屬性值為 relative 會保持對象在正常的HTML流中,但是它的位置可以根據它的前一個對象進行偏移。

在相對(relative)定位對象之后的文本或對象占有他們自己的空間而不會覆蓋被定位對象的自然空間。

與此不同的,在絕對(absolute)定位對象之后的文本或對象在被定位對象被拖離正常文檔流之前會占有它的自然空間。

放置絕對(absolute)定位對象在可視區域之外會導致滾動條出現。

而放置相對(relative)定位對象在可視區域之外,滾動條不會出現。

  內容的尺寸會根據布局確定對象的尺寸。

例如,設置一個 div 對象的 height 和 position 屬性,則 div 對象的內容將決定它的寬度( width )。

  此屬性對于 currentStyle 對象而言是只讀的。

對于其他對象而言是可讀寫的。

對應的腳本特性為 position 。

  示例:  div { position:relative; top:-3px }  二、CSS定位:Z-index  語法:  z-index : auto | number  取值:  auto :默認值。

遵從其父對象的定位  number :無單位的整數值。

可為負數  說明:  檢索或設置對象的層疊順序。

  較大 number 值的對象會覆蓋在較小 number 值的對象之上。

如兩個絕對定位對象的此屬性具有同樣的 number 值,那么將依據它們在HTML文檔中聲明的順序層疊。

對于未指定此屬性的絕對定位對象,此屬性的 number 值為正數的對象會在其之上,而 number 值為負數的對象在其之下。

設置參數為 null 可以移除此屬性。

  此屬性僅僅作用于 position 屬性值為 relative 或 absolute 的對象。

這個屬性不會作用于窗口控件,如 select 對象。

在IE5.5 中, iframe 對象開始支持此屬性。

而在之前的瀏覽器版本中, iframe 對象是窗口控件,會忽略此屬性。

此屬性對于 currentStyle 對象而言是只讀的。

對于其他對象而言是可讀寫的。

對應的腳本特性為 zIndex 。

  示例:  div { position:absolute; z-index:3; width:6px; }  三、CSS定位:top  語法:  top : auto | length  取值:  auto :默認值。

無特殊定位,根據HTML定位規則在文檔流中分配。

  length :由浮點數字和單位標識符組成的長度值 | 百分數。

必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。

  說明:  檢索或設置對象與其最近一個具有定位設置的父對象頂邊相關的位置。

  此屬性僅僅在對象的定位( position )屬性被設置時可用。

否則,此屬性設置會被忽略。

此屬性對于 currentStyle 對象而言是只讀的。

對于其他對象而言是可讀寫的。

對應的腳本特性為 top 。

其值為一字符串,所以不可用于腳本(Scripts)中的計算。

請使用 style 對象的 posTop , pixelTop 等運行時特性,以及對象的offsetTop 等特性。

  示例:

  四、CSS定位:right  語法:  right : auto | length  取值:  auto :默認值。

無特殊定位,根據HTML定位規則在文檔流中分配。

  length :由浮點數字和單位標識符組成的長度值 | 百分數。

必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。

  說明:  檢索或設置對象與其最近一個具有定位設置的父對象右邊相關的位置。

  此屬性僅僅在對象的定位( position )屬性被設置時可用。

否則,此屬性設置會被忽略。

此屬性對于 currentStyle 對象而言是只讀的。

對于其他對象而言是可讀寫的。

對應的腳本特性為 right 。

其值為一字符串,所以不可用于腳本(Scripts)中的計算。

請使用 style 對象的 posRight , pixelRight 等運行時特性。

  示例:

  五、CSS定位:bottom  語法:  bottom : auto | length  取值:  auto :默認值。

無特殊定位,根據HTML定位規則在文檔流中分配。

  length :由浮點數字和單位標識符組成的長度值 | 百分數。

必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。

  說明:  檢索或設置對象與其最近一個具有定位設置的父對象底邊相關的位置。

此屬性僅僅在對象的定位( position )屬性被設置時可用。

否則,此屬性設置會被忽略。

此屬性對于 currentStyle 對象而言是只讀的。

對于其他對象而言是可讀寫的。

對應的腳本特性為 bottom 。

其值為一字符串,所以不可用于腳本(Scripts)中的計算。

請使用 style 對象的 posBottom , pixelBottom 等運行時特性。

  示例:

  六、CSS定位:left  語法:  left : auto | length  取值:  auto :默認值。

無特殊定位,根據HTML定位規則在文檔流中分配。

  length :由浮點數字和單位標識符組成的長度值 | 百分數。

必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。

  說明:  檢索或設置對象與其最近一個具有定位設置的父對象左邊相關的位置。

  此屬性僅僅在對象的定位( position )屬性被設置時可用。

否則,此屬性設置會被忽略。

此屬性對于 currentStyle 對象而言是只讀的。

對于其他對象而言是可讀寫的。

對應的腳本特性為 left 。

其值為一字符串,所以不可用于腳本(Scripts)中的計算。

請使用 style 對象的 posLeft , pixelLeft 等運行時特性,以及對象的offsetLeft 等特性。

  示例:

注:更多精彩文章請關注電腦高手網頁設計教程欄目。

版權聲明:本文由 奕天佑 整理編輯。

原標題:語法,語法有哪些

轉載注明出處:http://www.dn9ww09s.icu/program/11362.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 現在電腦殺毒軟件最好,電腦殺毒軟件排名

    現在電腦殺毒軟件最好,電腦殺毒軟件排名 相關圖片筆記本電腦殺毒軟件排行長期以來,殺毒軟件給人的印象是它是計算機資源的大用戶,這往往會減慢我們計算機的速度過去,大多數計算機的內存都不超過2G這種現象確實存在,但現在你...

  • 電腦配置參數怎么看,電腦配置怎么看

    電腦配置參數怎么看,電腦配置怎么看 相關圖片電腦配置怎么看怎么選本機配有通用CPU、顯卡、主板、存儲器、硬盤、顯示器等。一般來說,臺式機對計算機配置有較高的要求我相信很多男孩在玩游戲的時候也很在乎配置你對你的電...

  • 怎么樣能寫出漂亮的字,如何寫出一手漂亮的字

    怎么樣能寫出漂亮的字,如何寫出一手漂亮的字 相關圖片寫字漂亮的技巧博客的全名應該是網絡日志,中文意思是網絡日志后來簡稱blog,blogger就是寫blog的人從理解的角度來看,博客是一種按時間順序表達個人思想、網絡鏈接和內容怎么樣才...

  • IP地址修改,怎么更改IP地址

    IP地址修改,怎么更改IP地址 相關圖片ip地址修改在哪里我相信有些電腦用戶沒有網絡在網絡故障或其他情況下,可能是由于IP地址引起的,所以有必要修改IP地址,而如何修改計算機的IP地址呢但我不認識很多用戶現在,讓我...

  • 如何設置桌面背景,設置桌面背景

    如何設置桌面背景,設置桌面背景 相關圖片桌面設置從Windows3開始系統提供桌面背景設置功能我們可以將自己喜歡的圖片以桌面為背景進行展示,從而美化用戶的工作環境,受到廣大用戶的歡迎但是在舊版本的window桌面主題怎么設...

  • 局域網共享軟件哪個好,好用的局域網共享軟件

    局域網共享軟件哪個好,好用的局域網共享軟件 相關圖片文件共享軟件在網絡時代,資源共享是一個非常重要的概念在同事之間分享必要的信息可以有效地提高工作效率在朋友之間,共享經典的、好的資源,可以避免朋友頻繁請求轉移文件的...

  • 制作talkbox,box音樂制作

    制作talkbox,box音樂制作 相關圖片b-box這里是一個CSS教程的摘錄,它讓一個盒子向各個方向擴展,希望能給那些正在學習HTML中CSS制作的朋友一些幫助或建議,如果不指定某個寬度,塊級元素本身就會垂直擴無聊的盒子u...

  • 組裝一臺電腦配置清單,組裝辦公電腦配置單

    組裝一臺電腦配置清單,組裝辦公電腦配置單 相關圖片自己組裝游戲電腦配置計算機的選擇對人們來說是一件非常麻煩和辛苦的事情目前市場上的電腦種類很多,但與同等價格相比,臺式機的性能和功能要比筆記本電腦好得多但最好的電腦...

  • 產品經理如何帶新人,產品經理怎么樣

    產品經理如何帶新人,產品經理怎么樣 相關圖片產品經理新人簡歷智者能從別人的錯誤中吸取教訓這一次,我邀請了7位進入職場不久的產品經理和交互設計師,分享他們踩到的坑如果你不多說,那要看你從象牙塔進入職場時有多聰明...

  • 技嘉主板bios重裝系統步驟,技嘉bios裝系統教程

    技嘉主板bios重裝系統步驟,技嘉bios裝系統教程 相關圖片技嘉bios重裝系統GB主板重裝系統教程是什么今天有網友問我如何使用千兆主板U盤重裝系統現在都是流行的U盤重裝系統U盤使用方便使用電腦主板可以支持USB啟動現在我來給大家講講千兆...

熱評文章

  • inventor2014序列號和密鑰,cad2010序列號和密鑰

    inventor2014序列號和密鑰,cad2010序列號和密鑰 相關圖片cad14序列號和密鑰AutoCAD是一個用于二維繪圖、詳圖、設計文件和基礎三維設計的軟件現在它已經成為世界上廣泛流行的繪圖工具不過,正版的使用需要付費,這樣才能充分發揮用戶的使...

  • 文本輸入框,html文本輸入框

    文本輸入框,html文本輸入框 相關圖片文本輸入的方法有關于[CSS教程],下面的電腦高手網編輯摘錄了一個CSS文本輸入框來添加背景圖片教程,希望能給正在學習CSS知識的朋友一些幫助或建議標題添加背景到文本輸入框-whtm...

  • word如何刪除頁眉橫線,word2010頁眉橫線怎么刪除

    word如何刪除頁眉橫線,word2010頁眉橫線怎么刪除 相關圖片word橫線怎么刪除經常遇到開始設置標題,后來覺得沒必要,刪除了內容,但標題那橫線走不掉這讓很多用戶感到不安小問題影響美如何刪除這條水平線現在,編輯帶word來刪除標題行wo...

  • 聯想筆記本怎么切換數字鍵盤,手提電腦數字鍵盤切換

    聯想筆記本怎么切換數字鍵盤,手提電腦數字鍵盤切換 相關圖片聯想筆記本小鍵盤切換隨著網絡的發展,筆記本的使用越來越廣泛它已成為工作和學習中不可缺少的必需品正因為如此,市場上的筆記本品牌越來越多在大學校園中,筆記本電腦的使用...

  • css樣式表的四種類型,三種css樣式表

    css樣式表的四種類型,三種css樣式表 相關圖片css四種樣式現在讓我們通過[介紹CSS]HTML來簡要介紹使用CSS樣式表的四種方法,希望能給您一些幫助或建議方法1:css1.htmlhtmlheadtitle內聯樣式(css樣式表規則...

  • usb連接電腦上網,怎么用usb連接電腦上網

    usb連接電腦上網,怎么用usb連接電腦上網 相關圖片電腦連接不上網絡我們現在上網越來越方便了移動和聯通的無線網絡已經覆蓋了許多領域但是當我們的電腦沒有網絡時,我們能用手機的流量來上網嗎答案是肯定的現在,小編會告訴你...

  • 加快下載速度,如何加快下載速度

    加快下載速度,如何加快下載速度 相關圖片怎么讓手機下載速度變快關于[Dreamweaver skills],以下是Dreamweaver加快圖片下載速度的方法摘要,希望能給正在學習CSS的朋友一些幫助或建議如果網頁中圖片太逗游下載速度怎么加快...

  • 電腦沒聲音了怎么解決,電腦沒聲音一鍵恢復

    電腦沒聲音了怎么解決,電腦沒聲音一鍵恢復 相關圖片電腦靜音了怎么恢復聲音我們的大多數朋友都非常熟悉電腦的操作而一些用戶在使用電腦時會遇到電腦突然沒有聲音,聽不到音樂,不知道視頻中的人在說什么,也不能和別人的視頻聊...

  • 網頁固定背景代碼,網頁背景透明代碼

    網頁固定背景代碼,網頁背景透明代碼 相關圖片html設置網頁背景圖片代碼網頁背景漸變是一種常用的效果下面使用的過濾器,當然在非ie中沒有效果。下面的電腦主機網小編分享一個CSS實現的頁面背景漸變效果代碼介紹,希望能給大...

  • 手機用什么殺毒軟件比較好,手機殺毒軟件

    手機用什么殺毒軟件比較好,手機殺毒軟件 相關圖片360手機殺毒軟件手機殺毒軟件不僅可以保護手機的安全,還可以保護個人隱私那么哪個是最好的移動防病毒軟件呢現在有很多種移動殺毒軟件對于移動安全來說,如何選擇一款正確且易...

關注微信

变脸官网查询