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

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

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


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

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

4、先随便写一个盒子

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

6、水平居中的三种写法

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

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

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

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

11、也能实现居中对齐

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

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

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

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

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

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

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

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

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

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

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

清除内外边距的方法


相关文章
|
2月前
|
前端开发 定位技术
让一个父元素中的子元素垂直水平居中的方法
让一个父元素中的子元素垂直水平居中的方法
14 1
CSS3盒子居中模型,如何让盒子居中。
CSS3盒子居中模型,如何让盒子居中。
86 0
CSS3盒子居中模型,如何让盒子居中。
|
前端开发
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(1)
网页是一个多层的结构,设置样式样式,也是一层一层的设置,最终我们看到的最上面的一层。
99 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(1)
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(2)
内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距,盒子的大小由内容区、内边距和边框共同决定。外边距指的是当前盒子与其他盒子之间的距离,他不会影响可见框的大小,而是会影响到盒子的位置。
160 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(2)
html+css实战171-盒子阴影
html+css实战171-盒子阴影
121 0
html+css实战171-盒子阴影
|
前端开发
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(4)
通过本章认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法
123 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(3,此节不全)
通过本章认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法。
68 0
已知宽高实现盒子水平垂直居中
已知宽高实现盒子水平垂直居中
110 0
已知宽高实现盒子水平垂直居中
宽高不定实现盒子水平垂直居中
宽高不定实现盒子水平垂直居中
120 0
宽高不定实现盒子水平垂直居中