6.css的定位
定位
兩大元素
塊級元素：div h1~h6 ul li ol table p 等等
內聯元素：a span img input等等
<style>
*{
padding: 0;
margin: o;
}
.test{
width:100px;
height: 100px;
background:red ;
margin-right: 10px;
}
</style>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
按標準流排序的話，div按一行一行排列，而span排在一行，排不滿才換下一行
定位屬性position
position屬性決定了元素將如何定位
通過top，right、bottom，left實現位置
static 預設排列
relative 相對
可以通過left，top，right，bottom來改變位置
.test{
width:100px;
height: 100px;
background:red ;
position:relative;
left:0;
top:100px;
相當於增加離左邊和上邊的距離
}
但如果是right和bottom則相反：
absolute 絕對
脫離了文件流，是絕對的位置定位，left和top方向大小都類似。相對於整個文件
一般用父級relative，子級用absolute
fixed
脫離正常文件流，固定元素
inherit
繼承
.per{
width: 300px;
height: 300px;
background:red;
position:fixed;
left: 200px;
top: 200px;
}
.son{
width:100px;
height:100px;
background: blue;
position: inherit;
left: 100px;
top: 100px;
}
子元素繼承父元素的fixed，進行固定定位
所有帶有定位屬性的元素都是有層級的
z-index可以改變定位元素的層級，預設是為0的
.per{
width: 300px;
height: 300px;
background:red;
position:fixed;
z-index:-1;
}
.son{
width:100px;
height:100px;
background: blue;
position: inherit;
z-index:1;
}
盒子模型和定位的區別：
盒子模型是通過改變margin和padding來實現元素的移動。
定位是通過元素的位置來移動
.login{
width: 360px;
height: 360px;
background: url("login.png"）no-repeat;
position:fixed;
/*實現水平居中*/
left: 50%;
top:50%;
margin-left:-180px; 寬度的一半
margin-top: -180px; 高度的一半
}
實現網頁小案例網頁跟隨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
*{
padding: 0;
margin: 0;
}
.page{
width: 100%;
height: 4043px;
background: url("mooc.png") center top no-repeat;
}
.nav{
width: 160px;
height: 205px;
position: fixed;
left: 0;
top: 50%;
margin-top: -103px;
font-family: 'Miscrosoft YaHei';
}
.nav-li{
width: 160px;
height: auto;
border-bottom: 1px solid #FFF;
background: #333;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 16px;
cursor: pointer;
}
.tit{
width: 160px;
height: 40px;
}
.nav-li:hover ul{
display: block;
}
.nav-li ul{
width: 160px;
height: auto;
background: #FFF;
display: none;
}
.nav-li ul li{
width: 160px;
height: 40px;
border-bottom: 1px dashed #666;
color: #333;
text-align: center;
line-height: 40px;
position: relative;
}
.nav-li ul li:hover .list-3{
display: block;
}
.list-3{
width: 160px;
height: auto;
position: absolute;
left: 160px;
top: 0px;
display: none;
}
.list-3Dom{
width: 160px;
height: 40px;
background: #444;
border-bottom: 1px solid #FFF;
text-align: center;
line-height: 40px;
color: #FFF;
}
</style>
</head>
<body>
<div class="page">
<div class="nav">
<div class="nav-li">
<div class="tit">yh網的標題</div>
<ul>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">yg網的標題</div>
<ul>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">yg的標題</div>
<ul>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">33網的標題</div>
<ul>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">6756的標題</div>
<ul>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
<li>
二級欄目
<div class="list-3">
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
<div class="list-3Dom">三級欄目</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
NEXT:
頁面佈局：
多行佈局，多列布局，聖盃佈局，雙飛翼佈局。
相關文章
- 元素的相對定位與絕對定位
- 1-相對定位、絕對定位和固定定位的區別
- CSS中的絕對定位與相對定位CSS
- html中的定位HTML
- CSS的定位：positionCSS
- iOS 地圖定位 定位iOS地圖
- css絕對定位和相對定位的差別CSS
- css中絕對定位與相對定位的區別CSS
- 定位
- 元素的固定定位
- RoR的正確定位
- 劫持GPS定位&劫持WIFI定位WiFi
- 導航定位向高精定位的演進與實踐
- 【Web前端基礎知識】CSS的定位機制之定位Web前端CSS
- JavaScript 滾動條定位指定位置JavaScript
- LSM的儲存和定位
- css中背景定位的方法CSS
- Cypress 基礎 - 元素的定位
- selenium中的xpath定位
- 【CSS】【11】CSS盒子的定位CSS
- Android的GPS定位Android
- 關於鎖的快速定位
- 三個市場的定位
- CSS定位CSS
- 元素定位
- CSS——定位CSS
- Position定位
- iOS 定位iOS
- TBM定位
- 重定位
- 爬蟲之xpath精準定位--位置定位爬蟲
- css的佈局的定位（瞭解）CSS
- 不生成core檔案的記憶體越界快速定位方法/記憶體越界定位/地址崩潰定位方法記憶體
- 業務測開的尷尬定位
- 淺談CSS中的Position(定位)CSS
- CSS background position 背景定位的用法CSS
- JVM（三）——物件的訪問定位JVM物件
- 定位SQL的執行次數SQL