11.21 CSS學習-下午
CSS框模型，看似一個盒子，封裝周圍的HTML元素，包括：邊距、邊框、填充和實際內容
Margin：清除邊框區域，沒有背景色，完全透明
Border：邊框周圍的填充和內容，邊框是受到盒子的背景色影響
Padding：清除內容周圍的區域，會受到框中填充的背景顏色影響
Content：盒子的內容，顯示文本和圖像
指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度，要知道，完全大小的元素，你還必須添加填充，邊框和邊距。
div.ex{
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 5px;
}
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
邊框屬性：允許指定一個元素邊框的樣式和顏色
border-style邊框樣式：指定顯示什麽樣的邊界
dotted:點線邊框
dashed:虛線框
solid:實線框
double:定義兩個邊界框
groove:3D溝槽邊界
ride:3D脊邊界
inset:3D嵌入邊框
outset:3D突出邊框
border-width邊框寬度
指定寬度的兩種方法：1）指定值，如1px、1em；2）使用3個關鍵字之一，thin,medium,thick
border-color邊框顏色
單獨設置邊框：指定不同的側面不同的邊框
border-top-style: groove;
border-right-style: solid;
border-bottom-style: groove;
border-left-style: solid;
也可以一次設置單一屬性：border-style:dotted solid double dashed;
border-style有四個值，分別表示上、右、下、左四個位置
outline:用於繪制元素周圍的一條線，位於邊框邊緣的外圍
分組和嵌套
樣式表中有很多具有相同樣式的元素，可以將這些分配到一個組裏面。使用分組選擇器，每個選擇器用逗號分開。
h1,h2,p
{
color:green;
}
嵌套選擇器：選擇器內部的選擇器樣式
在下面的例子，為所有p元素指定一個樣式，為所有元素指定一個class="marked"的樣式，並僅用於class="標記"，類內的p元素指定第三個樣式
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
CSS顯示（display）與可見性（visibility）
visibility屬性指定一個元素可見或隱藏，但是仍然會影響格局
{visibility: hidden}
display:沒有隱藏的元素，不會占用任何空間
{display: none}
Positioning定位：為一個元素定位，要首先設定position的屬性，有四種不同的定位方法
Static定位：HTML的默認定位，即沒有定位，元素出現正常流中，不會受到top,bottom,left,right影響
Fixed定位：元素的位置相對於瀏覽器窗口是固定的位置，窗口的滾動他也不會移動
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Relative定位：相對定位元素的定位是相對其正常位置
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Absolute定位：絕對定位的元素的位置相對於最近的已定位父元素，如果沒有已定位的父元素，則它的位置相對於<html>
h2
{
position:absolute;
left:100px;
top:150px;
}
11.21 CSS學習-下午