两个盒子垂直水平居中，并且相距距离一样的实现

jsbintask 发布于2019-08-30 11:27 / 968人阅读

摘要：这里设置了根元素的值后出现了一个问题就是原因因为这些值是根据当前元素的来设置的，所以只要把父元素的设置为浏览器的默认值就可以了。

现在很多网页都会有那种类似于Grid布局的布局，今天我就自己试试写一个出来，具体效果图如下：

一、首先是一个盒子的垂直水平居中：

这里设置了display:inline出现了几个问题：

1.长宽高不能设置了，margin-top/bottom不能设置

解决办法：将盒子设置会border-box,用padding来撑开

2.元素的高度是跟随这当前元素的font-size来变化的

解决办法：每个元素设置一个font-size(这样有一点冗余)

3.line-height：父元素的高度这样设置会出现偏移

解决办法：line-height的值 = 父元素的高度 - padding-bottom的值

一个盒子居中了，那么两个怎么弄呢，并且他们相隔的距离要一样的
1.一开始我的思路使用margin-left:百分比的方法，但是他这百分比不会随着父元素的大小变化而变化。
2.然后我换了一种思路：用rem来动态设置距离的值

首先通过JS代码设置根元素的font-size大小

然后再设置盒子的margin-left的值

JS代码：

   var rootSize = document.querySelector("body").clientWidth / 7.5;
   document.querySelector("html").style.fontSize = rootSize + "px"

css代码：

   .parent{
      border:1px solid red;
      width:100%;
      height: 300px;
      font-size: 16px; 
    }
    .box{
      font-size: 16px;     
      border: 1px solid black;
      display: inline;
      padding-left:100px;
      padding-bottom:80px;
      margin-left: 2rem;
      line-height: 220px;
    }

只要根据盒子的数量来调整margin-left的大小就可以了。

这里设置了根元素html的font-size值后出现了一个问题：就是

原因：因为这些值是根据当前元素的font-size来设置的，所以只要把父元素的font-size设置为浏览器的默认值就可以了。

云服务器 GPU云服务器水平垂直居中实现垂直居中 html的水平居中 js两个一样的id

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115011.html

两个盒子垂直水平居中，并且相距距离一样的实现

摘要：这里设置了根元素的值后出现了一个问题就是原因因为这些值是根据当前元素的来设置的，所以只要把父元素的设置为浏览器的默认值就可以了。现在很多网页都会有那种类似于Grid布局的布局，今天我就自己试试写一个出来，具体效果图如下： showImg(https://segmentfault.com/img/bVbviHT?w=1351&h=331); 一、首先是一个盒子的垂直水平居中： ...

CodeSheep 2019-08-02 15:35 评论0 收藏0
CSS学习（二）

摘要：学习二一三大模型之盒子模型盒子模型每个矩形元素都由元素的内容，内边距，边框，和外边距边框盒子的厚度，如手机包装盒的厚度内边距内容与边框之间的距离，如填充泡沫的厚度外边距与其他盒子的距离边框样式格式单实线用的最多虚线点线双实线边框综合写法写 CSS学习（二）一、CSS三大模型之盒子模型 1.盒子模型每个矩形元素都由元素的内容，内边距，边框，和外边距边框：盒子的厚度Border，如手...

Near_Li 2019-08-29 15:29 评论0 收藏0
想要清晰的明白（二）CSS 盒模型Block box与Line box

摘要：垂直格式化，有一个很重要的方面是会造成垂直相邻外边距合并，解决这个的方式见想要清晰的明白一中的部分。参考资料权威指南第三版为负值产生的影响和常见布局应用布局圣杯布局双飞翼布局深入理解和的基友关系深入理解中的行高在上一篇想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC比较宏观的了解了盒子模型的作用，接下来就详细的介绍两种盒子的具体细节 Block Box show...

Vicky 2019-08-30 13:03 评论0 收藏0
CSS简洁笔记

摘要：层叠性发生的前提样式冲突优先级权重行内引入标签通用把权重相加，值越大越有先权重一样，后面的样式起作用补充知识笔记表单优化写法用户名格式化列表图标表单合并设置表格边框合并，适用于表格格式化上下文默认值。 1.通用属性 name：名称，可以重复，可以一样; class：类名，可以重复，也可以拥有多个，给CSS用的；如; id：唯一标示，不能重复，一般多用在JavaScript中；命名规...

yanbingyun1990 2019-08-02 16:00 评论0 收藏0
CSS简洁笔记

摘要：层叠性发生的前提样式冲突优先级权重行内引入标签通用把权重相加，值越大越有先权重一样，后面的样式起作用补充知识笔记表单优化写法用户名格式化列表图标表单合并设置表格边框合并，适用于表格格式化上下文默认值。 1.通用属性 name：名称，可以重复，可以一样; class：类名，可以重复，也可以拥有多个，给CSS用的；如; id：唯一标示，不能重复，一般多用在JavaScript中；命名规...

FullStackDeveloper 2019-08-29 14:01 评论0 收藏0