CSS 基礎入門語法

時間 2019-11-09

標籤 css 基礎入門語法欄目 CSS 简体版

原文原文鏈接

盒模型--邊框

盒子模型的邊框就是圍繞着內容及補白的線，這條線你能夠設置它的粗細、樣式和顏色(邊框三個屬性)。css

以下面代碼爲 div 來設置邊框粗細爲 2px、樣式爲實心的、顏色爲紅色的邊框：html

div{
    border:2px  solid  red;
}

上面是 border 代碼的縮寫形式，能夠分開寫：chrome

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意：瀏覽器

一、border-style（邊框樣式）常見樣式有：編輯器

dashed（虛線）| dotted（點線）| solid（實線）。佈局

二、border-color（邊框顏色）中的顏色可設置爲十六進制顏色，如:學習

border-color:#888;//前面的井號不要忘掉。

三、border-width（邊框寬度）中的寬度也能夠設置爲：spa

thin | medium | thick（但不是很經常使用），最常仍是用象素（px）。設計

盒模型--邊框

如今有一個問題，若是有想爲 p 標籤單獨設置下邊框，而其它三邊都不設置邊框樣式怎麼辦呢？css 樣式中容許只爲一個方向的邊框設置樣式：code

div{border-bottom:1px solid red;}

一樣可使用下面代碼實現其它三邊(上、右、左)邊框的設置：

border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

盒模型--寬度和高度

盒模型寬度和高度和咱們日常所說的物體的寬度和高度理解是不同的，css內定義的寬（width）和高（height），指的是填充以裏的內容範圍。

所以一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

元素的高度也是同理。

好比：

css代碼：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

html代碼：

<body>
   <div>文本內容</div>
</body>

元素的實際長度爲：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可查看元素盒模型，以下圖：

盒模型--邊界

元素與其它元素之間的距離可使用邊界（margin）來設置。邊界也是可分爲上、右、下、左。以下代碼：

div{margin:20px 10px 15px 30px;}

也能夠分開寫：

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

若是上右下左的邊界都爲10px;能夠這麼寫：

div{ margin:10px;}

若是上下邊界同樣爲10px，左右同樣爲20px，能夠這麼寫：

div{ margin:10px 20px;}

總結一下：padding和margin的區別，padding在邊框裏，margin在邊框外。

css佈局模型

清楚了CSS 盒模型的基本概念、盒模型類型，咱們就能夠深刻探討網頁佈局的基本模型了。佈局模型與盒模型同樣都是 CSS 最基本、最核心的概念。但佈局模型是創建在盒模型基礎之上，又不一樣於咱們常說的 CSS 佈局樣式或 CSS 佈局模板。若是說佈局模型是本，那麼 CSS 佈局模板就是末了，是外在的表現形式。
CSS包含3種基本的佈局模型，用英文歸納爲：Flow、Layer 和 Float。
在網頁中，元素有三種佈局模型：

一、流動模型（Flow）

第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，由於在默認狀態下，塊狀元素的寬度都爲100%。實際上，塊狀元素都會以行的形式佔據位置。如右側代碼編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示爲100%。

第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）

二、浮動模型 (Float)

三、層模型（Layer）

什麼是層模型？

什麼是層佈局模型？層佈局模型就像是圖像軟件PhotoShop中很是流行的圖層編輯功能同樣，每一個圖層可以精肯定位操做，但在網頁設計領域，因爲網頁大小的活動性，層佈局沒能受到熱捧。可是在網頁上局部使用層佈局仍是有其方便之處的。下面咱們來學習一下html中的層佈局。

如何讓html元素在網頁中精肯定位，就像圖像軟件PhotoShop中的圖層同樣能夠對每一個圖層可以精肯定位操做。CSS定義了一組定位（positioning）屬性來支持層佈局模型。

層模型有三種形式：

一、絕對定位(position: absolute)

若是想爲元素設置層模型中的絕對定位，須要設置position:absolute(表示絕對定位)，這條語句的做用將元素從文檔流中拖出來，而後使用left、right、top、bottom屬性相對於其最接近的一個具備定位屬性的父包含塊進行絕對定位。若是不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。

以下面代碼能夠實現div元素相對於瀏覽器窗口向右移動100px，向下移動50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

二、相對定位(position: relative)

層模型--相對定位

若是想爲元素設置層模型中的相對定位，須要設置position:relative（表示相對定位），它經過left、right、top、bottom屬性肯定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(而且元素像層同樣浮動了起來)，而後相對於之前的位置移動，移動的方向和幅度由left、right、top、bottom屬性肯定，偏移前的位置保留不動。

以下代碼實現相對於之前位置向下移動50px，向右移動100px;

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

效果圖：

什麼叫作「偏移前的位置保留不動」呢？

你們能夠作一個實驗，在右側代碼編輯器的19行div標籤的後面加入一個span標籤，在標並在span標籤中寫入一些文字。以下代碼：

<body>
    <div id="div1"></div><span>偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置</span>
</body>

效果圖：

從效果圖中能夠明顯的看出，雖然div元素相對於之前的位置產生了偏移，可是div元素之前的位置仍是保留着，因此後面的span元素是顯示在了div元素之前位置的後面。

三、固定定位(position: fixed)

層模型--固定定位

fixed：表示固定定位，與absolute定位類型相似，但它的相對移動的座標是視圖（屏幕內的網頁窗口）自己。因爲視圖自己是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，所以固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。如下代碼能夠實現相對於瀏覽器視圖向右移動100px，向下移動50px。而且拖動滾動條時位置固定不變。

Relative與Absolute組合使用

小夥伴們學習了12-6小節的絕對定位的方法：使用position:absolute能夠實現被設置元素相對於瀏覽器（body）設置定位之後，你們有沒有想過可不能夠相對於其它元素進行定位呢？答案是確定的，固然能夠。使用position:relative來幫忙，可是必須遵照下面規範：

一、參照定位的元素必須是相對定位元素的前輩元素：

<div id="box1"><!--參照定位的元素-->
    <div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>

從上面代碼能夠看出box1是box2的父元素（父元素固然也是前輩元素了）。

二、參照定位的元素必須加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

三、定位元素加入position:absolute，即可以使用top、bottom、left、right來進行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

這樣box2就能夠相對於父元素box1定位了（這裏注意參照物就能夠不是瀏覽器了，而能夠自由設置了）。

相關標籤/搜索

每日一句

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