CSS总结：

给一个div加上边框，为了让他能看到边框，给他加上颜色

border: 2px solid;
border-color: #00a1e9;

solid表示实线边框。没有这个看不到边框。

{border-style: solid}

例子：

<html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>

<body>
<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>
</body>

</html>

2，给div中加上文字，为了让文字在一行出现：

规定文字不换行：white-space:按钮就是利用这个属性使得按钮里的文字在一条线上。

{
  white-space: nowrap
  }

3，为了使得边框离文字有距离，可设置padding，按钮也是利用这个。

padding: 4px 8px;

4，使得文章成为块！此元素将显示为块级元素，此元素前后会带有换行符

display:block

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。（CSS2.1 新增的值）

5，

overflow 属性

设置 overflow 属性：

div
  {
  150px;
  height:150px;
  overflow:scroll;
  }

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

position 属性

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 规定应该从父元素继承 position 属性的值。

right 属性

把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置：

img
  {
  position:absolute;
  right:5px;
  }

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

left同理。