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;
}
