HTML学习（八）

最新推荐文章于 2024-07-26 08:00:00 发布

不断充电的兔子

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量60

点赞数

分类专栏： HTML学习文章标签： css 定位

本文链接：https://blog.csdn.net/m0_49049653/article/details/117781106

版权

HTML学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

差缺补漏

盒子水平垂直居中方法
背景透明度

盒子水平垂直居中方法

1、盒子的宽高已知

用绝对定位（absolute）来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #d0 {
        width: 600px;
        height: 600px;
        background-color: #8be9d4;
        position: relative;
    }

    #d1 {
        width: 200px;
        height: 200px;
        background-color: rgb(46, 44, 160);
        position: absolute;
        /*第一种方式*/
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        /*第二种方式
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        */
    }
    </style>
</head>
<body>
    <div id="d0">
        <div id="d1"></div>
    </div>
</body>
</html>

实现效果如下：
在这里插入图片描述

重点：

因为绝对定位是相对父元素来进行定位的，所以要给它的父元素也添加一个定位（一般是相对定位relative）。
margin的两个值是用盒子本身的宽高除以2再取负值。

2、盒子的宽高未知

通过定位及动画效果来实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body,
    .container {
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        position: relative;
    }
    .center {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
<body>
  <div class="container">
    <div class="center"></div>
  </div>
</body>
</html>

实现效果图如下：
在这里插入图片描述

3、不论宽高是否已知

用flex布局来实现。

用flex的justify-content 属性和align-items 属性就可实现盒子的垂直水平居中对齐，前者设置主轴的元素排列，后者设置副轴的元素排列。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body,
    .container {
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .center {
        width:200px;
        height: 200px;;
      background-color: #f40;
    }
</style>
</head>
<body>
  <div class="container">
    <div class="center"></div>
  </div>
</body>
</html>

实现效果上面的相同。

背景透明度

（1）通过rgba方式来设置背景的透明度。
所谓RGBA颜色，就是RGB三原色加ALPHA。在给背景添加颜色的同时，提供透明度特性。
格式：background:rgba(R,G, B, A);
注意通过rgba方式设置背景颜色透明度，可以设置背景颜色透明而文字不透明，但是这种方法的兼容性不好，不兼容ie浏览器。

（2）通过background-color和opacity来设置背景的透明度。
opacity属性参数的＂不透明度＂是以数字表示，从 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，数字越大代表元素越不透明。
注意：通过backgroud和opacity设置背景颜色透明度，如果背景上面有文字的话，那么文字也会变成透明。

实例：
在这里插入图片描述
具体代码就不上传了，大家根据自己的需要进行相应的设置。

不断充电的兔子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习（八）

差缺补漏盒子水平垂直居中方法二级目录三级目录盒子水平垂直居中方法1、盒子的宽高已知用绝对定位（absolute）来实现。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=
复制链接

扫一扫