CSS常见属性(二)

于 2024-07-20 10:47:31 发布
阅读量634 收藏 29
点赞数 16
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yellow_important/article/details/140566952
版权

行高(line-height)

行高是什么？
行高是指：文本行与行之间的间距。（其实就是每行文本基线与基线之间的间距）

想让一行文本居中的时候可以设置行高等于标签高度
<style>
        .box {
            font-size: 40px;
            background-color: green;
            height: 200px;
            /* 1）遇到一行文本(单行文本)垂直居中，可以设置行高等于标签的高度 */
            line-height: 200px;
        }
    </style>
    <div class="box">
        xfgj hello world
    </div>
遇到多行文本垂直居中，可以通过内边距居中
<style>
        .demo {
            background-color: blue;
            font-size: 40px;
            /* 2）遇到多行文本垂直居中，可以通过内边距居中 */
            padding-top: 80px;
            padding-bottom: 80px;
        }
    </style>
    <div class="demo">
        xfgj hello world <br>
        xfgj hello world <br>
        xfgj hello world <br>
        xfgj hello world
    </div>

浮动（float）

CSS中的浮动（float）属性用于将一个元素从文档的正常流中取出，并将其放置在其包含元素的左侧或右侧。浮动元素会与后续的内容并排显示，直到该行被填满为止。通常用于布局设计，如将图像与文本环绕显示，或者创建多列布局。

 浮动会让元素脱离正常文档流，这个浮动了的标签就不占位置了。

 浮动只会影响他后面的元素，不影响前面的元素。 如果要不影响后面元素的布局就需要清除浮动。

浮动的基本使用方法

1. 将元素浮动到左侧或右侧

/* 将元素浮动到左侧 */
.element {
    float: left;
}

/* 将元素浮动到右侧 */
.element {
    float: right;
}

2. 清除浮动

浮动元素会影响后续元素的布局，因此常常需要清除浮动。清除浮动可以使用clear属性，或者更常见的是使用一种名为“clearfix”的技术。

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

示例

假设我们有一个包含图像和文本的布局，希望图像浮动在文本的左侧：

<div class="clearfix">
    <img src="image.jpg" class="float-left" alt="示例图片">
    <p>这是一些示例文本，图像会浮动在文本的左侧。</p>
</div>

对应的CSS：

