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的定位：positionCSS
- html中的定位HTML
- css絕對定位和相對定位的差別CSS
- iOS 地圖定位 定位iOS地圖
- 劫持GPS定位&劫持WIFI定位WiFi
- selenium中的xpath定位
- 定位
- 導航定位向高精定位的演進與實踐
- 【Web前端基礎知識】CSS的定位機制之定位Web前端CSS
- LSM的儲存和定位
- Cypress 基礎 - 元素的定位
- css中背景定位的方法CSS
- JavaScript 滾動條定位指定位置JavaScript
- GPS定位
- Position定位
- CSS定位CSS
- CSS——定位CSS
- 重定位
- 元素定位
- ipad定位在哪裡開？ipad平板定位服務的開啟方法iPad
- Python全棧Web（定位佈局、定位方式）Python全棧Web
- 爬蟲之xpath精準定位--位置定位爬蟲
- 不生成core檔案的記憶體越界快速定位方法/記憶體越界定位/地址崩潰定位方法記憶體
- 聊聊產品的重新定位
- 淺談CSS中的Position(定位)CSS
- 【定位不準的煩心事系列】第1篇：談談衛星定位的位置干擾
- 使用 uiautomatorviewer 定位頁面元素，底部無法定位，求求懂的大佬幫忙看下UIView
- 小程式定位
- CSS_定位CSS
- 個人定位
- css之定位CSS
- CSS-定位CSS
- 浮動、定位
- appium元素定位APP
- Java高精度定位系統原始碼 UWB定位系統原始碼 定位系統原始碼Java原始碼
- MySQL 5.7定位消耗CPU高的SQLMySql
- 基於Fixed定位的框選功能