学习前端7天

改名字要2个币

于 2023-05-15 00:01:57 发布

阅读量72

点赞数 1

文章标签：学习

本文链接：https://blog.csdn.net/m0_58545472/article/details/130673068

版权

本文介绍了CSS中的transform:scale属性用于缩放元素，以及两种实现块级元素垂直居中的方法：flex布局和绝对定位。transform:scale允许调整元素的大小和翻转，而垂直居中可以通过display:flex和position:absolute结合使用来实现。

摘要由CSDN通过智能技术生成

transform: scale（）

`transform: scale()`是CSS中的一个用于缩放元素的属性。它的语法如下：

transform: scale(x,y);

其中x和y是缩放比例。如果只设置一个参数，则元素将等比例地缩放。当x和y都设置为1时，元素的大小将不会改变。

要放大元素，您可以设置x和y的值大于1，例如：

transform: scale(1.5);

此代码将把元素的大小放大到原始大小的1.5倍。

与放大类似，要缩小元素，您可以设置x和y的值小于1，例如：

transform: scale(0.8);

此代码将把元素的大小缩小到原始大小的0.8倍。

您还可以使用相反的值来翻转元素，例如：

transform: scale(-1, 1);

此代码将水平翻转元素。

块级元素垂直居中

要将一个块级元素垂直居中，可以使用以下两个方法：

1. 使用flex布局： 在父容器上设置 `display:flex` 和 `align-items:center` 即可实现垂直居中。例如：

```html

<div class="container">
  <div class="box">
    <p>这是需要垂直居中的文本</p>
  </div>
</div>

```css

.container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: #f5f5f5;
  width: 300px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

```

在这个例子中，将外层的父容器设置为flex布局，并使用 `align-items:center` 实现子元素的垂直居中。同时，内部的 `.box` 元素也使用了flex布局，并通过 `justify-content:center` 和 `align-items:center` 居中了段落元素。

2. 使用绝对定位：在元素上设置 `position:absolute` 和 `top:50%`，加上`transform:translateY(-50%)` 来进行居中，例如：

```html

<div class="box">
  <p>这是需要垂直居中的文本</p>
</div>

``````css

.box {
  position: relative;
  height: 200px;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
}

在这个例子中，将父元素 `.box` 设置为relative定位来作为相对定位的参考，然后将内部的段落元素 `p` 设置为绝对定位，并使用 `top:50%` 将其垂直方向上的位置移动到父元素中间，再使用 `transform` 属性来微调位置使其居中。

这两种方法都能够实现元素的垂直居中，您可以根据具体的需求来选择使用哪一种。

div做表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        div{
            box-sizing: border-box;
        }
        .tr{
            overflow:hidden;    
        }
        .tr>div{
            float:left;
            width:200px;
            height:60px;
            border-top:1px solid #000;
            border-left:1px solid #000;
            line-height:60px;
            padding:0 10px;
        }

        .tr>div:last-child{
            border-right:1px solid #000;
        }
        .table{
            border-bottom:1px solid #000;
            width:1000px;
        }
    </style>
</head>

<body>
    <div class="table">
        <div class="tr">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
        <div class="tr">
            <div>a</div>
            <div>b</div>
            <div>c</div>
            <div>d</div>
            <div>e</div>
        </div>
        <div class="tr">
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
            <div>E</div>
        </div>
    </div>
</body>

</html>

总结

本文主要介绍了CSS中的两个常用技巧：`transform:scale` 和块级元素垂直居中。

`transform:scale` 属性可用于缩放元素，通过设置不同的缩放比例可以将元素的大小放大或缩小。同时，也可以通过负值来实现元素的翻转。

块级元素垂直居中是常见的页面布局需求。在CSS中有两种方式可以实现块级元素垂直居中。第一种方法是使用flex布局，通过在父容器上设置 `display:flex` 和 `align-items:center` 即可实现垂直居中。第二种方法是使用绝对定位，通过设置元素的 `position:absolute`、`top:50%` 和 `transform:translateY(-50%)` 属性来进行居中。

需要注意的是，在使用绝对定位的方法时，为了避免内容从容器中溢出，需要将父元素设置为相对定位（position:relative）。

总之，`transform:scale` 和块级元素垂直居中两个技巧都是CSS中常用的技巧，在前端开发中会经常使用到。同时需要时刻注意浏览器兼容性，以确保效果在各种环境下正常展示。