1.1 什么是盒子模型
margin：外边距
padding：内边距
border：边框
1.2 边框
1、边框的粗细
2、样式
3、颜色
1.3 内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外边距的作用：居中元素
margin: 0 auto;
-->
<style>
#box{
width: 300px;
border: 2px solid red;
margin: 0 auto;
}
/*
顺时针旋转
margin: 0;
margin: 0 1px;
margin: 0 1px 2px 3px;
*/
h2{
font-size: 18px;
background: orangered;
line-height: 30px;
color: white;
}
form{
background: lightgray;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
margin: 2px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="password">
</div>
</form>
</div>
</body>
</html>盒子的计算方式：
margin + border + padding +内容的宽度
1.4 圆角边框
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
</style>1.5 盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
border-radius: 50px;
box-shadow: 5px 5px 100px yellow;
}
</style>
</head>
<body>
<div style="width: 500px;height: 500px;text-align: center">
<img src="image/1.JPG" alt="">
</div>
</body>
</html>
评论 (0)