1盛霎、float與absolute
當
float和absolute同時存在的時候抛寝，float時么有任何效果的度硝，所以沒有必要同時啟用float和absolute兩個具有相似性实蔽，相似點包括
- 塊狀化和浮動類似卷扮，直接把元素
display表現成block或者是table- 破壞性荡澎，破壞正常的流的持續(xù)性均践。
- 塊狀格式化上下文
BFC- 包裹性，元素不會自動填充摩幔，而是由內容撐起來的 所以沒必要使用display:inline-block,如果元素顯示或者無依賴定位浊猾，可以使用
display:inline
1、包含塊
普通元素寬度的百分比是針對于父級元素的context box的寬度計算的热鞍，但是 absolute是對于上邊第一個position不為static的祖先元素計算的葫慎。包含塊的計算規(guī)則：
根元素
<html>對于其他元素，如果這個元素的
position是relative或者是static那么包含塊就是最近的祖先的content box邊界如果
position:fixed的包含塊是’初始包含塊‘-
position:absolute的包含塊是最近的position不為static的祖先元素建立- 如果祖先是個純inline的呢么
- 假設給內聯(lián)元素的前后各生成一個寬度為0的內聯(lián)盒子薇宠，那么這兩個內聯(lián)盒子的padding box外邊的包圍盒就是內聯(lián)元素的包含塊偷办，內聯(lián)元素的包含塊受
::first-line偽元素的影響，但是不受::first-letter偽元素的影響 - 如果這個內聯(lián)元素被跨行分割澄港，那么包含塊沒有定義椒涯，自行發(fā)揮
- 假設給內聯(lián)元素的前后各生成一個寬度為0的內聯(lián)盒子薇宠，那么這兩個內聯(lián)盒子的padding box外邊的包圍盒就是內聯(lián)元素的包含塊偷办，內聯(lián)元素的包含塊受
- 其他情況就是祖先
padding box的邊界形成的
- 如果祖先是個純inline的呢么
如下是內聯(lián)元素作為包含塊講解：
我們用的少的原因：
使用了absolute定位，都是用來布局的回梧，但是內聯(lián)元素用來圖文展示废岂，所以不好碰上
-
理解成本比較高，
<div class="point01"> <span style="position: relative;"> 我是 <big style="font-size: 200%">字號很大的</big>文字</span> </div>[圖片上傳失敗...(image-30f8ba-1534400853353)]
可以看到狱意，內聯(lián)元素的包含塊是由生成的前后內聯(lián)盒子決定的湖苞，和里邊的內聯(lián)盒子的細節(jié)沒任何關系
-
兼容性問題，
- 內聯(lián)元素單行的時候： 包含塊是個空元素的時候详囤，
- 多行的時候财骨，因為行為沒有被定義，所以自由發(fā)揮
絕對定位元素 計算包含塊
最近的
position不為static的祖先元素建立
這里我們引申一下藏姐，
? height:100% 是第一惡搞具有定位元素的屬性值的祖先元素的高度隆箩，
height:inherit 單純的父親高度的繼承
包裹性帶來的寬度自適應性是由包含塊來計算的：
<div class="box">我是文字，</div>
<style>
.point01 .box{
position: absolute;
}
</style>
這個時候是不會換行的羔杨，但是如果有很多字的話捌臊，會不會換行？
在通常場景下兜材，.box 元素寬度就是里邊文字的寬度理澎，不會換行，但是文字越來越多护姆，矾端。box元素就會越來越大，不會無限大下去卵皂，因為超過一定限制就會自動換行，這里的限制就是砚亭。box的包含塊
絕對定位元素默認的最大寬度就是“包含塊”的寬度
但是當我們的包含塊的寬度足夠小灯变，放不下幾個文字的時候殴玛，就會怪異如下：
<a href="javascript:" class="icon-delete tips" data-title="刪除"></a>
.tips[data-title] {
position: relative;
}
.tips[data-title]::before,
.tips[data-title]::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
visibility: hidden;
}
.tips[data-title]::before {
content: attr(data-title);
top: -33px;
padding: 2px 10px 3px;
line-height: 18px;
border-radius: 2px;
/*white-space: nowrap;*/
background-color: #333;
text-align: left;
color: #fff;
font-size: 12px;
}
.tips[data-title]::after {
content: "";
border: 6px solid transparent;
border-top-color: #333;
top: -10px;
}
.tips[data-title]:hover::before,
.tips[data-title]:hover::after {
transition: visibility .1s .1s;
visibility: visible;
}
.icon-delete {
display: inline-block;
width: 20px; height: 20px;
background: url(../img/delete@2x.png) no-repeat center;
background-size: 16px;
}
[圖片上傳失敗...(image-9d5912-1534400853353)]
如果把注釋的代碼解開就是：
[圖片上傳失敗...(image-b758fd-1534400853353)]
上述的代碼，after用來做小尖頭添祸，然后before用來做文本框
這里還有一個隱藏的技術：
content: attr(data-title);動態(tài)設置文檔
定位和計算是相對于祖先元素的padding box的
2滚粟、具有相對特性的 無依賴absolute絕對定位
如果一個position，如果沒有任何的left right top bottom那他會在那里刃泌？他會在當前位置凡壤！
absolute是非常獨立的css屬性值，樣式和行為不依賴任何的css都可以完成
無依賴絕對定位 ：沒有任何的left right top bottom屬性
使用無依賴絕對定位 特性：代碼簡潔 相對定位
幾個案例：
1耙替、各類圖標定位
<div class="menu">
<span>普通導航</span>
<span > 熱門導航<i class="icon-hot"></i></span>
<span>新導航</span>
</div>
.point03 span{
list-style-type: none;
float: left;
line-height: 70px;
padding-left: 30px;
/*display: inline-block;*/
}
.point03 .menu{
height: 70px;
background: gray;
}
.icon-hot{
position: absolute;
margin:-6px 0 0 2px;
width: 28px;
height:11px;
background: url("../img/hot.gif");
}
[圖片上傳失敗...(image-3f93c5-1534400853353)]
這里圖標就在文件后頭亚侠，還不影響正常的排序
position:absolute然后用margin偏移實現，兼容性很好俗扇，和inline-block對齊相比較硝烂，好處在于inline-block最終對齊的行框高度會變大，中文下沉铜幽，圖表居中滞谢，想要視覺上的居中，vertical-align會讓圖標比實際的低一點除抛，而且行高變大狮杨，但是用”無依賴“實現這些的時候，完全不用擔心正常流空間的尺寸
2到忽、超越常規(guī)的布局排版
<div class="point04">
<div class="form">
<div class="line">
<label for="mail"><span class="icon-star">*</span>郵箱</label><input type="email" id="mail">
<span class="regist-remark regist-warn">
<i class="icon-warn"></i>郵箱格式不準確（示意）
</span>
</div>
<div class="line">
<label for="pass">密碼</label><input type="text" id="pass">
</div>
<div class="line">
<label for="tel">手機號碼</label><input type="text" id="tel">
</div>
</div>
</div>
.point04 .form{
width:356px;
margin: auto;
}
.point04 .form .line{
margin: 30px;
display: block;
}
.point04 .line label{
display: inline-block;
width: 100px;
text-align: left;
}
.point04 input{
height: 30px;
width:170px;
}
/*以下是星星還有提示信息的樣式*/
.icon-star{
position: absolute;
margin-left: -1em;
color: #f30;
}
.regist-remark {
position: absolute;
margin: 8px 0 0 10px;
color: #666;
}
/* 郵箱報錯那里的警示小圖標 */
.regist-warn {
padding-left: 16px;
color: #be0000;
}
.icon-warn {
position: absolute;
margin-left: -18px;
width: 16px; height: 20px;
background: url(../img/warn.gif) no-repeat center;
}
[圖片上傳失敗...(image-3ef8fb-1534400853353)]
這里前邊的*還有后頭的提示都跳出了寬度的限制禾酱，而且，如果把框框變窄绘趋，也會隨著變化颤陶。
3、下拉框的實現：
.point05 input{
width: 200px; height: 20px;
line-height: 20px;
padding: 9px 39px 9px 9px;
border: 1px solid #ddd;
}
.point05 .search-btn {
width: 20px; height: 20px;
border: 9px solid #fff;
background: #ddd url(../img/search.png) no-repeat center;
position: absolute; margin: 1px 0 0 -40px;
/*隱藏文字*/
text-indent:-9em;
overflow: hidden;
}
.point05 .search-datalist{
position: absolute;
width:248px;
border:1px solid #e6e8e9;
}
.point05 .search-datalist a{
display: block;
line-height: 36px;
padding-left: 12px;
color: #5e5e5e;
text-decoration: none;
}
.point05 .search-result{
display: none;
}
.search-input:focus~.search-result{
display: block;
}
[圖片上傳失敗...(image-c15013-1534400853353)]
主要是放大鏡還有下來框的定位陷遮，用到了position然后用margin進行修飾
4滓走、進一步深入“無依賴絕對定位”
雖然說 absolute后的代碼，display是block帽馋，但是其定位的位置和沒有設置position:absolute時候的位置相關搅方。
<div>這里是一大串的文字，如果我后頭的<span style="position:absolute;">span元素設置成position绽族，那么他的display模式將會是block但是定位的時候姨涡，還是按行內元素的來</span></div>
[圖片上傳失敗...(image-1e0aa0-1534400853353)]
如圖所示，span后頭的文字并沒有換行吧慢，說明并沒有按照display來定位地址的
3涛漂、absolute 和text-align
講道理，absolute和float一樣將元素的display變成block。理論上對text-align無感匈仗，但是萬萬沒想到瓢剿，text-align對absolute居然有影響
<p style="text-align: center;"><img src="./img/test02.jpeg" style="position:absolute;" alt=""></p>
[圖片上傳失敗...(image-ebcc64-1534400853353)]
具體的渲染原理如下：
由于img是內聯(lián)水平，p中僅僅存在一個寬度為0的幽靈空白點悠轩，所以影響了布局方式
-
如果要讓圖片居中實現间狂，只需要讓圖片margin-left一半寬度就好了
<p style="text-align: center;"><img src="./img/test02.jpeg" style="position:absolute;margin-left: -204px" alt=""></p>[圖片上傳失敗...(image-e2e936-1534400853353)]
2、 absolute和overflow
overflow對absolute元素裁剪規(guī)則：絕對定位元素不總是被父級overflow屬性裁剪火架，尤其當overflow在絕對定位元素及其包含塊之間的時候
<div class="point08">
<div style="position:relative;">
<div style="overflow: hidden;">
<img src="./img/test.png" style="position:absolute;" alt=""></div></div>
</div>
[圖片上傳失敗...(image-405c93-1534400853353)]
你看鉴象，雖然overflow在img的上邊，高度為空何鸡，外邊由position纺弊，但是還是無法裁剪這個圖片
<div style="overflow: hidden;position:relative;">
<img src="./img/test.png" style="position:absolute;" alt=""></div>
這個就會進行裁剪，因為overflow在包含塊上
如果overflow的值不是hidden而是scroll或者是auto也不會出現滾動條
這個特性 可以用來實現某個元素不隨著滾動條滾動的效果
css3中 當大家遇到absolute被剪裁音比，或者fixed失效的時候俭尖，看看是不是transform屬性作祟
3、absolute和clip
css中洞翩，有些屬性必須綁定使用才有效果稽犁，比如說clip屬性，必須是絕對定位或者是固定定位
clip:rect(top,right,bottom,left)
注意上邊的用法骚亿，不能縮寫已亥，不能用百分號 ，可以由逗號来屠，也可以沒有逗號
clip的使用方法：
fixed股定位的剪裁虑椎，如果在定位中，想要剪裁俱笛，一般是需要overflow作用在包含塊上的捆姜，但是，fixed的包含塊是html迎膜，這里他可能有心無力泥技，所以還是需要clip來進行剪裁的。
-
最佳可訪問性隱蔽 內容雖然看不見磕仅，但是能被機器讀取珊豹，同時還占用原來的空間 兼容性好，任何元素榕订，任何場景都可以無障礙使用之店茶。
隱藏文件的方法：
- display:none:不推薦，這個機器無法讀取到
- Text-align:縮進劫恒，但是如果文字縮進的太大了贩幻，大到屏幕之外，屏幕閱讀設備也不會讀取的
- color：transparaent移動端上推薦，但是pc很難用簡單的方式阻止文本被選中
- clip:視覺上隱藏了段直，但是可以被機器讀取到
<div class="point09">
<div class="box"><img class="img01" src="./img/test02.jpeg" alt=""></div>
<div class="box"><img class="img02" src="./img/test02.jpeg" alt=""></div>
</div>
.point09 .box{
float: left;
width:300px;
height:300px;
background-color: #f0f3f9;
position: relative;
overflow: auto;
}
.point09 img{
position: absolute;
}
.point09 .img02{
position: absolute;
clip:rect(0 0 0 0 );
}
[圖片上傳失敗...(image-61de5-1534400853353)]
4吃溅、absolute的流體特性
1 left top right bottom屬性
當absolute遇上left top right bottom 等的時候溶诞，absolute才真正的變成了絕對定位元素鸯檬。這個時候，會絕對定位于包含塊的左上角為原點螺垢，的top right bottom left確定的點上喧务。喪失了原有屬性和相對特性
如果只設置了一個方向的絕對定位，那么枉圃，另一個方向依然保持了相對特性
<div class="box" style="position:relative;">
<span class="div">我們這里看如果只給absolute元素設置但方向的絕對值時候功茴，另一個方向的絕對值怎么樣</span><span style="position:absolute;top:30px;">這里是絕對定位</span>
</div>
[圖片上傳失敗...(image-df1414-1534400853353)]
2、流體特性
當一個絕對定位元素上孽亲，對立定位的方向同時具有定位數值的時候坎穿，流體特性就發(fā)生了，比如
left:0;right:20px;
如上返劲，并不一定兩邊都是零玲昧，只要由數值，position就會喪失包裹性篮绿，從而能夠進行填充孵延。
這個時候填充到padding box的大小，那么如下兩個css有什么區(qū)別呢亲配？
.box01{
position:absolute;
left:0;right:0;top:0;bottom:0;
padding:30px;
}
.box02{
position:absolute;
left:0;top:0;
padding:30px;
width:100%;height:100%;
}
很明顯尘应，設置了padding后，box2 的高度寬度都比原來增加了吼虎，而box01是內部縮小犬钢，box01更體現出流體特性
同時這種情況，對我們的布局非常有價值思灰，因為子元素的height百分比可以生效了玷犹，高度自適應高度等比例等布局都可以實現了。
