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: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>

---------------------

posted on 2020-01-21 15:15 闪亮的金子阅读(150) 评论(0) 编辑收藏举报