css的postion屬性

時間 2019-12-04

標籤 css postion 屬性欄目 CSS 简体版

原文原文鏈接

首先，來段代碼進行css的postion屬性的學習之路。css

<html>
<head>
<title> position </title>
<style>
body { margin: 0px; padding: 0px; color: white; text-align: right; }
.box { width: 50px; border: dotted yellow; }
.square { width: 100px; height: 100px; }
.r { background-color: red; }
.g { background-color: green; }
.b { background-color: blue; }
#l { float: left; }
#r { float: right; }
#abs { position: absolute; top: 150px; left: 50px; }
#rel { position: relative; top: 150px; left: -50px; }
</style>
</head>

<body>
<div class="box" id="l">
	<div class="r" class="square" id="abs">R</div>
	<div class="g" class="square">G</div>
	<div class="b" class="square">B</div>
</div>
<div class="box" id="r">
	<div class="r" class="square" id="rel">R</div>
	<div class="g" class="square">G</div>
	<div class="b" class="square">B</div>
</div>
</body>
</html>

其實這段代碼寫的不是很規範，例如document,meta等，咱們就先忽視這個問題。。。html

postion屬性有四個值，分別是static，absolute， relative， fixed。其中static和relative兩個屬性值是跟文檔流有關，其餘兩個跟文檔流無關。那麼什麼是叫文檔流呢？個人理解是文檔流就是對文檔的讀入和輸出順序，例如上述所貼的代碼，box類下有三個div，若是咱們忽視它們的css樣式，那麼它們在瀏覽器的展現方式是從上到下是R,G,B，而且每個佔用一層。web
static，默認的position值，若是對元素進行TLBR操做，是不起任何做用的（怪不得剛開始沒設置position的值，根本沒發生偏移，囧）。瀏覽器
relative，相對定位。其實這裏的相對定位，是相對它自己在正常文檔流的位置的偏移，儘管偏移了，它本來在正常文檔流的位置還在保存着，例如上例的結果，你在瀏覽器中能夠看到右上角的L的位置還存在，儘管L已經飄走了。因此儘管L進行了相對定位，可是它的存在仍是對G和B有影響，並不抽離出文檔流。app
absolute，絕對定位。這裏的絕對定位，是指它自己被抽離出文檔流，即一旦它的positive設置爲absolute，它原先在文檔流中所佔的位置就被其餘的元素所佔用。那麼對它進行TLBR操做則是怎麼定位呢？它會首先尋找距離它最近的父元素，而且該父元素的position屬性值不爲static，若是查找不到，ok，這是它就會相對body進行TLBR操做。post
fixed，該屬性值相對於瀏覽器窗口，所以拖動滾動條不影響它在窗口中的位置。學習

之因此研究position是由於看到了阿里2014的一個線上筆試題，以下：測試

有兩個盒子A和B，其中B在A盒子內，如今要求實現B在A中水平方向和垂直方向均居中。code

.A {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: green;}
.B {
    position: absolute;
    max-width: 300px;
    max-height: 300px;
    background-color: blue;}

這裏設定A爲寬度和高度必定的relative定位，B相對A進行TLBR操做使其相對A居中。htm

剛開始拿到這題時，我把它想的巨簡單，既然B的父元素A相對定位，那麼把B相對A的top進行50%，left進行50%偏移，不就居中了麼？而後很happy的測試一下，果真居中，好吧，其實只是B的左上角座標居中，當B中有content、border、padding中任何一項內容時，就不知足要求了，仍是繼續思考怎麼解決。

接下來想到一種比較暴力的方法，由於題中並無要求用的是CSS解決這個問題，因此想到了用JS實現。首先計算出A的寬度，固然這個寬度是padding+border+content。先把代碼貼上，明天繼續分析。

<script>
			var b = document.getElementsByClassName('B')[0];
			var a = document.getElementsByClassName('A')[0];
			var width = b.offsetWidth; 
			var height = b.offsetHeight;
			var w = a.offsetWidth;
			var h = a.offsetHeight;
			b.style.marginLeft = (w - width) / 2 + 'px';
			b.style.marginTop = (h - height) / 2 + 'px';
		</script>

後來在網上看到有種解法，把B的position從新設置爲非absolute，而後添加A的css樣式

.A {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;}

這樣也能解決問題，但是我以爲既然題目要求A是relative，B是absolute，篡改題意這種作法不可取

1. css的postion屬性
2. Css POSTION Left top
3. CSS content 屬性 CSS counter-increment 屬性 CSS counter-reset 屬性
4. CSS position屬性、float屬性
5. css的position屬性
6. css的background屬性
7. CSS 的 appearance 屬性
8. css的direction屬性
9. CSS的display屬性
10. CSS的zoom屬性
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 互聯網組織的未來：剖析GitHub員工的任性之源
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。