亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

帶你走進CSS定位詳解

googollee / 1892人閱讀

摘要：相對于其最近的一個定位設(shè)置的父對象進行絕對定位，可用。代碼基本語法默認值，無特殊定位。代碼相對定位相對定位生成相對定位的元素，相對于其它位置進行定位。結(jié)語結(jié)語帶你走進定位詳解，多試試，熟能生巧嘛

學(xué)習(xí)CSS相關(guān)知識，定位是其中的重點，也是難點之一，如果不了解css定位有時候都不知道怎么用，下面整理了一下關(guān)于定位屬性的具體理解和應(yīng)用方案。

一：定位

定位屬性列表

  • position
  • top
  • bottom
  • right
  • left
  • z-index

position

基本語法：

position：static | absolute | fixed | relative

語法介紹：

  1. static：默認值，無特殊定位。
  2. absoulte：相對于其最近的一個定位設(shè)置的父對象進行絕對定位，可用left,right,top,bottom。
  3. fixed：生成絕對定位的元素。
  4. relative：生成相對定位的元素，可通過left,right,top,bottom屬性設(shè)置相對于自身偏移位置。

代碼：

div { position:relative; top:-4px }

bottom

基本特殊：定位元素

基本語法：bottom：auto | length

語法

  1. auto：默認值，無特殊定位。
  2. length：長度值 | 百分比，必須定義position的屬性值為absolute或者relative才有效。

代碼：

div { position:relative; bottom:6px; }

z-index

語法：z-index：auto | number
取值：auto：默認值，number：無單位的整數(shù)值，可負數(shù)。

代碼：

div { position:absolute; z-index:5; width:6px; }

left

基本語法：left：auto | length

  1. auto：默認值，無特殊定位。
  2. length：長度值 | 百分比，必須定義position的屬性值為absolute或者relative才有效。

代碼：

div { position:relative; top:-3px; left:6px; }

top

基本語法：top：auto | length

  1. auto：默認值，無特殊定位。
  2. length：長度值 | 百分比，必須定義position的屬性值為absolute或者relative才有效。

代碼：

div { position:relative; top:-3px; left:5px;}

基本語法：right：auto | length

  1. auto：默認值，無特殊定位。
  2. length：長度值 | 百分比，必須定義position的屬性值為absolute或者relative才有效。

代碼：

div { position:relative; top:-3px; right:6px}

相對定位

relative生成相對定位的元素，相對于其它位置進行定位。

代碼：

絕對定位

絕對定位相對于它的參照物移動位置，如果沒有，默認為body為參照物。

結(jié)語

  • 帶你走進CSS定位詳解，多試試，熟能生巧嘛~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1958.html

相關(guān)文章

  • 前端修煉 の道 | 帶你走進迷人的 CSS 世界

    摘要：每條屬性聲明實現(xiàn)對網(wǎng)頁元素進行某種特定格式的設(shè)置，由一個屬性和一個值組成，屬性和值之間使用冒號連接，不同聲明之間用分號分隔，所有屬性聲明放到一對大括號中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...

    shiweifu 評論0 收藏0

  • 【進階1-4期】JavaScript深入之帶你走進內(nèi)存機制

    摘要：引擎對堆內(nèi)存中的對象進行分代管理新生代存活周期較短的對象，如臨時變量字符串等。內(nèi)存泄漏對于持續(xù)運行的服務(wù)進程，必須及時釋放不再用到的內(nèi)存。 （關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實戰(zhàn)、面試指導(dǎo)） 本周正式開始前端進階的第一期，本周的主題是調(diào)用堆棧，今天是第4天。 本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃...

    不知名網(wǎng)友 評論0 收藏0

  • 【進階1-5期】JavaScript深入之4類常見內(nèi)存泄漏及如何避免

    摘要：本期推薦文章類內(nèi)存泄漏及如何避免，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。四種常見的內(nèi)存泄漏劃重點這是個考點意外的全局變量未定義的變量會在全局對象創(chuàng)建一個新變量，如下。因為老版本的是無法檢測節(jié)點與代碼之間的循環(huán)引用，會導(dǎo)致內(nèi)存泄漏。 （關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實戰(zhàn)、面試指導(dǎo)） 本周正式開始前端進階的第一期，本周的主題...

    red_bricks 評論0 收藏0

  • 生產(chǎn)環(huán)節(jié)全流程透明可視，帶你走進森普管材“數(shù)字孿生工廠”

    摘要：目前森普管材年均生產(chǎn)能力高達萬噸以上，位居西南區(qū)域前列，已連續(xù)兩年獲得政府采購塑料管道十大品牌。數(shù)字孿生系統(tǒng)可針對設(shè)備狀態(tài)進行監(jiān)控年是森普管材數(shù)字化改造的進階之年。而這也成為了森普管材引入數(shù)字孿生系統(tǒng)的契機。如何用數(shù)字技術(shù)1:1還原生產(chǎn)環(huán)節(jié)，讓設(shè)備運行、監(jiān)控告警脫離人工經(jīng)驗，做到數(shù)據(jù)智能分析、工廠智慧生產(chǎn)？數(shù)字孿生可以給到你答案。數(shù)字孿生，也被稱為數(shù)字映射、數(shù)字鏡像。是指充分利用物理模型、傳...

    Tecode 評論0 收藏0

  • 【進階1-3期】JavaScript深入之內(nèi)存空間詳細圖解

    摘要：進階期理解中的執(zhí)行上下文和執(zhí)行棧進階期深入之執(zhí)行上下文棧和變量對象但是今天補充一個知識點某些情況下，調(diào)用堆棧中函數(shù)調(diào)用的數(shù)量超出了調(diào)用堆棧的實際大小，瀏覽器會拋出一個錯誤終止運行。 （關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實戰(zhàn)、面試指導(dǎo)） 本周正式開始前端進階的第一期，本周的主題是調(diào)用堆棧，今天是第3天。 本計劃一共28期，每期重點攻...

    coordinate35 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<