整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
絕對定位和相對定位的區別：
1、參照物不同，絕對定位的參照物是包含塊（已定位的父元素），相對定位的參照物是元素本身默認的位置；
2、絕對定位將對象從文檔流中脫離出來因此不占據空間，相對定位不破壞正常的文檔流順序無論是否進行移動，元素仍然占據原來的空間。
包含塊是絕對定位的基礎，包含塊就是為定位元素提供坐標，偏移和顯示范圍的參照物，即確定絕對定位的偏移起點和百分比 長度的參考； ?
默認狀態下，html是一個大的包含塊，所有絕對定位的元素都是根據窗口來定自己所處的位置和百分比大小的顯示的，如果我們定義了包含元素為包含元素塊以后，對于被包含的絕對定位元素來說，就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。 ?
定義元素為包含塊：給絕對定位元素的父元素添加聲明position：relative；
z-index : auto |number ?
檢索或設置對象的層疊順序。
auto：默認值。
number:無單位的整數值。可為負數
沒有設置z-index時，最后寫的對象優先顯示在上層，設置后，數值越大，層越靠上；
讓一個元素始終在窗口水平、垂直位置居中：
div {
width: 200px;
height: 200px;
background: #f00;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}div {
width: 200px;
height: 200px;
background: #f00;
position: fixed;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
}命名錨點鏈接的應用： ?
命名錨點的作用：在同一頁面內的不同位置進行跳轉。
制作錨標記：
1)給元素定義命名錨記名
語法：<標記 id="命名錨記名"> </標記>
?
2)命名錨記連接
語法：<a href="#命名錨記名稱"></a>
SS 定位 (Positioning) 屬性允許你對元素進行定位。
CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝于對其它方面的支持，對此不應感到奇怪。
另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發展初期增加的一個功能為基礎。浮動不完全是定位，不過，它當然也不是正常流布局。我們會在后面的章節中明確浮動的含義。
div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。
您可以使用 display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設置為 block，可以讓行內元素（比如 <a> 元素）表現得像塊級元素一樣。還可以通過把 display 設置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不占用文檔中的空間。
但是在一種情況下，即使沒有進行顯式定義，也會創建塊級元素。這種情況發生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：
<div>
some text
<p>Some more text.</p>
</div>在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。
塊級元素的文本行也會發生類似的情況。假設有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應用樣式，因為沒有可以應用樣式的地方（注意，行框和行內框是兩個概念）。但是，這有助于理解在屏幕上看到的所有東西都形成某種框。
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
在下面的章節，我們會為您詳細講解相對定位、絕對定位和浮動。
通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。
position 屬性值的含義：
static元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。relative元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。absolute元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。fixed元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。
提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
定位 h2 元素：
代碼如下：
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標題</h2>
<p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p>
</body>
</html>效果圖如下：
所有主流瀏覽器都支持 position 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
position 屬性規定元素的定位類型。
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
默認值： | static |
繼承性： | no |
版本： | CSS2 |
JavaScript 語法： | object.style.position="absolute" |
值 | 描述 |
absolute | 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
relative | 生成相對定位的元素，相對于其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 |
static | 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
inherit | 規定應該從父元素繼承 position 屬性的值。 |
天小編為大家介紹五種css樣式布局以及內服源代碼作為介紹，采用的方式是行內級樣式（就是將css樣式代碼與html寫在一起）
已知布局元素的高度，寫出三欄布局，要求左欄、右欄寬度各為300px，中間自適應。
一、浮動布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮動布局</title>
<style type="text/css">
.wrap1 div{
min-height: 200px;
}
.wrap1 .left{
float: left;
width: 300px;
background: red;
}
.wrap1 .right{
float: right;
width: 300px;
background: blue;
}
.wrap1 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="left"></div>
<div class="right"></div>
<div class="center">
浮動布局
</div>
</div>
</body>
</html>
浮動布局的兼容性比較好，但是浮動帶來的影響比較多，頁面寬度不夠的時候會影響布局。
二、絕對定位布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對定位布局</title>
<style type="text/css">
.wrap2 div{
position: absolute;
min-height: 200px;
}
.wrap2 .left{
left: 0;
width: 300px;
background: red;
}
.wrap2 .right{
right: 0;
width: 300px;
background: blue;
}
.wrap2 .center{
left: 300px;
right: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="wrap2 wrap">
<div class="left"></div>
<div class="center">
絕對定位布局
</div>
<div class="right"></div>
</div>
</body>
</html>
絕對定位布局快捷，但是有效性比較差，因為脫離了文檔流。
三、flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex布局</title>
<style type="text/css">
.wrap3{
display: flex;
min-height: 200px;
}
.wrap3 .left{
flex-basis: 300px;
background: red;
}
.wrap3 .right{
flex-basis: 300px;
background: blue;
}
.wrap3 .center{
flex: 1;
background: pink;
}
</style>
</head>
<body>
<div class="wrap3 wrap">
<div class="left"></div>
<div class="center">
flex布局
</div>
<div class="right"></div>
</div>
</body>
</html>
自適應好，高度能夠自動撐開
四、table-cell表格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table-cell表格布局</title>
<style type="text/css">
.wrap4{
display: table;
width: 100%;
height: 200px;
}
.wrap4>div{
display: table-cell;
}
.wrap4 .left{
width: 300px;
background: red;
}
.wrap4 .right{
width: 300px;
background: blue;
}
.wrap4 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap4 wrap">
<div class="left"></div>
<div class="center">
表格布局
</div>
<div class="right"></div>
</div>
</body>
</html>
兼容性好，但是有時候不能固定高度，因為會被內容撐高。
五、網格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>網格布局</title>
<style type="text/css">
.wrap5{
display: grid;
width: 100%;
grid-template-rows: 200px;
grid-template-columns: 300px auto 300px;
}
.wrap5 .left{
background: red;
}
.wrap5 .right{
background: blue;
}
.wrap5 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap5 wrap">
<div class="left"></div>
<div class="center">
網格布局
</div>
<div class="right"></div>
</div>
</body>
</html>
希望大家可以一直關注我，支持我！感謝！！！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
