當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
HTML+CSS+JavaScript复习笔记持更（十）——CSS3常用属性之定位
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JavaScript复习笔记持更（十）——CSS3常用属性之定位
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
定位
定位主要是用來設定元素在頁面上的位置的，其代碼為：position
定位有三種定位方式：
- static（無特殊定位，按照dom排序）
- absolute（絕對定位，往前面找最近的，有定位屬性的元素，以該元素的起點為起點，絕對定位）（脫離文檔流，其他元素將會占用該元素的原有位置）
- relative（相對定位，相對自己原來在dom元素中的位置定位）（不脫離文檔流）
- fixed（絕對定位，相對瀏覽器顯示區域）（脫離文檔流）
其中在一般的頁面中，最常用的就是relative+absolute，在父元素設置relative絕對定位，在子元素設置absolute相對定位，即子絕父相。
設置了position：relative；定位屬性之后，通過left、right、top、bottom來設置相對四個方向的位移，即可達到定位的需求
語法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}div{width: 200px;height: 200px;}.x1{position: relative;background-color: chartreuse;left: 100px;}.x2{background-color: red;position: absolute;left: 200px;}</style> </head> <body><div class="x1">我是x1<div class="x2">我就是x2</div></div> </body> </html>效果圖：
可以設置的單位有px、%
浮動
浮動主要是針對塊級元素說的，對塊級元素設置float屬性后，該元素處于不完全脫離文檔流狀態。
不完全脫離文檔流：使元素漂浮起來，但還保留著自身的位置，其他元素能往上拼接，但是不能占有。
簡單的說，就是讓別的元素環繞在自己身邊。
在float中有兩種設置，left、right，分別是左浮動和右浮動
浮動這種特殊的不完全脫離文檔流將會極大地破壞原有的文檔流位置，所以為了去除這種影響，我們可以在下面的元素設置清除浮動：clean：both；
語法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.x1{width: 1200px;height: 200px;position: relative;background-color: chartreuse;left: 100px;}.x2{ width: 600px;height: 200px;background-color: red;float: left;}.x3{width: 200px;height: 200px;clear: both;background-color: rgb(53, 104, 172);}</style> </head> <body><div class="x1">我是x1<div class="x2">我就是x2</div><div class="x3">我就是x3</div></div> </body> </html>效果圖：
由于x2這個元素設置了float:left;所以x2浮動起來，跑到x1的最左邊，x3也因為x2的浮動而把起點上浮，但是因為x1的不完全脫離文檔流會保留自身位置，所以x3不能占有x1的內容區，因而有一點點在下面顯示。
當我打開x3的清除浮動clear: both;，x3就會恢復正常，在下面顯示
總結
以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（十）——CSS3常用属性之定位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML+CSS+JavaScript复
- 下一篇： mac安装nvm及换源及node安装切换