006.前端开发知识，前端基础CSS（2020-01-21）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

来源：第五天 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:; padding:; }
body { font-size:12px; color:#666; font-family:Verdana, Microsoft YaHei, Simsun; background:#fff; line-height:24px; }
fieldset, img { border:; }
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>