<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>无标题文档</title>
<style type="text/css">
#c1{
width:70px
height:30px
border:solid 1px #CCC}
</style>
</head>
<body>
<div id="c1"></div>
</body>
</html
这里 就能写出一个框70px,高30px，的方框了，如果要调整方框的大小，直接改width和height的值就行
用display:inline-block实现。这个属性通俗一点的解释就是让块级元素可以在一行显示。既是块级元素又可以在同一行显示就可以设置display:inline-block.我们看下面的代码是如何来实现分割线的效果。优点：文字可多行显示，始终保持居中。
用背景色来实现。如果要做的网页背景色是纯色的话可以用这个方法来实现，代码很简洁，并且宽度可以自适应显示。这个方法主要就是设置文字的背景来盖住文字所在部分的线。
用一个标签来实现。这个方法代码更简洁了。注意line-height来控制线的粗细，border-left中第一个数值控制的是线条的width.大家可以设置下来看看效果。
用字符实现。这个方法就是直接在代码中用输入法打入——就可以了，也是比较简洁的实现方式。
用浮动来实现。主要利用float浮动来实现这个效果，大家可以根据代码去设置看看效果哦~
用伪元素::before和::after来实现。这个方法代码比较复杂一点。这两个伪元素可以实现很多其他的效果，实现这个线的效果权当抛砖引玉吧~
这是由网页的 CSS 定义的，而非「打出来」的。
问题补充中网页的这条灰色分隔线，是一个 HTML 中的 <hr>标签。这个标签的名称来自 Horizontal Ruler, 通常表现为一条水平分隔线，在 HTML 5 中用以分隔不同主题的两块内容。
此网页对 <hr>标签进行了如下定义：style="font-family: Avenir, sans-serifborder-bottom-width: 0pxborder-left-width: 0pxborder-top-style: solidborder-top-color: rgb(234, 234, 234)height: 1pxmargin: 1em 0pxpadding: 0pxcolor: rgb(51, 51, 51)font-size: 17pxwhite-space: normal"
因此，这里的 <hr>便具有了一像素粗细灰色线的外观。
在纯文本环境下，是不能准确地得到一条如此的分隔线的。在需要表示分隔线的情况下，通常会用若干个 - 或 = 来表示。而在富文本编辑环境中（如，Word)，则可以通过插入形状等方式来得到类似的分隔线。不过这样的做法会破坏语义。
在 HTML 中，则应通过插入 <hr>标签，并在 CSS 中对其样式进行定义来得到该分隔线。