.float-left {
    float: left;
    margin-right: 10px; /* 为了使文本与图像之间有一些间距 */
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

注意事项

  1. 父元素高度塌陷: 当子元素都浮动时，父元素的高度会塌陷，可以通过给父元素添加clearfix类来解决。
  2. 溢出问题：浮动元素可能会导致溢出，特别是在响应式设计中。确保在设计时考虑到不同屏幕尺寸下的表现。
  3. 与Flexbox和Grid的关系：虽然浮动技术在过去非常流行，但现代布局更推荐使用Flexbox和Grid布局，它们提供了更强大和灵活的布局能力。

结论

尽管浮动在现代Web开发中并不再是首选的布局方式，但它仍然是一个重要的工具，特别是在处理简单的文本和图像混排时。了解浮动及其使用场景，对于前端开发者来说依然是非常有价值的。

 

定位(position)

定位是什么？

定位的意思是指定一个元素在网页上的位置，一般使用position属性来设置。

CSS 中定位有五种方式：1.静态定位（static）；2.相对定位（relative）；3.绝对定位（absolute）；4.固定定位（fixed）；5.粘性定位（sticky）

CSS的定位是通过设置position属性来指定一个元素在网页上的位置。定位可以控制元素相对于其正常位置、父元素或视口的位置。理解和使用定位需要了解以下五种方式：

  1. 静态定位（static）：

    • 默认值：所有元素默认都是静态定位，无需特别设置。
    • 特性：元素按照正常的文档流排列，不会受到top、bottom、left、right属性的影响。
    • 适用场景：一般用于不需要特殊定位的普通元素。

  2. 相对定位（relative）：

    • 特性：元素相对于其正常位置进行偏移，通过top、bottom、left、right属性来设置偏移量。

    • 优点：不会脱离正常的文档流，不会影响其他元素的位置，仅仅是自身位置的变化。

    • 应用场景：适用于需要微调位置的元素。

    • 用法示例：

      .relative {
    position: relative;
    top: 10px;
    left: 20px;
}

  3. 绝对定位（absolute）：

    • 特性：元素相对于最近的已定位祖先元素（不包括static）进行定位。

    • 优点：会脱离正常的文档流，可以精确控制元素的位置。

    • 缺点：脱离文档流后，其他元素的位置可能会受到影响。

    • 应用场景：适用于需要精确定位的元素，如模态框、弹出菜单等。

    • 用法示例：

      .absolute {
    position: absolute;
    top: 30px;
    left: 40px;
}

  4. 固定定位（fixed）：

    • 特性：元素相对于视口进行定位，不会随着页面滚动而改变位置。

    • 优点：适用于需要始终保持在视口中的元素，如导航栏、返回顶部按钮等。

    • 缺点：会脱离正常的文档流，可能会覆盖其他内容。

    • 应用场景：适用于需要固定在某个位置的元素。

    • 用法示例：

      .fixed {
    position: fixed;
    top: 10px;
    right: 10px;
}

  5. 粘性定位（sticky）：

    • 特性：元素根据用户的滚动位置进行定位，在某些条件下表现为相对定位，在其他条件下表现为固定定位。

    • 优点：在用户滚动页面时，可以让元素在某个特定位置“粘住” (吸顶/吸底) 。

    • 应用场景：适用于需要在滚动时保持位置但又不完全脱离文档流的元素，如表头、侧边栏等。

    • 用法示例：

      .sticky {
    position: sticky;
    top: 0;
}

实际案例分析

案例1：制作一个固定在页面顶部的导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }
        .content {
            margin-top: 50px;
            padding: 20px;
        }
    </style>
    <title>Fixed Navbar Example</title>
</head>
<body>
    <div class="navbar">导航栏</div>
    <div class="content">
        <p>这是页面的内容...</p>
    </div>
</body>
</html>

在这个例子中，导航栏使用position: fixed;固定在页面顶部，不会随页面滚动而移动。

案例2：制作一个粘性表头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            position: sticky;
            top: 0;
            background-color: #f2f2f2;
        }
    </style>
    <title>Sticky Header Example</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
            </tr>
            <!-- 更多行 -->
        </tbody>
    </table>
</body>
</html>

在这个例子中，当用户滚动页面时，表头会“粘”在顶部，方便查看。

通过理解和实践这些定位方式，可以更好地控制网页布局和元素位置，使页面更加美观和实用。

 

弹性盒子(弹性布局)

弹性盒子是一种 CSS 布局模型，用于对元素进行灵活的排列和对齐。使用弹性盒子可以轻松实现响应式布局和自适应页面设计。弹性盒子由容器和项目组成，容器定义了弹性盒子的布局方式，而项目则是被布局的元素。通过设置不同的弹性盒子属性，如display、flex-direction、justify-content和align-items，可以控制弹性盒子中项目的排列方向、对齐方式和增长行为等。

弹性盒子的主要优势在于它能够自动调整项目的大小和位置，以适应不同屏幕尺寸和设备方向。它还提供了强大的灵活性，使得元素可以根据需要进行伸缩和重排。弹性盒子广泛应用于构建响应式网页和移动应用，它是现代 Web 开发中不可或缺的一部分。

 父元素
          display: flex  弹性盒子
          flex-direction: row (主轴方向) | column(侧轴)
          flex-wrap: wrap | nowrap  设置换行

          设置元素在主轴方向的位置
          justify-content: flex-start 主轴开始的地方
          justify-content: flex-end 主轴结束的地方
          justify-content: center 居中
          justify-content: space-between 两端对齐，元素之间有间距
          justify-content:space-around 自动计算元素的间距
          justify-content: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 设置元素在侧轴方向的位置

 

 

 

