一些css基礎學習筆記
relative
1.當父元素設置了relative的zindex，子元素爲absolute時，設置zindex無效
2.當父元素relative設置了overflow：hidden時，子元素absolute超出父元素部分無效
3.relative只能限制fix的zindex層級
4.Relative至關於自身進行定位，absolute相對於邊界
5.Margin會影響其餘元素定位，而relative無影響（自定義拖拽效果）
6.top&&bottom同時存在，bottom無效；同理，right無效
7.relative可提升層疊級數
8.父元素的zindex較大排前面（數值）
9.Auto排在上，（當前層疊上下文的生成盒子層疊水平是0 盒子【除非是根元素】不會建立一個新的層疊上下文）css
層疊上下文&層疊水平
層疊上下文：是html元素中的一個三維概念，表示元素再z軸上有了‘能夠高人一等’html
層疊水平：全部元素都有決定同一層疊上下文中的元素在z軸上的顯示順序，比較兩個元素的層疊水平,必須是這兩個元素在同一個層疊上下文中,不然沒有意義。z-index能夠影響 層疊水平(只是影響,不是決定)git
頁面根元素天生具備層疊上下文，稱之爲「根層疊上下文」
Zindex值爲數值的定位元素也具備層疊上下文github
層疊順序是規則
(在同一個層疊上下文中的元素,對應下面規則的序號越大,位置越高)
1.層疊上下文 background/border
2.負z-index
3.block塊級元素
4.float浮動元素
5.inline/inline-block行內元素
6.z-index:auto或者z-index:0(不依賴z-index的層疊上下文)
7.正z-indexweb
1一般是裝飾屬性;34是佈局,5是內容——因此行內元素具備較高的層疊序號
背景色覆蓋是層疊順序，文字覆蓋是後來居上chrome
父元素成爲層疊上下文
1.父元素設置display：flex且子元素的zindex不爲0時
2.父元素的透明度有具體數值
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內核瀏覽器有效）
8.will-change：transform（will-change是提升頁面滾動、動畫等渲染性能的屬性）
9.-webkit-overflow-scrolling:touch（移動端）segmentfault
定位元素層疊在普通元素之上,由於一旦成爲定位元素,z-index自動生效,默認z-index:auto也能夠看做z-index:0;因此會覆蓋block、inline、float元素瀏覽器
IE7的zindex：auto也會新建層疊上下文；元素的層疊水平主要由所在的層疊上下文決定（避免使用定位屬性，定位屬性從大容器平級分離爲私有小容器）app
避免一山比一山高的樣式問題（多人寫做及後期維護）：對於非浮層元素，避免設置z-index值，zindex值沒有任何道理須要超過2dom
避免浮層組件因zindex被覆蓋的問題（組件的覆蓋規則具備動態性，意向不到的高層級元素）：
Zindex負值元素再層疊上下文的背景之上，其餘元素之下。
absolute：（無依賴）
1.獨立的absolute能夠擺脫overflow的限制，不管是滾動仍是隱藏
2.絕對定位生效的時候，浮動無效
3.用了absolute以後，用display，會保留位置跟隨特性，要注意的是IE7中用了4.absolute以後，只會是inline-block水平顯示，指定包上<div>就解決了；
5.配合margin，精肯定位，適應各類瀏覽器
6.在image和i中間使用註釋，能夠消除它們之間的空格（保證貼合，可以使用absolute跟隨性）
下拉框定位（無依賴定位）
利用了即便給予了絕對定位屬性（前提不給予任何top/left/bottom/right值），元素會依然保持普通文檔流的視覺位置。這裏說的位置是一種視覺位置，並非文檔流位置，由於其自己高度在父元素中已經塌陷，也就是你們平時所謂的已經脫離文檔流），此時使用margin作平移，也就是相對於本身進行了定位，前提要將「視覺位置」規劃好，也就是按照正常的文檔流進行佈局（後面的元素在右或是下側）。
對齊居中或邊緣
絕對定位的元素前加 父元素text-align:center;便可使得絕對定位的元素居中
<div style="background: rebeccapurple;width: 200px;height: 200px;margin: 50px auto;text-align: center">
<div style="background: aquamarine;width: 50px;height: 50px;position: absolute;display: inline-block;margin-left: -25px"></div>
</div>
右邊側欄應用：
<div class="constr">
<div class="course-fixed-x">
<div class="course-fixed">
<a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a>
<a href="http://www.imooc.com/mobile/app" class="goto_top_app"></a>
<a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a>
</div>
</div>
</div>
<style>
body {
margin: 0;
font: 14px/1.4 "Microsoft YaHei";
background-color: #EDEFF0;
}
.constr {
width: 1200px;
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
.goto_top_diaocha, .goto_top_app, .goto_top_feed {
display: block;
width: 48px;
height: 48px;
margin-top: 10px;
background: url(http://img.mukewang.com/5453076e0001869c01920098.png) no-repeat;
}
.goto_top_diaocha {
background-position: -48px 0;
}
.goto_top_diaocha:hover {
background-position: -48px -50px;
}
.goto_top_app {
background-position: -96px 0;
}
.goto_top_app:hover {
background-position: -96px -50px;
}
.goto_top_feed {
background-position: -144px 0;
}
.goto_top_feed:hover {
background-position: -144px -50px;
}
.course-fixed-x {
height: 0;
text-align: right;
overflow: hidden;
}
.course-fixed {
display: inline;
position: fixed;
margin-left: 20px;
bottom: 100px;
}
</style>
星號對齊：
星號進行絕對定位
圖標對齊：
圖標進行無依賴絕對定位
文字溢出：
absolut不佔據尺寸
迴流與重繪：動畫儘可能做用在絕對定位元素上
垂直空間的層級：後來居上
z-index無依賴
1.若是隻有一個絕對定位元素，天然不須要zindex，自動覆蓋普通元素 2.若是兩個絕對定位，控制dom流的先後順序達到須要的覆蓋效果，依然無zindex 3.若是多個絕對定位交錯，很是很是少見！，zindex：1控制 4.若是非彈框類的絕對定位元素zindex>2，一定zindex冗餘，須要優化
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值，內部元素亦可拉伸；
2.容器拉伸，內部元素支持百分比width、height值
若拉伸和width&height尺寸同時存在，那麼width/height尺寸大於left/top/right/bottom拉伸尺寸
所以=》position：absolute；top：0；left：0；right：0；width：50%的實際寬度是50%而不是100%（當使用margin：auto 可實現居中=》絕對元素的絕對居中效果 IE8+支持）
一些例子
沒有寬度和高度聲明實現的全屏自適應效果：
<style>
html, body { height: 100%; }
.overlay {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
background-color: #000;
opacity: .5; filter: alpha(opacity=50);
}
</style>
<div class="overlay"></div>
高度自適應的九宮格效果：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高度自適應的九宮格效果</title>
<style>
html, body { height: 100%; margin: 0; }
.page {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
}
.list {
float: left;
height: 33.3%; width: 33.3%;
position: relative;
}
.list:before {
content: '';
position: absolute;
left: 10px; right: 10px; top: 10px; bottom: 10px;
border-radius: 10px;
background-color: #cad5eb;
}
.list:after {
content:attr(data-index);
position: absolute;
height: 30px;
left: 0; right: 0; top: 0; bottom: 0;
margin: auto;
text-align: center;
font: 24px/30px bold 'microsoft yahei';
}
</style>
</head>
<body>
<div class="page">
<div class="list" data-index="1"></div>
<div class="list" data-index="2"></div>
<div class="list" data-index="3"></div>
<div class="list" data-index="4"></div>
<div class="list" data-index="5"></div>
<div class="list" data-index="6"></div>
<div class="list" data-index="7"></div>
<div class="list" data-index="8"></div>
<div class="list" data-index="9"></div>
</div>
</body>
</html>
absolute與總體佈局：
1.body降級，子元素升級
（全屏拉伸效果：position：absolute；left：0；top：0；right：0；bottom：0）
絕對定位受限於父級，所以子元素想要拉伸須要：
html，body{
height：100%；
}
float
具備包裹性：
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一般應用形式：
html block水平元素底部
css after僞元素底部生成
權衡後的策略：
IE8以後：
IE6&IE7：
僞元素更好的方法：
.clearfix應用在包含浮動子元素的父級元素上
注意：
1.使用了"clear:both"可是它會與margin重疊，則margin-botttom沒法發揮做用；
2.使用了「overflow：hidden」使得元素BFC化，包裹好了，不影響margin-bottom發揮做用
<div style="background-color: #f5f5f5;">
<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;">
<div style="clear:both; margin-bottom:100px;">clear:both;</div>
</div>
<div style="margin-top: 100px;">本文字離圖片的距離是？</div>
<br><br><br><br>2.
<div style="background-color: #f5f5f5; overflow: hidden;">
<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left; margin-bottom: 100px;">
</div>
<div style="margin-top: 100px;">本文字離圖片的距離是？</div>
</div>
float做用
1.元素block塊狀化（磚頭化）
2.破壞性形成的緊密排列特性（去空格化）
規定能夠由用戶調整 div 元素的大小：
div
{
resize:both;
overflow:auto;
}
IE7浮動問題
一些要注意的點
包含塊：離該該元素最近的塊級祖先（父級）
《css權威指南》：浮動元素同時處於（常規）流內和流外
1.浮動元素不影響塊級元素的佈局（塊級元素會當浮動元素不存在）
2.浮動元素會影響行內元素的佈局（從而間接影響塊級元素的佈局
浮動元素的擺放：
儘可能靠上
儘可能靠左/右
僅能要挨着靠，margin外邊緣挨着（兩個浮動元素之間的margin不會被合併）
浮動元素間接影響塊級元素
撐開內含浮動元素的無高度div：
1.可用a標籤 設置display：inline-block；width：100%， 把含浮動元素的div撐起來（div不用設計高度）
2.overflow：hidden(BFC)
3.可用a標籤 設置display：block；width：100%，clear：both
4.div=》display：table
5.div=》display：table-cell
6.div=》display：flow-root（觸發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...
overflow
overflow-x：y方向自動變成auto
在IE7中，設置了寬度100%時，會出現水平滾動條
使overflow起效：
1.非display：inline水平
2.對應方位的尺寸限制。width/height/max-width/max-height/absolute拉伸
3.對於單元格td等，還須要table爲table-layout：fixed狀態
overflow：visible
IE7瀏覽器下，文字越多，按鈕兩側padding留白就越大
按鈕在IE8顯示正常
=》IE7解決方案：給全部的按鈕添加樣式overflow：visible
注意:
不管什麼瀏覽器，默認滾動條均來自<html>，而不是<body>標籤
Body/html與滾動條
去除頁面默認滾動條：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缺失現象：
除了chrome瀏覽器，其餘瀏覽器都不顯示 =》 致使了不同的scrollHeight（元素內容高度）
解決水平居中跳動的問題的修復
1.html{
overflow-y:scroll;
}
2.
.container{
width:1200px;
padding-left:calc(100vw - 100%);
}
100vw-瀏覽器寬度；100%-可用內容寬度
自定義滾動條-webkit
Ios原生滾動回調效果：
-webkit-overflow-scrolling：touch；
JQ滾動條自定義插件：https://github.com/malihu/mal...
BFC
塊級格式化上下文（內部元素不會影響外部元素）
渲染規則：
1.bfc元素的垂直方向邊距發生重疊
2.bfc區域不會與浮動元素重疊
3.獨立容器
4.計算bfc高度時，浮動元素也會參與計算
建立bfc：
1.overflow
2.浮動不爲none
3.position不是static
4.display與table有關
bfc使用場景：
...
BFC垂直方向重疊
//消除重疊
<section id="bfc">
<style>
#bfc{
background: paleturquoise;
overflow: hidden;
}
#bfc>p{
margin: 5px auto 25px;
background: salmon;
}
</style>
<p>1</p>
<div style="overflow: hidden;background: mediumorchid">
<p>2</p>
</div>
<p>3</p>
</section>
佈局應用：
<section id="layout">
<style>
#layout{
background: lightpink;
}
.left{
float: left;
width: 100px;
height: 100px;
background: lemonchiffon;
}
.right{
height: 110px;
background: lightblue;
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
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
兩欄自適應佈局
Overflow:scroll auto hidden
注意：使用padding作流體自適應佈局的時候，萬萬不可以讓自適應層BFC化！
兩欄自適應佈局
（IE7只適用於block元素）
overflow與absolute
absolute使overflow：hidden失效
絕對定位元素不老是被父級overflow屬性剪裁，尤爲當overflow在絕對定位元素及其包含塊（含position：relative absolute fixed聲明的父級元素，沒有則body元素）之間的時候
避免失效
1.overflow元素自身爲包含塊
2.overflow元素的子元素爲包含塊（爲絕對定位元素的父級）
3.任意合法transform生命當作包含塊（讓overflow元素自身transform只適用於IE9+/FireFox；讓overflow子元素transform可通用IE9+)
overflow失效妙用
resize拉伸
Both：水平垂直兩邊拉
horizontal：只有水平方向拉
vertical：只有垂直方向拉
使用前提：元素overflow的屬性值不能是visible
文本域默認overflow：auto
text-overflow：ellipsis
文本溢出用省略號表示
使用前提：元素overflow的屬性值是hidden
錨點技術
錨點定位的本質：改變容器的滾動高度
錨點定位的觸發：url地址中錨鏈和錨點元素 可focus的錨點元素處於focus態
錨點定位的做用：快速定位
錨點定位與overflow選項卡技術：
頁面佈局的變通
左右寬度固定，中間適應
已知左右欄高度和寬度，中間塊爲自適應
<style>
.content{
width: auto;
background: #e6e6e6;
/*display: flex;*/
}
div{
height: 100px;
}
.left{
width: 300px;
background: blueviolet;
float: left;
}
.container{
background: pink;
}
.right{
width: 300px;
background: paleturquoise;
float: right;
}
.content-absolute .left2,.container2,.right2{
position: absolute;
}
.left2{
left: 0;
width: 300px;
background: palevioletred;
}
.container2{
left: 300px;
right: 300px;
background: yellowgreen;
}
.right2{
right: 0px;
background: antiquewhite;
width: 300px;
}
.content-flex{
display: flex;
}
.left3{
background: mediumvioletred;
width: 300px;
}
.container3{
background: #bab8c7;
flex: 1;
}
.right3{
background: mediumturquoise;
width: 300px;
}
.content-table{
display: table;
width: 100%;
}
.right4{
width: 300px;
display: table-cell;
background: #d78cfb;
}
.left4{
width: 300px;
display: table-cell;
background: lightcoral;
}
.container4{
background: lavender;
}
.content-grid{
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
}
.left5{
background: #f8de72;
}
.right5{
background: #e3f8b8;
}
.container5{
background: #f89761;
}
</style>
</head>
<body style="padding: 0;margin: 0">
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="container">
浮動
</div>
</div>
<!--絕對定位方案-->
<div class="content-absolute">
<div class="left2"></div>
<div class="container2">絕對定位</div>
<div class="right2"></div>
</div>
<!--彈性盒子-->
<div class="content-flex">
<div class="left3"></div>
<div class="container3">彈性</div>
<div class="right3"></div>
</div>
<!--表格佈局-->
<div class="content-table">
<div class="left4"></div>
<div class="container4">表格</div>
<div class="right4"></div>
</div>
<!--網格佈局-->
<div class="content-grid">
<div class="left5"></div>
<div class="container5">網格</div>
<div class="right5"></div>
</div>
</body>
上下高度固定，中間適應
<style>
body {
padding: 0;
margin: 0;
height: 100%;
}
.header1 {
height: 100px;
background: #690;
width: 100%;
position: absolute;
top: 0;
}
.container1 {
background: #FC0;
width: 100%;
overflow: auto;
top: 100px;
position: absolute;
bottom: 100px;
}
.footer1 {
height: 100px;
background: #690;
width: 100%;
position: absolute;
z-index: 200;
bottom: 0;
}
</style>
</head>
<body>
<!--浮動-->
<div class="content-absolute">
<div class="header1"></div>
<div class="container1">
絕對定位
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
<p>絕對定位</p>
</div>
<div class="footer1"></div>
</div>
</body>
兩欄佈局
左寬度固定，右邊自適應
<div class="content">
<div class="left1">
<p>左側頂寬</p>
</div>
<div class="right1">
<div class="right1-content">
<p>右側自適應</p>
</div>
</div>
</div>
.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;
}
左寬度自適應，右邊固定寬
<div class="content">
<div class="left1">
<div class="left1-content">
左側自適應
</div>
</div>
<div class="right1">
右側頂寬
</div>
</div>
.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;
}
上高度固定，下自適應
盒模型
基本概念
兩種模型的設置：
box-sizing:content-box;//標準模型 默認 box-sizing:border-box;//IE模型
JS設置盒模型對應的寬和高
dom.style.width/height:只能取出內聯樣式 dom.currentStyle.width/height:三種方式均可以，只有ie支持 window.getComputedStyle(dom）.width/height:都通用 dom.getBoundingClientRect().width/height:計算一個元素的絕對位置，根據視窗計算
實例題
解釋邊距重疊
解決方案：塊級格式化上下文bfc
<style>
html *{
padding: 0;
margin: 0;
}
.child{
height: 100px;
background: pink;
margin-top: 10px;
}
.box{
background: paleturquoise;
/*高度改變 父元素bfc*/
overflow: hidden;
}
</style>
</head>
<body>
<!--浮動-->
<div class="box">
<div class="child"></div>
</div>
</body>
- 1. 【學習筆記】CSS 基礎
- 2. CSS基礎入門學習筆記
- 3. CSS學習筆記（詳細）- 基礎
- 4. Java學習筆記-Java基礎23（CSS）
- 5. HTML+CSS零基礎學習筆記（三）
- 6. CSS 基礎筆記
- 7. web基礎之css基礎學習筆記
- 8. Linux學習筆記（一）一些基礎實用的東西
- 9. CSS學習筆記（一）
- 10. css學習筆記（一）
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【學習筆記】CSS 基礎
- 2. CSS基礎入門學習筆記
- 3. CSS學習筆記（詳細）- 基礎
- 4. Java學習筆記-Java基礎23（CSS）
- 5. HTML+CSS零基礎學習筆記（三）
- 6. CSS 基礎筆記
- 7. web基礎之css基礎學習筆記
- 8. Linux學習筆記（一）一些基礎實用的東西
- 9. CSS學習筆記（一）
- 10. css學習筆記（一）