如何让一个盒子居中,解决盒子塌陷的方法

简介: 如何让一个盒子居中,解决盒子塌陷的方法

1、这里我想要让这个盒子居中,请问怎么实现?


2、这里要用到外边距,可以让块级盒子实现水平居中的效果:即使缩小,也是页面在其中水平居中显示的

3、怎样让一个块级的盒子水平居中显示,这里有两个要求

4、先随便写一个盒子

5、现在我呈现出来的样式

6、水平居中的三种写法

7、这样就可以让我们块级盒子水平居中了

8、如果让行内块的元素居中,要使用text-align来进行居中

9、text-align居中的方法,用这种就行

10、如果图片也加了也能实现居中对齐

11、也能实现居中对齐

使用margin常遇见的问题:外边距合并和塌陷问题

(1)、随便定义一个盒子

(2)、给子盒子添加一个50px的元素

(3)、现在我想让子盒子放到下面

(4)、但是现在父盒子出现了问题,子盒子没有塌陷,这里我们称为父盒子的塌陷的问题

(5)、父盒子下来的,我们将他称为父元素塌陷

如何解决------------定义子元素,子元素没有下来,却让父元素下来这个问题

第一种解决方法:添加边框

可以将他定义为透明的颜色

第二种解决方法:给他添加一个上内边距

第三种解决方法:也可以给他添加一个overflow:hidden

清除内外边距的方法


相关文章
|
10月前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
84 0
|
6月前
|
前端开发
盒子的宽与高
盒子的宽与高。
49 4
|
前端开发 JavaScript
【前端】相对定位实现十字居中(上下左右居中)
【前端】相对定位实现十字居中(上下左右居中)
113 0
CSS3盒子居中模型,如何让盒子居中。
CSS3盒子居中模型,如何让盒子居中。
119 0
CSS3盒子居中模型,如何让盒子居中。
|
容器
Flex弹性盒子布局实现骰子6点
Flex弹性盒子布局实现骰子6点
142 0
Flex弹性盒子布局实现骰子6点
div盒子水平垂直居中以及表格的居中的方法
div盒子水平垂直居中以及表格的居中的方法
165 0
盒子居中效果案例(使用位移方法)
盒子居中效果案例(使用位移方法)
105 0
盒子居中效果案例(使用位移方法)
html+css实战171-盒子阴影
html+css实战171-盒子阴影
157 0
html+css实战171-盒子阴影
|
前端开发
前端案例-为盒子的四个角添加边框线
今天继续分享一个前端小demo来复习回顾一下知识点,依旧是很有趣的案例,分享给大家。 前端案例-为盒子的四个角添加边框线
483 0
前端案例-为盒子的四个角添加边框线