摘要:當父元素設(shè)置了的,子元素為時,設(shè)置無效當父元素設(shè)置了時,子元素超出父元素部分無效只能限制的層級相當于自身進行定位,相對于邊界會影響其他元素定位,而無影響自定義拖拽效果同時存在,無效同理,無效可提高層疊級數(shù)父元素的較大排前面數(shù)值排在上,當前層
relative
1.當父元素設(shè)置了relative的zindex,子元素為absolute時,設(shè)置zindex無效
2.當父元素relative設(shè)置了overflow:hidden時,子元素absolute超出父元素部分無效
3.relative只能限制fix的zindex層級
4.Relative相當于自身進行定位,absolute相對于邊界
5.Margin會影響其他元素定位,而relative無影響(自定義拖拽效果)
6.top&&bottom同時存在,bottom無效;同理,right無效
7.relative可提高層疊級數(shù)
8.父元素的zindex較大排前面(數(shù)值)
9.Auto排在上,(當前層疊上下文的生成盒子層疊水平是0 盒子【除非是根元素】不會創(chuàng)建一個新的層疊上下文)
層疊上下文:是html元素中的一個三維概念,表示元素再z軸上有了‘可以高人一等’
層疊水平:所有元素都有決定同一層疊上下文中的元素在z軸上的顯示順序,比較兩個元素的層疊水平,必須是這兩個元素在同一個層疊上下文中,否則沒有意義。z-index可以影響 層疊水平(只是影響,不是決定)
頁面根元素天生具有層疊上下文,稱之為“根層疊上下文”
Zindex值為數(shù)值的定位元素也具有層疊上下文
(在同一個層疊上下文中的元素,對應(yīng)下面規(guī)則的序號越大,位置越高)
1.層疊上下文 background/border
2.負z-index
3.block塊級元素
4.float浮動元素
5.inline/inline-block行內(nèi)元素
6.z-index:auto或者z-index:0(不依賴z-index的層疊上下文)
7.正z-index
1通常是裝飾屬性;34是布局,5是內(nèi)容——所以行內(nèi)元素具有較高的層疊序號
背景色覆蓋是層疊順序,文字覆蓋是后來居上
1.父元素設(shè)置display:flex且子元素的zindex不為0時
2.父元素的透明度有具體數(shù)值
3.transform不等于none
4.mix-blend-mode(混合模式)不等于normal
5.filter不等于none
6.isolation:(isolate isolation是為mix-blend-mode而生的屬性;mix-blend-mode混合默認z軸所有層疊在下面的元素)
7.條件1:父級需要是flex/inline-flex
條件2:子元素z-index不為auto
(只針對chrome等blink內(nèi)核瀏覽器有效)
8.will-change:transform(will-change是提高頁面滾動、動畫等渲染性能的屬性)
9.-webkit-overflow-scrolling:touch(移動端)
定位元素層疊在普通元素之上,因為一旦成為定位元素,z-index自動生效,默認z-index:auto也可以看作z-index:0;所以會覆蓋block、inline、float元素
IE7的zindex:auto也會新建層疊上下文;元素的層疊水平主要由所在的層疊上下文決定(避免使用定位屬性,定位屬性從大容器平級分離為私有小容器)
避免一山比一山高的樣式問題(多人寫作及后期維護):對于非浮層元素,避免設(shè)置z-index值,zindex值沒有任何道理需要超過2
避免浮層組件因zindex被覆蓋的問題(組件的覆蓋規(guī)則具有動態(tài)性,意向不到的高層級元素):
Zindex負值元素再層疊上下文的背景之上,其他元素之下。
absolute:(無依賴)1.獨立的absolute可以擺脫overflow的限制,無論是滾動還是隱藏
2.絕對定位生效的時候,浮動無效
3.用了absolute之后,用display,會保留位置跟隨特性,要注意的是IE7中用了4.absolute之后,只會是inline-block水平顯示,指定包上
利用了即使給予了絕對定位屬性(前提不給予任何top/left/bottom/right值),元素會依然保持普通文檔流的視覺位置。這里說的位置是一種視覺位置,并不是文檔流位置,因為其本身高度在父元素中已經(jīng)塌陷,也就是大家平時所謂的已經(jīng)脫離文檔流),此時使用margin做平移,也就是相對于自己進行了定位,前提要將“視覺位置”規(guī)劃好,也就是按照正常的文檔流進行布局(后面的元素在右或是下側(cè))。
對齊居中或邊緣絕對定位的元素前加? 父元素text-align:center;即可使得絕對定位的元素居中
右邊側(cè)欄應(yīng)用:
星號對齊:
星號進行絕對定位
圖標對齊:
?
圖標進行無依賴絕對定位
文字溢出:
?
absolut不占據(jù)尺寸
回流與重繪:動畫盡量作用在絕對定位元素上
垂直空間的層級:后來居上
1.如果只有一個絕對定位元素,自然不需要zindex,自動覆蓋普通元素 2.如果兩個絕對定位,控制dom流的前后順序達到需要的覆蓋效果,依然無zindex 3.如果多個絕對定位交錯,非常非常少見!,zindex:1控制 4.如果非彈框類的絕對定位元素zindex>2,必定zindex冗余,需要優(yōu)化
?
Absolute絕對定位的方向是對立的(left&right top&bottom)
舉例:
Position:absolute; left:0; top:0; width:50%
等同于==》
position:absolute; left:0; top:0; right:50%;(IE7+才支持)
相互支持性:
1.容器無需固定width、height值,內(nèi)部元素亦可拉伸;
2.容器拉伸,內(nèi)部元素支持百分比width、height值
若拉伸和width&height尺寸同時存在,那么width/height尺寸大于left/top/right/bottom拉伸尺寸
因此=》position:absolute;top:0;left:0;right:0;width:50%的實際寬度是50%而不是100%(當使用margin:auto 可實現(xiàn)居中=》絕對元素的絕對居中效果 IE8+支持)
沒有寬度和高度聲明實現(xiàn)的全屏自適應(yīng)效果:
高度自適應(yīng)的九宮格效果:
高度自適應(yīng)的九宮格效果
absolute與整體布局: 1.body降級,子元素升級 (全屏拉伸效果:position:absolute;left:0;top:0;right:0;bottom:0) 絕對定位受限于父級,因此子元素想要拉伸需要: html,body{ height:100%; }
?
具有包裹性:
display:absolute fixed sticky
position:absolute fixed sticky
overflow:hidden scroll
具有破壞性:
display:none
position:absolute fixed sticky
清除浮動的兩大方法:
底部插入clear:both
父元素BFC(IE8+)或haslayout(IE6/IE7)
Clear通常應(yīng)用形式:
html block水平元素底部
css after偽元素底部生成
權(quán)衡后的策略:
IE8之后:
IE6&IE7:
偽元素更好的方法:
.clearfix應(yīng)用在包含浮動子元素的父級元素上
注意:
1.使用了"clear:both"但是它會與margin重疊,則margin-botttom無法發(fā)揮作用;
2.使用了“overflow:hidden”使得元素BFC化,包裹好了,不影響margin-bottom發(fā)揮作用
clear:both;本文字離圖片的距離是?
2.本文字離圖片的距離是?
1.元素block塊狀化(磚頭化)
2.破壞性造成的緊密排列特性(去空格化)
規(guī)定可以由用戶調(diào)整 div 元素的大小:
div { resize:both; overflow:auto; }IE7浮動問題 一些要注意的點
包含塊:離該該元素最近的塊級祖先(父級)
《css權(quán)威指南》:浮動元素同時處于(常規(guī))流內(nèi)和流外
1.浮動元素不影響塊級元素的布局(塊級元素會當浮動元素不存在)
2.浮動元素會影響行內(nèi)元素的布局(從而間接影響塊級元素的布局
浮動元素的擺放:
盡量靠上
盡量靠左/右
僅能要挨著靠,margin外邊緣挨著(兩個浮動元素之間的margin不會被合并)
浮動元素間接影響塊級元素撐開內(nèi)含浮動元素的無高度div:
1.可用a標簽 設(shè)置display:inline-block;width:100%, 把含浮動元素的div撐起來(div不用設(shè)計高度)
2.overflow:hidden(BFC)
3.可用a標簽 設(shè)置display:block;width:100%,clear:both
4.div=》display:table
5.div=》display:table-cell
6.div=》display:flow-root(觸發(fā)BFC)
7.div::after代替a標簽=》content:’’ display:block; clear:both;(最下方存在一個沒有高度的元素)
8.使用.clearfix:after{content:’’ display:block; clear:both;}
9.讓div也浮動(BFC)
教學視頻:https://segmentfault.com/l/15...
overflowoverflow-x:y方向自動變成auto
在IE7中,設(shè)置了寬度100%時,會出現(xiàn)水平滾動條
使overflow起效:
1.非display:inline水平
2.對應(yīng)方位的尺寸限制。width/height/max-width/max-height/absolute拉伸
3.對于單元格td等,還需要table為table-layout:fixed狀態(tài)
IE7瀏覽器下,文字越多,按鈕兩側(cè)padding留白就越大
按鈕在IE8顯示正常
=》IE7解決方案:給所有的按鈕添加樣式overflow:visible
注意:
無論什么瀏覽器,默認滾動條均來自,而不是
去除頁面默認滾動條:html{ overflow:hidden; }
js與滾動高度:
chrome: document.body.scrollTop; 其他瀏覽器:document.documentElement.scrollTop; 但兩者不會同時存在,因此: var st = document.body.scrollTop+document.documentElement.scrollTop;(不推薦) 建議寫法:var st = document.body.scrollTop||document.documentElement.scrollTop;
overflow的pading-bottom缺失現(xiàn)象:
除了chrome瀏覽器,其他瀏覽器都不顯示 =》 導致了不一樣的scrollHeight(元素內(nèi)容高度)
1.html{ overflow-y:scroll; } 2. .container{ width:1200px; padding-left:calc(100vw - 100%); } 100vw-瀏覽器寬度;100%-可用內(nèi)容寬度自定義滾動條-webkit
Ios原生滾動回調(diào)效果:
-webkit-overflow-scrolling:touch;
JQ滾動條自定義插件:https://github.com/malihu/mal...
BFC塊級格式化上下文(內(nèi)部元素不會影響外部元素)
渲染規(guī)則:
1.bfc元素的垂直方向邊距發(fā)生重疊
2.bfc區(qū)域不會與浮動元素重疊
3.獨立容器
4.計算bfc高度時,浮動元素也會參與計算
創(chuàng)建bfc:
1.overflow
2.浮動不為none
3.position不是static
4.display與table有關(guān)
bfc使用場景:
...
BFC垂直方向重疊 //消除重疊1
3
布局應(yīng)用:
overflow與bfc:
1.auto
2.scroll
3.hidden
清除部分浮動:
.clearfix{ overflow:hidden; _zoom:1; } 清除浮動影響
通用:
.clearfix{
overflow:hidden; *zoom:1;
}
.clearfix:after{
content:’’; display:table; clear:both;
}
避免margin穿透問題
Overflow:auto scroll hidden
兩欄自適應(yīng)布局
Overflow:scroll auto hidden
注意:使用padding做流體自適應(yīng)布局的時候,萬萬不可讓自適應(yīng)層BFC化!
兩欄自適應(yīng)布局(IE7只適用于block元素)
overflow與absoluteabsolute使overflow:hidden失效
絕對定位元素不總是被父級overflow屬性剪裁,尤其當overflow在絕對定位元素及其包含塊(含position:relative absolute fixed聲明的父級元素,沒有則body元素)之間的時候
避免失效
1.overflow元素自身為包含塊
2.overflow元素的子元素為包含塊(為絕對定位元素的父級)
3.任意合法transform生命當做包含塊(讓overflow元素自身transform只適用于IE9+/FireFox;讓overflow子元素transform可通用IE9+)
?
Both:水平垂直兩邊拉
horizontal:只有水平方向拉
vertical:只有垂直方向拉
使用前提:元素overflow的屬性值不能是visible
文本域默認overflow:auto
文本溢出用省略號表示
使用前提:元素overflow的屬性值是hidden
錨點定位的本質(zhì):改變?nèi)萜鞯臐L動高度
錨點定位的觸發(fā):url地址中錨鏈和錨點元素 可focus的錨點元素處于focus態(tài)
錨點定位的作用:快速定位
錨點定位與overflow選項卡技術(shù):
頁面布局的變通 左右寬度固定,中間適應(yīng)已知左右欄高度和寬度,中間塊為自適應(yīng)
上下高度固定,中間適應(yīng)浮動絕對定位彈性表格網(wǎng)格
兩欄布局絕對定位絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
絕對定位
左寬度固定,右邊自適應(yīng)
左側(cè)頂寬
右側(cè)自適應(yīng)
.content { width: 100%; margin: 0 0 10px; } .left1 { position: relative; float: left; width: 100px; margin-right: -100px; background: #4eb3b9; } .right1 { float: right; width: 100%; background: #f8de72; } .right1-content { margin-left:110px; background: #ff0097; }
左寬度自適應(yīng),右邊固定寬
左側(cè)自適應(yīng)右側(cè)頂寬
.content { width: 100%; margin: 0 0 10px; } .left1 { background: #4eb3b9; float: left; width: 100%; } .right1 { background: #f8de72; width:100px; float: right; position: relative; margin-left: -100px; } .left1-content { background: #ff0097; margin-right: 120px; }
上高度固定,下自適應(yīng)
盒模型 基本概念兩種模型的設(shè)置:
box-sizing:content-box;//標準模型 默認 box-sizing:border-box;//IE模型
JS設(shè)置盒模型對應(yīng)的寬和高
dom.style.width/height:只能取出內(nèi)聯(lián)樣式 dom.currentStyle.width/height:三種方式都可以,只有ie支持 window.getComputedStyle(dom).width/height:都通用 dom.getBoundingClientRect().width/height:計算一個元素的絕對位置,根據(jù)視窗計算實例題
解釋邊距重疊
解決方案:塊級格式化上下文bfc
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/113589.html
摘要:具體來說,包管理器就是可以通過命令行,幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級,這樣就不用手工復(fù)制和更新庫。現(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學習HTML基礎(chǔ) HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應(yīng)該聚焦在下面這些東西上: 學習HTML基礎(chǔ),了解如何編寫語義HTML 理解如何把網(wǎng)頁分...
摘要:我的郵箱地址歡迎大家交流學習糾錯此篇博客是我的復(fù)習筆記,和學的時間太久了,忘得差不多了,最近要使用一下,所以重新打開的書略讀,后記錄了標簽,元素,屬性的具體意義。有些標記有屬性,具體格式,以標記為例,其中為標記的屬性。我的郵箱地址:zytrenren@163.com歡迎大家交流學習糾錯! 此篇博客是我的復(fù)習筆記,html和css學的時間太久了,忘得差不多了,最近要使用一下,所以重新打開htm...
摘要:內(nèi)聯(lián)元素在水平方向上相互挨著,總體上會從左上方流向右下方。,增加元素,設(shè)置屬性,兩個內(nèi)聯(lián)元素并排擺放,但只有左右方向有。還能與其它內(nèi)聯(lián)元素并排。 寫在前面:作為一個剛開始寫技術(shù)博客的新手,看到有人收藏了文章,寫作動力又猛增了。這應(yīng)該就是寫技術(shù)博客的好處之一:能給自己增加成就感和驅(qū)動力。最近關(guān)于css布局和定位相關(guān)內(nèi)容整理地有點慢,因為同時在做freecodecamp上的題,所以節(jié)奏有點...
摘要:彩票項目實戰(zhàn)學習記錄一完整走了一遍課程,覺得還不錯。支持正版人人有責零基礎(chǔ)教學解析彩票項目下面是項目課程的目錄路線一個項目分為三部分業(yè)務(wù)邏輯,自動構(gòu)建系統(tǒng),模擬數(shù)據(jù)和真實數(shù)據(jù)接口處理。 彩票項目實戰(zhàn)學習記錄(一) 完整走了一遍課程,覺得還不錯。 總結(jié): es6的知識點說得還算清楚,主要是為了了解和使用,不是深究,所以淺嘗即止即可,所以覺得還不錯。 完整還原了項目開發(fā)的代碼設(shè)計和開發(fā)過...
閱讀 2948·2021-11-23 09:51
閱讀 1666·2021-10-15 09:39
閱讀 1056·2021-08-03 14:03
閱讀 2879·2019-08-30 15:53
閱讀 3436·2019-08-30 15:52
閱讀 2486·2019-08-29 16:17
閱讀 2787·2019-08-29 16:12
閱讀 1646·2019-08-29 15:26