目录
1、什么是盒子模型?
margin :外边距
padding : 内边距
border : 边框
margin + border + padding + 内容宽度
2、边框
-
边框的粗细
-
边框的样式
-
边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*总有一个默认的外边距margin: 0; 常见操作*/
body {
/*外边距搞成0*/
margin: 0;
/*内边距*/
padding: 0;
/*下划线*/
text-decoration: none;
}
#box {
/*他这个默认是有个外边距的*/
/*border:粗细,样式,颜色*/
width: 300px;
border: 1px solid red;
}
form {
/*背景颜色*/
background: #517851;
}
h2 {
font-size: 16px;
background-color: #517851;
line-height: 30px;
color: white;
}
/*黑色粗边框*/
div:nth-of-type(1) input {
border: 3px solid black;
}
/*黑色粗边框
dashed 虚线
*/
div:nth-of-type(2) input {
border: 3px dashed #4036bb;
}
/*黑色粗边框
dashed 虚线
*/
div:nth-of-type(2) input {
border: 2px dashed #4036bb;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
输出效果:
3、内外边距及div居中
内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距的妙用:居中元素-->
<style>
/*总有一个默认的外边距margin: 0; 常见操作*/
body {
/*外边距搞成0*/
margin: 0;
/*内边距*/
padding: 0;
/*下划线*/
text-decoration: none;
}
#box {
/*他这个默认是有个外边距的*/
/*border:粗细,样式,颜色*/
width: 300px;
border: 1px solid red;
/* 全部居中*/
margin: 0 auto;
}
form {
/*背景颜色*/
background: #517851;
}
h2 {
font-size: 16px;
background-color: #517851;
line-height: 30px;
color: white;
/*
顺势针旋转
margin: 0 ; 上下左右都为0
margin: 0 1px ;
margin: 0 1px 2px;
margin: 0 1px 2px 3px;
*/
margin: 0 ;
}
input {
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
输出效果:
盒子的计算方式:你这个元素到底多大?
margin + border + padding + 内容宽度
4、圆角边框及阴影和经验分享
圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*扇形(四分之一个圆)*/
div {
width: 50px;
height: 50px;
margin: 30px;
background: red;
border-radius: 50px 0 0 0;
}
img {
border-radius: 25px;
}
</style>
</head>
<body>
<div></div>
<img src="images/0918.png" alt="">
</body>
</html>
输出效果:
5、阴影
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
border: 10px solid red;
/*黄色阴影*/
box-shadow: 10px 10px 1px yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
输出效果:
拓展(图片居中发光的效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
margin: 0 auto; 居中
要求:块元素,块元素有固定的宽度
-->
<style>
img{
border-radius: 16px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div style="width: 500px; display: block; text-align: center">
<img src="images/0918.png" alt="">
</div>
</body>
</html>
输出效果: