<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../HTNL-CSS/demo1.css"> </head> <body> <div id="box"> <h2>会员登入</h2> <form action="#"> <div> <span>Adminer:</span> <input type="text"> </div> <div> <span>Passworld:</span> <input type="password"> </div> <div> <span>Email:</span> <input type="email:2261203961@qq.com"> </div> </form> </div> </body> </html>
h2{ text-align: center; background: rebeccapurple; margin: 0; } div:nth-of-type(1) input{ border: 3px solid #1d1c1c; } div:nth-of-type(2) input{ border: 3px solid rgb(203, 198, 198); } div:nth-of-type(3) input{ border: 3px dashed #20c120; } form{ background: rebeccapurple; } body{ /*margin: 0; !* 最外框距离*!*/ padding: 0; } #box{ width: 300px; border: 1px solid #d41047; } div:nth-of-type(1) span{ border: 3px solid rgb(203, 198, 198); }
16.内外边距及div居中
1.外边距: 边框和网页之间距离 margin: 0 auto; 居中 margin的四个参数: 上右下左（顺时针） 2.内边距: 标签和边框之间距离 paddin: 3.使用div我们需要借助: width height border.
margin 外边距
padding
17.圆角边框
1.圆角边框: border-radius (上 右 下 左) (使用圆角边框，首先我们要先设置一下border的长,宽，以及实体框) img{ width: 471px; height: 493px; border: 1px solid rebeccapurple; border-radius: 164px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="demo3.css"> </head> <body> <div> <img src="../HTNL-CSS/image/7.jpg" alt="hs"> </div> </body> </html>
18.盒子阴影
box-shadow: 10px 10px 100px yellow; /* x y 模糊度 颜色*/
19.display和float浮动(做导航窗口)
1.块级元素:(独占一行)
h-~-h6 p div li ...
2.行内元素:(不独占一行)
span a img strong
行内元素可以内嵌在块级元素里面，反之不行.
3.行内元素与块内元素的转换
1.行内元素转换成块级元素: display: block; 2.块元素转换成行内元素: display:inline; 3. display:inline-block 是块元素，但可以内敛转换成有一行 4. display: none; 消失
经典状态:块内元素和行内元素
行内元素装换成块内元素
> div{ width: 100px; height: 100px; border: 1px solid rebeccapurple; } span{ width: 100px; height: 100px; border: 1px solid #d91e86; display: block; } HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="demo3.css"> </head> <body> <div>块内元素 </div> <span>行内元素</span> </body> </html>
==================================================================
4.folat与clear both
float效果:当我们挪动窗口的时候，会出现乱走的情况；
float与display的对比:
(1).display:不能控制浮动的走向
(2).float:能控制浮动的走向
clear both效果: 会在浮动的基础上锁死一部分信息
