来源：第五天 01盒子水平居中
一、盒子中文字控制：
1.text-align: center; /*可以让盒子内容（文字 行内元素 行内块元素）居中对齐*/
二、让盒子水平居中对齐：
方法1.margin: 0 auto; /*通俗写法 0 auto 上下是 0 左右是auto 水平居中对齐 */
方法2. margin-left: auto; margin-right: auto; /*自动充满*/
方法3.margin: auto; /* 上下左右都是auto*/
来源：第五天 02外边距合并
一、css初始化
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0; padding:0; } body { font-size:12px; color:#666; font-family:Verdana, Microsoft YaHei, Simsun; background:#fff; line-height:24px; } fieldset, img { border:0; } ol, ul { list-style:none; } h1, h2, h3, h4, h5, h6{ font-size:100%; } em { font-style:normal; } input, button, select, textarea { outline:none; } textarea { resize:none; } p{ text-align:justify; text-justify:distribute;}
二、外边距塌陷问题的处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { width: 500px; height: 500px; background-color: pink; /*border-top: 1px solid pink; 1. 用border*/ /*padding-top: 1px; 2 用padding */ overflow: hidden; /* 3. 用这个单词可以解决，具体单词的意思我们后面讲*/ } .son { width: 200px; height: 200px; background-color: purple; margin-top: 50px; margin-left: 50px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
来源：第五天 05圆角练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #ccc; } .radius a { width: 172px; height: 172px; background-color: #fff; display: inline-block; margin: 30px; border-radius: 50%; text-align: center; line-height: 172px; color: red; text-decoration: none; font-weight: 700; } .radius a:hover { background-color: red; color: #fff; } </style> </head> <body> <div class="radius"> <a href="#">文字内容</a> <a href="#">文字内容</a> <a href="#">文字内容</a> <a href="#">文字内容</a> </div> </body> </html>
---------------------