div标签和定宽居中

最新推荐文章于 2021-06-26 18:21:29 发布

又一个包子

最新推荐文章于 2021-06-26 18:21:29 发布

阅读量873

点赞数

分类专栏： html基本知识

本文链接：https://blog.csdn.net/whpu1234/article/details/81291505

版权

html基本知识专栏收录该内容

27 篇文章 1 订阅

订阅专栏

/*margin外边距默认值4个值为零，表示元素的四个方向上、下、左、右

只设置一个值，4个值都是这个值

只设置两个值，分别表示上下、左右

设置四个值，分别表示上、下、左、右

设制auto，可以让元素在其父元素中实现定宽居中

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div标签和定宽</title>

    <style>
    #p01{
        width:500px;
        height: 500px;
        background-color: cyan;
        /*margin外边距 默认值4个值为零 ， 表示元素的四个方向上、下、左、右
          只设置一个值，4个值都是这个值
          只设置两个值，分别表示上下、左右
          设置四个值，分别表示上、下、左、右
          设制auto，可以让元素在其父元素中实现定宽居中
        */
        margin: 0 auto;
    }

    #p00{
        width: 100%;
        height: 500px;
        text-align: center;
    }

    #p01{
        width: 440px;
        height: 440px;
       
        background-color: aquamarine;
        margin: 0 auto;
    }

    #p02{
        width: 100%;
        height: 500px;
        margin: 0  auto;
    }

    #p03{
        width: 200px;
        height: 500px;
        margin: 20px auto;
        background-color: blueviolet;
    }

    </style>
</head>
<body>
    
    <!--div 用于把页面划分成不同区域，即分成许多盒子-->
    <!--div可设置宽高；不设置宽高，他的宽和父元素等宽，他的高取决与内容-->
    <div>
        
        <p>div中的段落</p>
        <p>div中的段落</p>
    
    </div>

    <div id="p00"> 
        <img src="timg.jpg">
    </div>

    <div id="p01"></div>
    <div id="p02">
        <div id="p03"></div>
    </div>
    

</body>
</html>

又一个包子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div标签和定宽居中

1.&lt;!--div 用于把页面划分成不同区域，即分成许多盒子--&gt;&lt;!--div可设置宽高；不设置宽高，他的宽和父元素等宽，他的高取决与内容--&gt;2./*margin外边距默认值4个值为零，表示元素的四个方向上、下、左、右只设置一个值，4个值都是这个值只设置两个值，分别表示上下、左右设置四个值，分别表示上、下、左、右设制auto，可以让...
复制链接

扫一扫

专栏目录