盒子模型
元素加padding border margin组成一个封装的盒子。可以设置外边距等操作对盒子进行一个设计
首先进行一个body对登录元素进行一个列表设计
1 <body> 2 <div id="box"> 3 <h2> 4 会员登陆 5 </h2> 6 <form action="#"> 7 <div> 8 <span>姓名：</span> 9 <input type="text"> 10 </div> 11 <div> 12 <span>密码：</span> 13 <input type="text"> 14 </div> 15 <div> 16 <span>邮箱：</span> 17 <input type="text"> 18 </div> 19 20 </form> 21 22 </div> 23 </body>
body总有默认的外边距，一般在设计中首先会把一些元素的外边距取消
margin：0
/*body总有默认的外边距 margin：0*/
body{
margin: 0;
padding: 0;
text-decoration: none;
}
对标题，表格，表单进行设计
1 #box{
2 width: 300px;
3 border: 1px solid red;
4 }
5 h2 {
6 font-size: 16px;
7 background-color: #3cc7f5;
8 line-height: 20px;
9 color: white;
10 text-align: center ;
11 margin: 0;
12
13 }
14 form{
15 background: bisque;
16 }
17 div:nth-of-type(1) input{
18 border: 3px solid blue;
19 }
20 div:nth-of-type(2) input{
21 border: 3px dashed olivedrab;
22 }div:nth-of-type(3) input{
23 border: 3px solid black;
24 }
总代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 /*body总有默认的外边距 margin：0*/
8 body{
9 margin: 0;
10 padding: 0;
11 text-decoration: none;
12 }
13 #box{
14 width: 300px;
15 border: 1px solid red;
16 }
17 h2 {
18 font-size: 16px;
19 background-color: #3cc7f5;
20 line-height: 20px;
21 color: white;
22 text-align: center ;
23 margin: 0;
24
25 }
26 form{
27 background: bisque;
28 }
29 div:nth-of-type(1) input{
30 border: 3px solid blue;
31 }
32 div:nth-of-type(2) input{
33 border: 3px dashed olivedrab;
34 }div:nth-of-type(3) input{
35 border: 3px solid black;
36 }
37 </style>
38 </head>
39 <body>
40 <div id="box">
41 <h2>
42 会员登陆
43 </h2>
44 <form action="#">
45 <div>
46 <span>姓名：</span>
47 <input type="text">
48 </div>
49 <div>
50 <span>密码：</span>
51 <input type="text">
52 </div>
53 <div>
54 <span>邮箱：</span>
55 <input type="text">
56 </div>
57
58 </form>
59
60 </div>
61 </body>
62 </html>
内外边距
元素代码和盒子模型一样
margin的格式：
margin：0默认上下左右都为0
margin：0 1px上下为0，左右为1px
margin：0 1px 2px 3px 顺时针旋转赋值
margin：0：
margin：0 1px 2px 3px
1 h2 {
2 font-size: 16px;
3 background-color: #3cc7f5;
4 line-height: 20px;
5 color: white;
6 text-align: center ;
7 margin:0 1px 2px 3px;
8
9 }
内边距: padding
/*内边距*/
div:nth-of-type(1){
padding: 10px;
}
正常padding为0效果：
圆角边距
-
边框圆角：
创建一个div表格，默认是方的，通过更改圆角边框的值进行圆角化
border - radius：xxx
格式：border - radius： 10px上下左右四个角
border - radius： 10px 50px 左上右下 右上左下
border - radius：10px 50px 10px 50px顺时针旋转
设计圆圈：圆角 = 宽度的一半（半径）
div{
/*边框圆角：
border-radius: 10px 上下左右
border-radius: 10px 50px 左上右下 右上左下
border-radius: 10px 50px 10px 50px 顺时针
*/
/*圆圈： 圆角 = 宽度的一半（半径）*/
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px ;
}
-
圆形头像示例
导入img设置圆角边距和宽高
img{
border-radius: 184px 184px 184px 184px;
width: 50px;
height: 50px;
}
阴影加图片居中
单纯一张图片没有固定的宽度，需要添加div并对div边框进行设计
要求有块元素
居中条件：
-
margin：0 auto；
-
text- align： center
添加阴影效果：
box - shadow：x轴偏移量 y轴偏移量 阴影模糊半径 颜色
img{
border-radius: 184px 184px 184px 184px;
width: 100px;
height: 100px;
box-shadow: 10px 10px 50px yellow ;
}
image-20221119094326765
效果如上
标签：3px,盒子,margin,模型,radius,10px,day29,div,border From： https://www.cnblogs.com/GUGUZIZI/p/16905499.html