<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>边框</title>
<style>
.box{
width: 200px;
height: 100px;
border-top: 2px double red;
border-bottom: 2px ridge lawngreen;
border-left: 2px inset darkorange ;
border-right:2px groove darkblue;
}
</style>
</head>
<body>
<div class="box">
微笑是最初的信仰
</div>
</body>
</html>
结果图
display属性介绍
display属性它是显示的意思，
display属性可以将行内元素与块级元素之间相互转换，将隐藏的元素设置显示状态或将显示的元素设置隐藏状态。
display属性值说明表如下：
| 属性值 | 描述 |
|---|---|
| inline | 将块级元素转换为行内元素。 |
| block | 作用：1、将行内元素转换为块级元素。2、将隐藏的元素设置为显示状态。 |
| none | 将显示的元素设置为隐藏状态。 |
display属性实践
使用
display属性的属性值为
block将
span标签设置宽高度并且设置一个背景颜色。代码块
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>将span标签转换为块级元素</title>
<style>
.box{
width: 200px;
height: 100px;
display: block;
background-color: red;
}
</style>
</head>
<body>
<span class="box">微笑是最初的信仰</span>
</body>
</html>
结果图
注意：如果行内元素使用了
display: block;，就拥有了块级元素特点。使用
display属性的属性值为
inline
