4 盒模型 padding/border/margin
Posted zhujing666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了4 盒模型 padding/border/margin相关的知识，希望对你有一定的参考价值。
css model 设计和布局时使用
包括：
外边距 ，边框，内填充和实际内容
常用属性
1 宽高
2 内边距
padding 盒子边框到内容的距离
3 外边距 margin
<meta charset="utf-8">
<title>margin</title>
<style type="text/css">
span{
background-color: red;
}
.盒子一{
margin-right: 20px;
}
.盒子二{
margin-left: 100px;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
margin-bottom: 30px;
}
.box2{
background-color: green;
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<span class="盒子一">盒子一</span><span
class="盒子二">盒子二</span>
<div class="box1"></div>
<div class="box2"></div>
4 边框
.border{
width: 200px;
height: 200px;
border: 1px solid red;
border-width: 4px 10px;
border-style: solid dotted double dashed;
border-color:green red purple yellow;
/*按照方向来编写border*/
border-top-width: 4px;
border-top-color: red;
border-top-style: solid;
举例 input
input{
border:none;
outline: 0;
}
.username{
width: 180px;
height:40px;
font-size: 20px;
padding-left:10px;
border: 1px solid #666;
}
.username:hover{
border:1px solid orange;
}
</style>
</head>
<body>
<!-- 粗细width 样式style 颜色color -->
<div class="border"></div>
<input type="text" name="" class="username">
以上是关于4 盒模型 padding/border/margin的主要内容，如果未能解决你的问题，请参考以下文章