学习HTML最后一天

CSS 实用技巧详解

在前端开发中，CSS 起着至关重要的作用，掌握一些特定的 CSS 技巧可以让我们的页面布局更加高效和美观。今天就来分享三个 CSS 中的重要知识点：弹性布局、精灵图以及外边距合并与塌陷。

一、弹性布局（父子关系）

弹性布局，也称为 Flexbox，是一种强大的 CSS 布局方式，可以轻松地实现复杂的页面布局。

父元素属性

1. display: flex：将父元素设置为弹性盒子，开启弹性布局模式。
2. flex-direction：可以设置主轴方向，可选值有row（默认，水平方向从左到右）和column（垂直方向从上到下）。
3. flex-wrap：控制元素是否换行，wrap表示允许换行，nowrap表示不换行。
4. justify-content：设置元素在主轴方向的位置，可选值有flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，中间间距相等）、space-around（元素周围间距相等）、space-evenly（元素之间和元素与边缘的间距都相等）。
5. align-items：设置元素在侧轴方向的位置，可选值有flex-start、center、flex-end、stretch（拉伸）。
6. align-content：在多行弹性容器中，设置元素在侧轴方向的位置，与flex-wrap一起使用，可选值与align-items类似。

子元素属性

1. flex-grow：定义子元素的放大比例，当空间有剩余时，子元素可以根据这个值进行放大。
2. flex-shrink：定义子元素的收缩比例，当空间不足时，子元素可以根据这个值进行收缩。
3. flex-basis：设置子元素的初始尺寸。
4. flex：是flex-grow、flex-shrink和flex-basis的缩写，例如flex: 1 2 3;表示flex-grow为 1，flex-shrink为 2，flex-basis为 3。
5. order：设置元素渲染的先后顺序。
6. align-self：可以单独设置某个子元素在侧轴方向的位置。

下面是一个弹性布局的示例代码：

<!-- 
  父元素
      display: flex  弹性盒子
      flex-direction: row (主轴方向) | column(侧轴)
      flex-wrap: wrap | nowrap  设置换行
      设置元素在主轴方向的位置
      justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
      设置元素在侧轴方向的位置
      align-items: flex-start | center | flex-end | stretch (拉伸)
      设置元素在侧轴方向的位置(和换行一起使用)
      align-content: flex-start | center | flex-end  
      
  子元素
      flex-grow   扩大
      flex-shrink  收缩
      flex-basis   设置尺寸
      flex: 1 2 3;
      flex: flex-grow  flex-shrink  flex-basis
      order  设置元素渲染的先后顺序
      align-self 设置元素在侧轴方向的位置        
-->
      <style>
        body { margin: 0; }
        .header {
            width: 100%;
            height: 60px;
            background-color: deepskyblue;
            /* 此处利用弹性盒子，快速控制子元素在主轴方向上两端对齐，在侧轴方向上居中。 */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-weight: bold;
            font-size: 20px;
            margin-left: 20px;
        }
        .link {
            margin-right: 20px;
        }
        .link a {
            color: #ffffff;
            font-size: 20px;
            /* 移除下划线 */
            text-decoration: none;
        }
      </style>

      <div class="header">
           <div class="logo">
             <!-- 品牌 -->
              <span>LOGO</span>
           </div>
           <div class="link">
               <a href="#">登录</a>
           </div>
      </div>

在这个例子中，利用弹性盒子快速控制子元素在主轴方向上两端对齐，在侧轴方向上居中。

二、精灵图

精灵图是一种将许多小图标集中在一张背景透明的图片上的技术，可以减少 HTTP 请求次数，提高页面加载速度。

我们可以使用在线工具如 http://www.spritecow.com/ 来快速找到图标在精灵图上的坐标位置。

使用精灵图的步骤如下：

1. 将需要的小图标整合到一张透明背景的图片中。
2. 在 CSS 中，通过background-image属性设置精灵图为背景图，然后使用background-position属性来调整背景图的位置，以显示特定的图标。

三、外边距合并与塌

在 CSS 中，外边距合并和塌陷是一些容易让人困惑但又非常重要的概念。

外边距塌陷

当一个元素包含在另一个元素中时，如果子元素设置了margin-top或margin-bottom，并且父元素没有设置边框、overflow:hidden或float等属性，就会发生外边距塌陷。子元素的外边距会 “穿透” 父元素，与父元素的外边距合并。

在这个例子中，为了防止外边距塌陷，可以将父元素设置为overflow:hidden、设置边框或者让父元素脱离正常文档流（如设置float:left）。

外边距合并

垂直方向上，并列关系的两个元素，如果上边元素设置margin-bottom，下边元素设置margin-top，这两个元素的间距不会相加，而是取属性值较大的一个间距。

解决方案有以下两种：

1. 并列关系的两个元素，要么统一设置margin-top或者统一设置margin-bottom。
2. 给并列关系的两个元素嵌套一个父元素，设置overflow:hidden（形成 BFC）。

<style>
body {
    margin: 0;
}
.parent {
    width: 200px;
    height: 200px;
    background-color: green;
    /* 防止外边距塌陷的写法：主要是把这个元素设置成BFC(块级格式化上下文 、独立的渲染区域)
    1. 设置overflow:hidden 
    */
    overflow: hidden;

    /* 
    2. 设置边框
     */
     /* border: 1px solid white; */

     /* 
     3. 可以让这个元素脱离正常文档流
     */
     /* float: left; */
}
.child {
    width: 100px;
    height: 100px;
    background-color: red;
    /* 设置子元素距离父元素顶部50像素 */
    margin-top: 50px;
}
</style>

<div class="parent">
 <div class="child"></div>
</div>

<style>
.item {
    width: 300px;
    height: 100px;
}
.box-1 {
    background-color: purple;
    margin-bottom: 20px;
}
.box-2 {
    background-color: deepskyblue;
    margin-top: 30px;
}
/* 
    垂直方向，并列关系的两个元素，
    上边元素设置margin-bottom：值
    下边元素设置margin-top：值 
    这两个元素的间距不会相加，而是取属性值较大一个间距。

    解决方案：
     1. 并列关系的两个元素，要么统一设置margin-top或者统一设置margin-bottom
     2. 给并列关系的两个元素嵌套一个父元素，设置overflow:hidden (形成BFC)

 */
 .wrap {
    overflow: hidden;
 }

</style>

<div class="wrap"><div class="item box-1"></div></div>
<div class="wrap"><div class="item box-2"></div></div>

掌握这些 CSS 技巧，可以让我们在前端开发中更加得心应手，提高开发效率和页面性能。

希望这篇博客对大家有所帮助！如果你有任何问题或建议，欢迎在评论区留言。