CSS 教程（2）-属性4-边框,轮廓,Margin,Padding等

1.CSS 边框属性
CSS边框属性允许你指定一个元素边框的样式和颜色。

• 边框样式
  边框样式属性指定要显示什么样的边界。
  border-style属性用来定义边框的样式

border-style 值:
none: 默认无边框
dotted: dotted:定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

• 边框宽度
  您可以通过 border-width 属性为边框指定宽度。
  为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

• 边框颜色
  border-color属性用于设置边框的颜色。可以设置的颜色：
  name - 指定颜色的名称，如 "red"
  RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
  Hex - 指定16进制值, 如 "#ff0000"
  您还可以设置边框的颜色为"transparent"。
  注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

• 边框-单独设置各边
  在CSS中，可以指定不同的侧面不同的边框：

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
    border-bottom-color: red;
}

• 边框-简写属性
  上面的例子用了很多属性来设置边框。
  T你也可以在一个属性中设置边框。
  你可以在"border"属性中设置：
  border-width
  border-style (required)
  border-color

border:5px solid red;

2.CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

• outline 在一个声明中设置所有的轮廓属性

p 
{
    border:1px solid red;
    outline:green dotted thick;
}

• outline-color 设置轮廓的颜色
• outline-style 设置轮廓的样式
• outline-width 设置轮廓的宽度

p.one
{
    border:1px solid red;
    outline-style:solid;
    outline-width:thin;
}

3.CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间。
margin没有背景颜色，是完全透明的
margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
Margin可以使用负值，重叠的内容。

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

4.CSS Padding（填充）
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

p.ex1 {padding:2cm;}
p.padding {padding-bottom:2cm;}

5.所有CSS 尺寸属性
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

6.CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

• 隐藏元素 - display:none或visibility:hidden
  隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
  visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
  display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

• CSS Display - 块和内联元素
  块元素是一个元素，占用了全部宽度，在前后都是换行符。
  块元素的例子：
  

  
  

  
  

  
  内联元素只需要必要的宽度，不强制换行。
  内联元素的例子：
  
  
  如何改变一个元素显示
  可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
  下面的示例把列表项显示为内联元素：

li {display:inline;}

下面的示例把span元素作为块元素：

span {display:block;}

注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。