HTML CSS 層疊樣式表 四
阿新 • • 發佈：2017-05-31
技術分享 清除 上層 -1 絕對定位 有序 定位 color abs
一、頁面布局：div+css布局
1.<style >
*{
margin:0px;
padding:0px;
}
#ad{
width:100px;
height:100px;
background-color:red;
position:fixed; 定位：固定定位，需要設置距離邊框的距離；相對於瀏覽器窗口位置固定
right:0px;
top:100px;
}
.class{
float:left; 流式布局：從左往右。right從右往左。如果有序號，也會從右往左排。
position:relative; 定位：相對定位，相對於周邊其他元素的定位；默認，一般不寫，需要設置z-index分層時必須寫。
}
.class2{
min-width:500px; 給流式布局設置一個外框寬度設置成百分比，然後給這個外框一個最小寬度，可以防止流式布局的元素發生換行。一般用於響應式布局，以適合不同的瀏覽器和設備。
}
.class3{
position:absolute; 定位：絕對定位；需要制定靠著誰,如果外層元素未定位會相對於瀏覽器定位。
right:0px;
bottom:0px;
z-index:-1; z軸定位，需要跟隨定位
}
</style>
<div>
<div style="clear:both;"></div>
</div>
利用清除浮動屬性將上層div撐開，有多高的元素上層div就多高；
二、課上練習
<style>
* {
margin:0px; /*去掉所有元素的內外邊框*/
padding:0px;
}
#ad {
width:100px;
height:100px;
background-color:red;
position:fixed; /*絕對定位 以瀏覽器窗口作為基準
<body>
<div id="ad"></div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="sup"></div>
<div style="clear:both"></div> <!--外部DIV不需要設置寬度，有多少內容就放多大-->
</div>
<p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p>
<p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p>
<p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p>
<p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p>
<p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p><p>甲乙丙</p>
</body>
三、網頁效果圖
HTML CSS 層疊樣式表 四