CSS讓子容器超出父元素(子容器懸浮在父容器效果)_CSS教程_CSS_網頁制作

來源:腳本之家  責任編輯:小易  

用js實現一個寬度自適應,高度隨著寬度變化而變化的矩形,相信大家肯定都會。無非是js獲取一下元素寬度,然后再計算出相應比例的高度,然后賦給元素,但如果要求只用CSS實現呢。html代碼如下,div>contentcss代碼如下,復制代碼container{background-color:silver;width:100%;position:relative;display:inline-block;}dummy{margin-top:100%;}content{position:absolute;left:0;right:0;top:0;bottom:0;}有什么問題你可以去《5 1r gb》看看里面的論壇接下來分析一下,究竟是如何實現的。首先容器container塊內包含了兩個div,一個是dummy,這個純粹是為了實現縮放效果加的,另一個content里面放的是我們真正想要展現的內容。其實原理也很簡單,大家都知道div是塊元素,它默認就是占一行,寬度本來就是自適應的,所以我們需要做的是讓它的高度能隨寬度改變。在不使用js的前提下,靠的就是前面提到的dummy那個塊來實現,dummy只設置了一個css屬性,margin-top:100%,相信大家都反應過來了。因為容器寬度已經在那兒了,通過dummy塊的margin-top來把整個的高度撐得和寬度一樣,當容器寬度改變時,dummy的位置也會改變,進而容器高度就跟著發生了變化!秇ttp://v.youku.com/v_show/id_XMTMzMjg3MTU3Ng==.html?f=26081534但是,還是會有個問題—外部容器發生了高度塌陷。而”高度塌陷“這個詞大家肯定都不是第一次聽到,大家肯定都處理過因為子元素浮動導致父元素高度塌陷,所以這里采用的方法也是類似清除浮動的方法,設置父元素display:inline-block或overflow:hidden。這里說個題外話,不知道大家在使用這兩種方法清除浮動的時候有沒有過疑問,為什么給父元素這樣設置之后就能把父元素高度撐起來呢,準確的原理解釋起來有點復雜?梢院唵蔚睦斫鉃,當子元素脫離文檔流時,父元素不知道子元素的存在,所以導致高度塌陷。當設置父元素為display:inline-block或者overflow:hidden時,迫使父元素去檢查自己內部有哪些子元素,而這時候就發現了之前absolute定位的子元素,所以高度就撐開了。這里給dummy塊設置margin-top:100%,出來的是個可自適應縮放的正方形,如果需要長方形只需要更改此值即可,比如需要4:3的長方形,則應設為margin-top:75%www.anxorj.tw防采集請勿采集本網。

前言

有時候,我們需要如下圖這樣一個懸浮效果需求:

根據CSS的盒模型概念,頁面中的每個元素,都是一個矩形的盒子。這些盒子的大小、位置和行為都可以用CSS來控制。對于行為,我的意思是當盒子內外的內容改變的時候,它如何處理。比如,如果你沒有

實現

在標準的正常的情況下,只能使用 絕對定位 來完成。

用容器這一詞會更容易形象理解它們的存在與用途,行內元素相當一個小容器,而相當于一個大容器,大容器當然可以放一個小容器了。就是小容器,這樣一說你也許會在腦海中有一個初步的印象了吧,如果我們想在

第一步:父容器定位設置為 relative(相對定位)。

您好,是元素 浮動后 縱向排列 可以將父級盒子的寬度減少到只容得下一個子元素的寬度。

第二步:子容器定位設置為 absolute(絕對定位)。

<div id="a"> <div id="b">我要浮出去!</div></div>

沒有、如果年滿18周歲,有完全行為能力的人就是一個獨立的成年人,對于自己所做的任何事情都應該承擔相應的法律責任。父親無需承擔欠款責任。若是限制民事行為能力的人。由其法定代理人代理實施

#a{ width:400px; height:100px; background:rgb(0, 0, 0); position:relative;/*父元素>相對定位*/}#b{ width: 150px; height:50px; background:rgb(185, 155, 255); position:absolute;/*子元素>絕對定位*/ top:-30px;/*控制浮出*/ /* left:XX; */}

效果圖:

父元素設置 絕對定位 ,子元素設置 相對定位 ,即子元素依照父元素進行定位。

注意:只有子元素會脫離文檔流,父元素是相對定位并不會脫離文檔流,所以不會造成頁面錯位。

到此這篇關于CSS讓子容器超出父元素(子容器懸浮在父容器效果)的文章就介紹到這了,更多相關CSS子容器超出父元素內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!

div.a{float:left;border:1px solid red;padding:5px;}div.a1{float:right;width:200px;height:50px;border:1px dotted black;}div.a2{float:right;width:100px;height:50px;border:1px dotted green;}這樣?內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • css使用flexbox布局容器內多元素水平居中
  • css浮動元素外層容器高度為0(無高度)的解決方法
  • css常見的讓元素水平居中顯示的方法
  • 清除網頁浮動css的做法
  • css教程:徹底弄懂閉合浮動元素
  • 請問:在css+div中,父容器寬度自適應,里面的子容器居右顯示(向右浮動),怎么實現?謝謝!
  • css3 容器寬高之間的比例怎么寫
  • 怎么用css代碼實現子元素在父元素水平居中,比如p在div里
  • 在CSS中居中的代碼是什么
  • CSS中overflow的用法是什么?
  • 淺談CSS塊級元素與行內元素的區別和聯系
  • 一個CSS的問題,如何讓容器內元素縱向浮動排列
  • 父與子的內容簡介
  • 中國法律有子債父還一說嗎
  • 曾子曰:若夫慈愛、恭敬、安親、揚名、則聞命矣。敢問子從父之令,可謂孝乎是什么意思
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程css子容器超出父元素css使用flexbox布局容器內多元素水平居中css浮動元素外層容器高度為0(無高度)的解決方法css常見的讓元素水平居中顯示的方法清除網頁浮動css的做法css教程:徹底弄懂閉合浮動元素css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字css讓子容器超出父元素(子容器懸浮在父容器效果)奇妙的 css 屬性 mask詳解使用css cross-fade()實現背景圖像半透明效果的示例代如何使用html+css實現tg-vision 主頁制作解決css樣式沖突的幾個辦法(小結)css 中使用徑向漸變實現卡券效果css3里box-shadow屬性的使用方法示例詳解css垂直居中的另類實現代碼詳解(不走尋常路)css viewport 單位 實現快速布局css布局兩個button在同父標簽中左右兩側分布的方法
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载