position屬性實現絕對定位
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
width:100%;
height:100%;
}
#block{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute; /* absolute絕對定位 */
left:20px; /* 塊的左邊框離頁面左邊界20px */
top:40px; /* 塊的上邊框離頁面上邊界40px */
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block">absolute</div>
</div>
</body>
</html>
以上的代碼我們可以看出父塊#father沒有設置position屬性,而子塊#block采用的是絕對定位,經過測試發現子塊#block參照瀏覽窗口左上角
為原點,子塊左邊框相對頁面<body>左邊的距離為20px,子塊的上邊框相對頁面<body>上面的距離為40px
為父塊這是position屬性
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
position:relative;
width:100%;
height:100%;
}
我們發現子塊的參照物為父塊的#father,距左側20px,距上端40px
注意top、right、bottom、left這4個CSS屬性,它們都是配合position屬性使用的,表示的是塊的各個邊界離頁面邊框(position設置為absolute時)
或者原來的位置(position設置為relative)的距離。只有當position屬性設置為absolute或者relative時才能生效;
用position屬性實現相對定位
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
width:100%; height:100%;
padding:5px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative; /* relative相對定位 */
left:15px; /* 子塊的左邊框距離它原來的位置15px */
top:10%;
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block1">relative</div>
</div>
</body>
</html>
我們可以看到字塊的左邊框相對于其父塊的左邊框(它原來所在的位置)距離為15px,上邊框也是一樣的道理,為10%;
理解"它原來的位置":子塊和父塊原先的位置的是一致的(因為父塊包含字塊,視覺上看是幾乎重疊的)
此時子塊的寬度依然是未移動前的寬度,撐滿未移動前父塊的內容。只是由于向右移動了,因此右邊框超出了父塊。
如果希望子塊的寬度僅僅為其內容加上自己的padding值,可以將它的float屬性設置為left,或者指定其寬度width;
案例: 文本在圖片上顯示
在HTML中,存在這許許多多的元素(同:”HTML標簽”),這些元素最終可分為三類,分別是塊級元素,內聯元素(同:”行內元素”),塊級內聯元素(同:”行內塊元素”)。
你對這些元素是否真的了解呢?
我們來看看這三類元素的特點:
一.特點
1.每個塊級元素都從新的一行開始顯示(塊級元素獨占一行)
2.元素的寬度,高度,內邊距(padding),邊框(border),外邊框(margin)都能隨意設置
3.塊級元素在網頁中所占面積=內容區(content)+內邊距(padding)+邊框(border)+外邊距(margin)
4.塊級元素本身未設置寬度的情況下,寬度=父元素寬度-該元素的左右外邊距-該元素的左右邊框-該元素的左右內邊距
5.塊級元素未設置padding和border的情況下,padding和border的數值為0
6.塊級元素未設置寬度和外邊距的情況下,margin的值為0,寬度為100%(即與父元素寬度一致)
7.塊級元素設置寬度但未設置外邊距的情況下,左外邊距的值為0
8.塊級元素設置寬度,未設置padding和border,同時設置margin: 0 auto的情況下,左右外邊距平分 父元素寬度-該元素寬度所剩余的空間
9.塊級內聯元素不受父元素的line-height以及自身的vertical-align影響
二.將非塊級元素轉換成塊級元素的方法
1.display:block
2.float:left或right
3.position:absolute或fixed
4.父元素使用display:flex,子元素會變為塊級元素
三.常見塊級元素
<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<address>,<blockquote> ,<form>
一.特點
1.當父元素寬度足以放下多個內聯元素時,一行內可以顯示多個內聯元素,否則放不下的內聯元素將另起一行(一行存放多個內聯元素)
2.內聯元素的寬度,高度由該元素的內容撐開
3.內聯元素的寬度/高度/padding-top/border-top/margin-top/margin-bottom設置無效
4.如果padding/border/margin未設置的情況下,全部為0
5.內聯元素受父元素的line-height以及自身的vertical-align影響
二.將非內聯元素轉換成內聯元素的方法
使用display:inline
三.常見內聯元素
<a>,<span>,<i>,<br>,<strong>,<em>
一.特點
1.當父元素寬度足以放下多個塊級內聯元素時,一行內可以顯示多個塊級內聯元素,否則放不下的塊級內聯元素將另起一行(一行存放多個塊級內聯元素)
2.塊級內聯元素的寬度,高度,內邊距(padding),邊框(border),外邊框(margin)都能隨意設置
3. 塊級內聯元素的寬度,高度未設置的情況下,由該元素的內容撐開
4.塊級內聯元素受父元素的line-height以及自身的vertical-align影響
二.將非內聯元素轉換成內聯元素的方法
使用display:inline-block
三.常見內聯元素
<input>
web前端之二叉搜索樹
、HTML 塊元素
二、HTML 內聯元素
三、HTML <div> 元素
四、div的使用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <style> .all{ width:500px; height:500px; margin:0 auto; background-color:#000; } .one{ height:100px; background-color:#89E1BF; } .two{ height:100px; background-color:#DEE099; } .three{ height:100px; background-color:#D7A1CE; } </style> <body> <!--父div,all是黑色--> <div class="all"> <!--子div,one是綠色--> <div class="one"> </div> <!--子divtwo,是黃色--> <div class="two"> </div> <!--子div,three是紫色--> <div class="three"> </div> </div> </body> </html>
演示效果如圖所示:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。