1. What is the box model
Sets out the manner element frame processing element content, padding, borders and margins of.
margin: Margin
padding: padding
border: Borders
2. Border
There are border size, style, color and attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边距margin: 0，常见操作*/
/*h1,ul,li,a,body{*/
/*margin: 0;*/
/*padding: 0;*/
/*text-decoration: none;*/
/*}*/
/*border: 粗细，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
}
form{
background: #3cbda6;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed #4d0b8c;
}
div:nth-of-type(2) input{
border: 2px dashed #008c27;
}
</style>
</head>
3. Margin inside and outside
Padding : in accordance with the top, right, bottom, left sequence are provided within the margin of each side
h1 {padding: 10px 0.25em 2ex 20%;}
also by using the following four separate properties, respectively disposed on the right, down the left margin:
padding-top
padding-right
padding-bottom
padding-left
Margin : inner the same margin settings, the order of these values are from the margins (top) began to rotate clockwise around the element of
margin: top right bottom left
times, we'll enter some duplicate values:
p {margin: 0.5em 1em 0.5em 1em;}
be unilateral margins attribute on the element of unilateral outside from the set value
margin-top
margin-right
margin-bottom
margin-left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外边距的妙用：居中元素
margin: 0 auto;
-->
<style>
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
/*
顺时针旋转
margin:0
margin:0 1px
margin:0 1px 2px 3px
*/
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
margin:0 1px 2px 3px;
}
form{
background: #3cbda6;
}
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>
Calculated box:
margin padding + + + border width content
4. The rounded corners
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
左上 右上 右下 左下，顺时针方向
<!--
圆圈： 圆角 = 半径！
-->
-->
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The shadow box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- margin: 0 auto; 居中
要求： 块元素，块元素有固定的宽度
-->
<style>
img{
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div style="width: 500px;display: block;text-align: center">
<img src="images/tx.jpg" alt="">
</div>
</body>
</html>