.parent {
            width: 500px;
            height: 400px;
            background-color: #ccc;

            /* 找到父元素，把父元素设置成弹性盒子 (弹性盒子控制的那些元素不会脱离文档流)*/
            display: flex;

            /* 控制子元素在主轴或者在侧轴上 */
            /* column: 侧轴 ；column-reverse:侧轴反转；
              row: 主轴 ； row-reverse：主轴反转*/
            flex-direction: row;

            /* 控制子元素在主轴上的位置 */
            /* flex-end: 在主轴结束位置 ; center: 居中 ； flex-start: 开始的位置*/
            /* space-between: 两端对齐，元素之间有间距；
               space-around： 自动计算元素左右的间距；
               space-evenly： 把元素之间的每个间距计算成均等的*/
            justify-content: center;

            /* 控制子元素在侧轴上的位置 */
            /* flex-end: 在侧轴结束的位置 ; center： 居中 ； flex-start: 在开始的位置 */
            align-items: center;
        }

 

伪类元素（::）

通过CSS可以生成标签，可以用伪元素来表示元素中的一些特殊的位置。

 <style>
        .header {
            background-color: gray;
            font-size: 40px;
        }
        /* 伪类元素: 是指由CSS生成的标签。 */
        /* 在.header标签中生成伪类元素 (属于行内元素) */
        .header::before {
            content: "abc";
            color: green;
            font-weight: bold;
        }
        .header::after {
            content: "ABC";
            color: red;
        }
        /* 
        总结：
            选择器:: {  
                content: "";    必须要有这个content属性 
            }
            伪类选择器是选择器 （选择标签）
            伪类元素是元素     (生成标签)
        */
    </style>
</head>
<body>
    <div class="header">123</div>
</body>

 层级(z-index)

CSS中的`z-index`属性是控制元素在网页上的垂直堆叠顺序的属性。它属于CSS定位属性之一，通常与`position`属性一起使用。`z-index`属性定义了一个元素在垂直方向（即Z轴）上的层级，数值越大的元素会显示在数值较小的元素之上。

使用z-index的基本规则：

1. **定位上下文**：`z-index`仅在定位上下文中有效，即元素的`position`属性不是`static`（默认值）时。有效的`position`值包括`relative`、`absolute`、`fixed`或`sticky`。
2. **数值范围**：`z-index`可以是正数、负数或零。数值越大，元素在堆叠顺序中的位置越高。
3. **局部堆叠上下文**：`z-index`值在局部堆叠上下文中比较，这意味着一个元素的`z-index`仅影响它与其兄弟元素的堆叠顺序，而不会影响其他元素的堆叠顺序。

如何使用`z-index： 

/* 定义元素的定位属性 */
.box {
  position: relative; /* 或 absolute, fixed, sticky */
  width: 100px;
  height: 100px;
}

/* 给元素设置不同的z-index值 */
.box1 {
  background-color: red;
  z-index: 1;
}

.box2 {
  background-color: blue;
  z-index: 2;
}

/* 确保元素堆叠在一起 */
.box3 {
  background-color: green;
  z-index: 3;
  position: absolute;
  top: 50px;
  left: 50px;
}
```

```html
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
```

在这个例子中，`.box3`将显示在`.box1`和`.box2`之上，因为它具有最高的`z-index`值。`.box2`将显示在`.box1`之上，因为它们的`z-index`值分别为2和1。

注意事项：

- 确保`z-index`值在相同的堆叠上下文中比较。
- 使用`z-index`时，要注意不要过度依赖它来解决布局问题，因为它可能会使页面的布局变得复杂。
- `z-index`仅影响重叠的元素，不影响元素的文档流顺序。

正确使用`z-index`可以帮助你创建复杂的布局和交互效果，但应该谨慎使用，以保持代码的清晰和可维护性。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值