CSS浮动与盒子模型----案例：轮播图疑难示意

最新推荐文章于 2022-07-23 08:48:31 发布

又菜又爱学giser

最新推荐文章于 2022-07-23 08:48:31 发布

阅读量243

点赞数

分类专栏：轮播图 margin 0 auto 文章标签： css

本文链接：https://blog.csdn.net/qq_25479767/article/details/115365621

版权

轮播图同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

margin 0 auto

1 篇文章 0 订阅

订阅专栏

CSS浮动与盒子模型----案例：轮播图疑难示意

一、对margin 0 auto居中的理解

文章出处和来源网址：http://www.divcss5.com/rumen/r773.shtml

为什么要设置margin:0 auto？
设置此样式让DIV布局水平居中于浏览器中，目的就是兼容各大浏览器让布局居中。如果不加margin:0 auto CSS样式，会造成布局在有的浏览器中居中有的浏览器靠左。 禁：如果要让DIV布局居中浏览器中，加入margin:0 auto就不能加入float浮动样式，避免逻辑错误，造成布局居中不兼容。

margin 0 auto DIV在IE中无法居中解决(http://www.divcss5.com/jiqiao/j772.shtml)

关键对body设置text-align:center，同时对要居中DIV设置 margin:0 auto即可实现DIV水平居中，当然不能同时再设置float浮动样式。如果出现使用margin:0 auto，也对body设置text-align:center仍然不居中，这个时候考虑是否设置css float样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
        }
        .box1{
            width: 1000px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
        }
        .box2{
            width: 300px;
            height: 100px;
            background-color: #00f9ff;
            margin: 0 auto;
            /*1.使用float使box2的margin 0 auto 失效*/
            /*float: left;*/
        }
        /*2.使用以下样式让文字居中*/
        /*body{
            text-align: center;
        }*/
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<p class="p">i have a dream</p>
</body>
</html>

如果想让ul块在距离box1底端20px的地方放置呢？当然可以使用设定margin的值。但如果box1的尺寸发生改变又要重新设置。

我可以设置position来激活bottom属性设置ul的位置。关键代码如下

.box1{
            width: 1000px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
			/*3.box2中margin 0 auto失效的原因三*/
            /*position: relative;*/
        }
        .box2{
            width: 300px;
            height: 100px;
            background-color: #00f9ff;
            margin: 0 auto;
            /*1.使用float使margin 0 auto 失效*/
            /*float: left;*/
			/*3.box2中margin 0 auto失效的原因三*/
            /*position: absolute;
            bottom: 25px;*/
        }

此时会发现box2中的margin 0 auto失效了。

使用position绝对定位设置了盒模型content的位置，挤压了盒模型margin左侧的位置，自然margin就失效了。(个人理解，未查证)

绝对定位下margin失效的解决方法

又菜又爱学giser

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动与盒子模型----案例：轮播图疑难示意

CSS浮动与盒子模型----案例：轮播图疑难示意一、对margin 0 auto居中的理解文章出处和来源网址：http://www.divcss5.com/rumen/r773.shtml为什么要设置margin:0 auto？设置此样式让DIV布局水平居中于浏览器中，目的就是兼容各大浏览器让布局居中。如果不加margin:0 auto CSS样式，会造成布局在有的浏览器中居中有的浏览器靠左。禁：如果要让DIV布局居中浏览器中，加入margin:0 auto就不能加入float浮动样式，避
复制链接

扫一扫