<!DOCTYPE html>
<html>
<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>框模型</title>
<style>
.box {
/*设置宽和高*/
width:500px;
height:400px;
background-color:yellow;/*背景颜色*/
/*display: block;*/
text-align: center;/*水平居中*/
display: table-cell;/*将块显示方式转化单元格方式*/
vertical-align: middle;/*垂直居中*/
/*设置顶边框*/
border-top-width: 10px;
border-top-style: dotted;/*虚线*/
border-top-color: coral;
/*右边框 */
border-right-width: 10px;
border-right-style: solid;/*实线*/
border-right-color: green;
/*border-right:10px solid red;简写*/
/*下边框*/
border-bottom-width: 10px;
border-bottom-style: solid;/*实线*/
border-bottom-color: blue;
/*下左框*/
border-left-width: 10px;
border-left-style: solid;/*实线*/
border-left-color: blue;
/*设置内边柜*/
display: block;/*重新把块显示为块样式*/
padding-top: 30px;
padding-right: 50px;
padding-left: 30px;
padding-bottom: 60px;
/*padding:30px 简写*/
/*padding:30px 50px 60px当左右相等时可以简写*/
/*padding:30px 50px 当上下左右相等时简写*/
/*设置外边柜*/
margin-top: 30px;
margin-right: 50px;
margin-left: 30px;
margin-bottom: 60px;
/*margin:30px 50px 60px 30px 上 右 下 左*/
/*margin:30px 简写*/
/*margin:30px 50px 60px当左右相等时可以简写*/
/*margin:30px 50px 当上下左右相等时简写*/
}
</style>
</head>
<body>
<div>
<img src="147.jpg" alt=""width="300">
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
