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. 可以为父元素定义1像素的上边框或上内边距。(padding)
  2. 可以为父元素添加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>

修改后效果
修改后效果

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,630评论 1 82
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 8,362评论 0 31
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 3,307评论 2 64
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 1,376评论 3 10
  • 已然记不清是在什么时候,也许是某一个午休,也许是某一个晚自习的课间,他说喜欢她,而她没有说话,但是他们变成了恋人。...
    你不了解的我阅读 16评论 0 0