什么是盒子模型
所有 HTML 元素可以看作盒子,在 CSS 中 “box model” 这一术语是用来设计和布局时使用。
CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括边距,边框,填充和实际内容。
margin:外边距
padding:内边距
border:边框
边框
1、边框的粗细
可以指定长度值,如 2px 或者 0.1em,或者使用3个关键字之一,分别是 thick、medium(默认值)和 thin
2、边框的样式
其中样式分类四种:solid(实线边框)、dashed(虚线边框)、dotted(点线边框)、double(双线边框)
3、边框的颜色
- color - 指定颜色的名称,如“red”
- RGB - 指定 RGB 值,如“rbg(255,0,0)”
- Hex - 指定16进制值,如“#ff0000”
语法
1、可以通过 border 一起声明
border: 粗细 样式 颜色;
2、三种属性也可以分开声明
border-style: 样式; /* 可以有1-4个属性值,分别设置四个边的样式 */
border-color: 颜色;
border-width: 粗细;
3、也可以上下左右边框分开声明
border-left: 粗细 样式 颜色;
boder-top: 粗细 样式 颜色;
border-right: 粗细 样式 颜色;
border-bottom: 粗细 样式 颜色;
4、上下左右的边框属性也可以分开声明
border-left-style: 样式;
border-left-color: 颜色;
border-left-width: 粗细;
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
/* 很多元素都可能有一个默认的外边距,去掉的办法就是margin: 0; */
margin: 0;
}
#box {
width: 300px;
/* border: 粗细 样式 颜色; */
border: 1px solid red;
}
div:nth-of-type(1) input {
border: 3px solid #0fffff;
}
div:nth-of-type(2) input {
border: 3px dashed darkblue;
}
div:nth-of-type(3) input {
border: 3px dotted #ff1124;
}
div:nth-of-type(4) input {
border: 3px double #19ff06;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text" value="solid">
</div>
<div>
<span>密码:</span>
<input type="text" value="dashed">
</div>
<div>
<span>邮箱:</span>
<input type="text" value="dotted">
</div>
<div>
<span>验证码:</span>
<input type="text" value="double">
</div>
</form>
</div>
</body>
</html>