CSS篇-CSS小技巧与注意手记(一)

作者: TianTianBaby223 | 来源:发表于2018-07-04 13:26 被阅读23次

CSS篇-CSS小技巧与注意手记(一)
CSS篇-CSS小技巧与注意手记(二)
CSS篇-CSS小技巧与注意手记(四)
CSS篇-CSS小技巧与注意手记(三)
CSS教程汇总
笔记1
前端技巧总结1——css篇
CSS相关汇总
每日推荐文章
超赞的 CSS 阴影技巧与细节

①盒子水平居中注意

可以让一个盒子实现水平居中，需要满足一下两个条件：
必须是块级元素。
盒子必须指定了宽度（width）

代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {

        line-height: 文字垂直居中;
        text-align: center; /*可以让盒子内容（文字 行内元素 行内块元素）居中对齐*/
        width: 300px;
        height: 100px;
        background-color: pink;
      /*写法一*/
         /* margin: 0 auto; 通俗写法 0 auto  上下是 0  左右是auto  自动  水平居中对齐 */

     /*写法二*/
         /* margin-left: auto;
         margin-right: auto; 自动充满*/
    /*写法三*/
         /* margin: auto; 上下左右都是auto*/
         margin: 100px auto;

    }
    </style>
</head>
<body>
    <div>
        我是盒子
    </div>
</body>
</html>

效果

②相邻块元素垂直外边距的合并

有 A 盒子与 B 盒子
给A盒子底部设置margin-bottom: 100px;
给B盒子顶部设置margin-top: 150px
则AB 之间的垂直距离不会相加为 250px 要以大的距离为准为150px

示例图

代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 200px;
        background-color: purple;
    }
    .xiongda {
        margin-bottom: 100px;
    }
    .xionger {
        background-color: pink;
        margin-top: 150px;  /*最终两个盒子的距离是  最大的那个为准  150*/
    }
    </style>
</head>
<body>
    <div class="xiongda">1</div>
    <div class="xionger">2</div>
</body>
</html>

效果

③padding不会撑开盒子

如果一个盒子和父亲一样宽,占满父亲的宽度, 如果此盒子没有给定宽度则padding 不会影响本盒子大小
如果给定了宽度则盒子会受影响.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 200px;
        height: 300px;
        background-color: pink;
            /*padding-left : 30px;因为父盒子有宽度给定值了 则padding会撑开*/

    }
    .son {
        padding-left : 30px
          /*儿子 没有给定宽度 ,用的是默认的 ,所以padding不会被撑开*/
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

④嵌套元素垂直外边距合并

问题描述 :

B盒子在A盒子之内 ,B盒子想距离A盒子下方50px 采用 margin-top: 50px失效
但是对于左右则好用margin-left: 50px

示例图

问题代码


    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
    
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        margin-top: 50px;
        margin-left: 50px;
    }

问题效果

解决方法

可以为父元素定义1像素的上边框或上内边距。(padding)
可以为父元素添加overflow:hidden。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        /*padding-top: 50px;*/
        /*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>