本文目录一览：
- 1、css里的 border和clear 的属性怎么用？
- 2、网页设计中的边框代码
- 3、设置单独一个方向的边框线的属性有
- 4、css中BORDER-BOTTOM是下划线，怎么实现垂直居中的线？
- 5、border-bottom: #e0e0e0 1px solid;是什么意思?
css里的 border和clear 的属性怎么用？
通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。另一个要说明的就是clear:both，表示清除左、右所有的浮动
网页设计中的边框代码
1、打开html开发工具，新建一个html代码页面。html中创建一个div标签，给这个标签添加文字和一个class为了后面方便控制div的样式：
2、接下来在style标签设置div的样式，在solid类中将边框样式设为实线边框，颜色这里用默认的黑色：
3、保存html代码使用浏览器打开，即可看到浏览器页面上显示一个实线边框。以上就是网页设计中设置边框的详细步骤：
设置单独一个方向的边框线的属性有
属性有：border-top; border-bottom
border-top border-bottom 受 元素的 width 限制 ，没有width限制可能会变成梯形
border-left border-right 受元素height限制,出来本身就是三角形
情况分类展示：
1.border-left border-right
此时对称出现在元素左右两侧 height 不为0只要改一下border属性就OK了.我们一起看看.我们需要改的是上下左右的边框/颜色/粗细.
所以我们可以直接写成:
style type="text/css"
!--
border:1px dashed red;/*通过border我们可以改变整个边框的属性*/
--
/style
就OK了./
css中BORDER-BOTTOM是下划线，怎么实现垂直居中的线？
代码如下：
!doctype html
html
head
meta charset="utf-8"
title无标题文档/title
style
.my-para{
height:30px;
line-height:30px;
width:400px;
display:flex;
text-align:center;
}
.my-para span{
height:1px;
width:200px;
border-bottom:1px solid #333;
margin:auto;
display:inline-block;
}
/style
/head
body
p class="my-para"新闻标题文字span/span2017.12.12/p
/body
/html
如图所示：
解释：垂直居中的直线可以设置为span/span,span标签的父元素p标签的css属性设置为：display:flex;text-align:center; 设置span为块级元素，给它宽、高、下边框。 span标签的属性设置为：margin:auto; 这样就可以使span的下边框垂直居中与父级元素p-border-bottom
border-bottom: #e0e0e0 1px solid;是什么意思?
1、#e0e0e0 ：表示给边框底部的一种颜色；
2、1px：表示边框底部的宽度；
3、solid这表示边框底部的样式；
4、border-bottom表示对边框的底部进行设置；
border-bottom 属性是一种复合属性，用于设置对象的下边框的宽度、样式和颜色值。
所有未由 border-bottom 复合属性设置的单独边框属性都将设置为其默认值。例如，width 的默认值为 medium 。
如果未指定颜色，则使用文本颜色。
