CSS学习记录04CSS盒子模型
4.1简介
其中:
- margin:外边距
- padding:内边距
- border:边框
4.2 border(边框)
#box{
border:5px solid red;
}
4.2.1定义和用法
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性:
- border-width
- border-style
- border-color
如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000;
也是允许的。
值 | 描述 |
---|---|
border-width | 规定边框的宽度。 |
border-style | 规定边框的样式。 |
border-color | 规定边框的颜色。 |
inherit | 规定应该从父元素继承 border 属性的设置。 |
border-style :
值 | 描述 |
---|---|
dotted | 定义一个点线边框 |
dashed | 定义一个虚线边框 |
solid | 定义实线边框 |
double | 定义两个边框。 两个边框的宽度和 border-width 的值相同 |
groove | 定义3D沟槽边框。效果取决于边框的颜色值 |
ridge | 定义3D脊边框。效果取决于边框的颜色值 |
inset | 定义一个3D的嵌入边框。效果取决于边框的颜色值 |
outset | 定义一个3D突出边框。 效果取决于边框的颜色值 |
边框-单独设置各边:
div{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
可简写:
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
补充:圆角边框border-radius: 2px;
4.3margin(外边距)
定义元素周围的空间。
margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。
margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
值 | 描述 |
---|---|
auto | 设置浏览器边距。这样做的结果会依赖于浏览器 |
length | 定义一个固定的margin(使用像素,pt,em等) |
% | 定义一个使用百分比的边距 |
Margin - 单边外边距属性:
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
可简写:
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
注意,body总有一个默认的外边距,需设置margin:0;清除
4.4padding(填充)
定义元素边框与元素内容之间的空间,即上下左右的内边距。
当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
值 | 描述 |
---|---|
length | 定义一个固定的填充(像素, pt, em,等) |
% | 使用百分比值定义一个填充 |
填充- 单边内边距属性:
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
上内边距是 25px
右内边距是 50px
下内边距是 25px
左内边距是 50px
内边距也可以简写。
4.5简陋登录窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2 {
font-size: 18px;
background-color: #ff461f;
line-height: 30px;
color: white;
}
form {
background: #ff461f;
}
div:nth-of-type(1) input {
border: 1px solid black;
margin-bottom: 10px;
}
#password-input {
margin-left: 15px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input id="password-input" type="text">
</div>
</form>
</div>
</body>
</html>