css的核心內容：標準流、盒子模型、浮動、定位

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

原文地址：http://www.cssk8.com/html/css_Tutorial/200910/13-1598.html

css的核心內容：標準流、盒子模型、浮動、定位（可以說不理解這些概念絕做不出合適的網頁）
1、區塊層級元素：如：<div></div>
2、行內元素：如：<span></span>
從效果中看區塊層級元素與行內元素的區別：

通過CSS的設定把行內元素轉換成區塊層級元素：

標準流：就是標籤的相片順序。
<div class="style2">我的未來不是夢</div>
<span id="st" class="style1">欄目一</span>
<span class="style2">欄目二</span>
<br />
<span class="guaiji style3">陽光男孩</span>
<span class="style3">欄目三</span>
以上是標籤的一個相片順序，以下是網頁內容的呈現方式，它是以標籤的相片順序來呈現的

這就是我們對標準流的理解（就象流水，排在前面的標籤內容前面出現，排後面的標籤內容後面出現）

盒子模型：

下面在CSS樣式檔案中設定邊框border：
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
}
.guaiji
{
display: block;
}

以上對邊框的設定可以簡寫為：border:2px blue solid;運行效果一樣。
下面設定內邊距padding:
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
}
.guaiji
{
display: block;
}

以上出現邊框線不平的現象是把行內元素轉換成區塊層級元素所產生的不良效果
下面設定外邊距margin
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:4px;
}
.guaiji
{
display: block;
}

要注意的是：行內元素對於某些樣式的設定是不起作用的比如：margin
下面對內容設定：
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:5px;
width:200px;
height:70px;
}
.guaiji
{
display: block;
}
頁面效果如下：

以上發現行內元素不起作用，進一步說明行內樣式對於某些樣式是不支援的
浮動：設定float:left;即讓下面盒子靠在上面流動盒子的左邊緣
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:5px;
width:200px;
height:40px;
line-height:40px;
vertical-align:middle;
float:left;
}
.guaiji
{
display: block;
}
頁面效果如下：

設定浮動之後，內容的排列已屬於非標準流排列
不想對style3進行左浮動，可以清除浮動：
.style3
{
color: #00bbdd;
clear:left;
}
效果如下：

定位：下面對欄目一進行相對定位，位移量為top:50px;（即相對於原來的位置進行位移）
.style2
{
color: #ff0000;
position:relative;
top:50px;
}
效果如下：

改成絕對位置：
.style1
{
color: #0000ff;
position:absolute;
top:70px;
}
效果如下：

絕對位置是以其所在標籤的父標籤進行定位，如果其外面沒有別的區塊層級元素標籤則以<body></body>為父標籤進行定位

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More