css定位機制、float(浮動)、版心與佈局流程、隱藏顯示、介面樣式
普通流(標準流)、浮動、定位
normal flow(標準流)
一個頁面標籤元素正常從上到下，從左到右的意思
比如塊級元素會獨佔一行
行內元素會按順序一次前後排列
float(浮動)
脫離標準流，不佔位置塊元素新增
float屬性後，會具有行內塊元素特性行內塊元素新增
float
常用於使
div等塊元素在一行顯示
屬性值
left: 元素向左浮動
right: 元素向右浮動
none：元素不浮動
版心與佈局流程
版心
網頁主體內容所在的區域
一般在瀏覽器視窗中水平居中顯示
常見的寬度值為
960px、980px、1000px、1200px
佈局流程
1、確定頁面的版心（可視區）
2、分析頁面中的行模組，以及每個行模組中的列模組
3、製作HTML結構
4、CSS初始化，然後開始運用盒子模型的原理，通過DIV+CSS佈局來控制網頁的各個模組
清除浮動
所解決問題
為了解決父級元素因為子級浮動引起內部高度為0 的問題
清除浮動的方法
額外標籤法
語法格式
選擇器{clear:屬性值;}屬性
left清除左側浮動的影響
right清除右側浮動影響
both同時清除左右兩側浮動的影響
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 200px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } .clear { clear: both; /*如果清除了浮動， 父親去自動檢測孩子的高度 以最高的為準*/ } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> <div class="clear"></div> <!-- 最後一個浮動標籤的後，新新增一個標籤 清除浮動 --> </div> <div class="footer"></div> </body> </html>
父級新增overflow屬性方法
overflow為hidden|auto|scroll都可以實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid red; width: 300px; overflow: hidden; /*別加錯位置了，給 父親加*/ /*不是所有的浮動我們都需要清除 ，誰影響佈局，我們清除誰*/ } .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 180px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
使用after偽元素清除浮動
:after 方式為空元素的升級版，好處是不用單獨加標籤了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:after { /*正常瀏覽器 清除浮動*/ content:""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; /*zoom 1 就是ie6 清除浮動方式 * ie7以下的版本所識別*/ } .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } </style> </head> <body> <div class="father clearfix"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
使用before和after雙偽元素清除浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } </style> </head> <body> <div class="father clearfix"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
定位(position)
元素的定位屬性主要包括定位模式和邊偏移兩部分
定位的屬性
定位模式(定位的分類)
選擇器{position:屬性值;}
static(靜態定位)
自動定位(預設定位方式)
網頁中所有元素都預設的是靜態定位
其實就是標準流的特性
relative(相對定位)
相對定位，相對於其原文件流的位置進行定位
每次移動位置，是以自己的左上角為基點移動
相對於自己來移動位置
不影響頁面中的其他元素
absolute(絕對定位)
絕對定位，相對於其上一個已經定位的父元素進行定位
絕對定位不佔位置，與浮動相似
若所有父元素都沒有定位，以瀏覽器為準對齊
fixed(固定定位)
固定定位，相對於瀏覽器視窗進行定位
完全脫標，不佔有位置
相對於瀏覽器移動位置
邊偏移屬性
top
頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom
底部偏移量，定義元素相對於其父元素下邊線的距離
left
左側偏移量，定義元素相對於其父元素左邊線的距離
right
右側偏移量，定義元素相對於其父元素右邊線的距離
定位案例:
使邊框1px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 250px; height: 400px; border: 1px solid #ccc; float: left; margin-left: -1px; position: relative; /* relative佔有原來的位置 */ /*z-index: 0;*/ } div:hover { border: 1px solid #f40; /*position: relative; 相對定位比標準流高一級 浮在上面的*/ z-index: 1; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
子絕對父相
一般網頁佈局中子級是絕對定位的話， 父級要用相對定位
定位的盒子居中對齊
盒子加了定位或者浮動後，
margin 0 auto方式的居中對齊失效使用
left: 50%+margin-left: -盒子的大小的一半
z-index(疊放次序)
預設值是：0
取值越大，定位元素在層疊元素中越居上
如果取值相同，則根據書寫順序，後來居上
只有相對定位，絕對定位，固定定位有此屬性
標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。
元素的顯示和隱藏
display 顯示
display:block：除了轉化為塊級元素之外，同時還有顯示元素的意思隱藏之後不再保留位置
visibility 可見性
隱藏之後，繼續保留原有位置
屬性
visible ： 物件可視
hidden：物件隱藏
overflow(溢位隱藏)
當物件的內容超過其指定高度及寬度時如何管理內容
屬性
visible
不剪下內容也不新增滾動條
auto
超出自動顯示滾動條，不超出不顯示滾動條
hidden
不顯示超過物件尺寸的內容，超出的部分隱藏掉
scroll
不管超出內容否，總是顯示滾動條
介面樣式
cursor(滑鼠樣式)
屬性
default：小白
pointer：小手
move：移動
text：文字
outline(輪廓線)
是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
屬性
outline : outline-color ||outline-style || outline-width一般去掉不用
<input type="text" style="outline: 0;"/>
resize(防止拖拽文字域)
這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文字域。
案例
<textarea style="resize: none;"></textarea>