css应用

最新推荐文章于 2023-07-17 15:08:38 发布

Yang_Sun_shine

最新推荐文章于 2023-07-17 15:08:38 发布

阅读量299

点赞数

分类专栏：【css笔记】文章标签：盒子嵌套居中

本文链接：https://blog.csdn.net/Yang_Sun_shine/article/details/71244383

版权

【css笔记】专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #span1{
            margin-right: 20px;
            background-color: lightgreen;
        }
        #span2{
            margin-left: 30px;
            background-color: pink;
        }
        #d1{
            height: 100px;
            background-color: lightcoral;
            margin-bottom: 20px;
        }
        #d2{
            height: 100px;
            background-color: lightblue;
            margin-top: 30px;
        }
    </style>
    <title>行级标签、块级标签之间的距离</title>
</head>
<body>

<!--水平排放的盒子，水平间距是margin的累加-->
<span id="span1">节日风俗</span><span id="span2">节日风俗</span>
<br>
<br>

<!--垂直排放的盒子，垂直间距是合并的（取最大值）-->
<div id="d1">盒子属性</div>
<div id="d2">盒子属性</div>

</body>
</html>

盒子嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        /*解决外边距失效问题
           1：为父盒子添加overflow：hidden
           2、为父盒子添加padding
           3、为父盒子添加border   */
        #p{
            width: 300px;
            height: 300px;
            background-color: lightcoral;
            /*padding: 25px;*/
            overflow: hidden;
        }
        #c{
            width: 150px;
            height: 150px;
            background-color:lightblue;
            margin: 0 auto;
            margin-top: 75px;
        }
    </style>

    <title>嵌套的盒子</title>
</head>
<body>


<div id="p">
    <div id="c"></div>
</div>

</body>
</html>

负边距DIV居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        #t1{
            width: 300px;
            height: 300px;
            background-color: lightcoral;
            position: relative;
        }
        #t2{
            width: 150px;
            height: 150px;
            background-color: lightblue;
            position: absolute;
            /*margin: 0 auto;*/
            left: 50%;
            margin-left: -75px;
            top: 50%;
            margin-top: -75px;
        }
    </style>

    <title>负边距DIV居中</title>
</head>
<body>

<div id="t1">
   <div id="t2"></div>
</div>

</body>
</html

固定定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        #back{
            width: 120px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: lightcoral;
            position: fixed;
            bottom: 80px;
            right: 20px;
            /*z-index默认值为：1 其数值越大越靠前*/
            z-index: 1000;
        }
    </style>

    <title>固定定位</title>
</head>
<body>
<div style="height: 1000px">
    <div id="back">
        返回页面顶部
    </div>
</div>

</body>
</html>

效果图：