CSS小贴士（垂直居中和百分比下调整盒模型填充）

最新推荐文章于 2024-05-03 15:54:26 发布
最新推荐文章于 2024-05-03 15:54:26 发布
阅读量498 收藏
点赞数
分类专栏： 小贴士 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26626113/article/details/48392073
版权

最近写代码用到的一些小技巧吧
先是垂直居中

position: absolute;top: 50%;margin-top: -350px;height: 700px;

首先设置绝对定位，之后top50%到中间，之后上移本身高度的一半便可以做到垂直居中

百分比调整和模型填充，我经常使用百分比，但有时候加入填充就会是内容超过外部div等，但又没办法很好的控制盒模型大小，因为是百分比，所以就可以使用下面代码

box-sizing:border-box;padding: 20px;//将padding也计算到盒模型的大小上，妈妈再也不用担心了
小疯疯0413
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用css实现div垂直居中的示例
09-25
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
如果一个盒子为固定宽高 里面有上下两个盒子 上面一个盒子的高度会随着选项改变 怎么使下面一个盒子填满整个空间
T3165919332的博客
06-12 394
stretch 选项会使 flex 容器的 cross axis 上所有项目的尺寸填满容器,而 flex-grow: 1 会使 .lower 项目占据剩余空间。所以,无论 .upper 的高度如何变化,.lower 项目的高度都会填满剩余空间。这是一个很常见的布局需求。可以这样实现:1. 外层盒子设置固定宽高,overflow: hidden。这个 demo 选项不同,.upper 的高度会变化,但 .lower 项目的高度总是填满剩余空间。3. 下层盒子设置填满剩余空间。5. HTML 结构。
css-上下布局，上面高度任意值，下面盒子自适应填满剩余部分
wang_59881的博客
12-15 3264
已知整个盒子的高度为500px，上下布局，上盒子任意高度，下面盒子都可以自适应填满剩余部分，上下盒子都不知道高度。
CSS中position的百分比表示法及绝对定位居中
wayne0902的博客
06-21 1万+
设置了定位position: absolute的盒子，将top设为0%，盒子顶部将会紧挨着父元素（已定位）的顶部，若设为100%，则盒子顶部将会紧挨着父元素底部。 计算公式为：top_percent = 子盒子顶部距父盒子顶部的距离 / 父盒子高度由此可以理解：.element { width: 200px; height: 100px; position: absolut
如何让一个百分比宽的盒子宽高一样
Lee的430博客
05-18 1226
<!--一个盒子放4张图片，让图片的宽高一样，可自适应盒子宽度 使用padding和 position定位--> <ul> <li><p><img src="" /></p></li> <li><p><img sr
盒子元素垂直居中的几种方式
才华有限的博客
08-11 2333
垂直居中的四种实现方式 使用margin 利用百分比进行垂直居中 使用margin:auto 进行居中显示 使用css3的transform属性进行垂直居中 使用flex 布局进行垂直居中 //先设置必要的样式 html 结构 <div class="box"> <div class="box1"> 我是要被垂直居中的盒子...
手把手教你CSS水平、垂直居中的10种方式(小结)
12-30
emmm大家都懂的，话不多说，先直接贴一个总结和效果图。 总结 PC端有兼容性要求，子元素宽高固定，推荐absolute + 负margin PC端有兼容要求，子元素宽高不固定，推荐absolute + transform PC端无兼容性要求，推荐...
css图片垂直居中 css中如何实现图片垂直居中
12-13
在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的...
CSS实现同一行的图片和文字垂直居中对齐的方法
12-13
本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下： 有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于...
CSS让图片垂直居中和底端对齐的代码
12-10
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐！更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码： <!DOCTYPE ...
html常见盒子居中小结
热门推荐
a785975139的博客
12-04 4万+
html常见盒子居中小结     在写界面时，经常被元素居中的问题困扰。经过一番查阅资料和摸索，鄙人实践出了一套常见元素居中的办法，现在记录下来，以便日后参考。     元素在标准文档流和非标准流中的表现有所不同，所以居中方法也要分开来进行说明。     一、标准文档流 标准文档流里，元素被分为块级元素和行内元素。常用的块级元素有div、h1~h7、li等，它们能够设置宽和高；如果不显示设
百分比盒子字体垂直居中
bruno_mars_brother的博客
12-30 512
父盒子（div）设置属性如下： height:100%; display:table; 子盒子（span）设置属性如下： display:table-cell; vertical-align:middle;
百分比宽度div如何水平居中
个人IT博客
05-15 5233
HTML代码如下： CSS样式如下： #box{ position: relative; } #container{ position: absolute; width:30%; height:100px; background: #ccc; } 关键点在于： 需要水平居中元素的父元素需相对定位，本身则绝对定位，并给出 left: 0; right: 0; mar
thymeleaf设置css样式，矩形百分比填充背景色
小划乐的博客
12-10 1万+
对调查结果进行统计的页面，在div的style中拼接后台参数，显示百分比 <tr th:each="option:*{obj.list}"> <td th:text="*{option.title}">选项</td> <td th:text="*{option.poll}">小计</td> <td th:inline="...
html盒子模型布局百分比,盒模型中的百分比和auto探讨及居中的应用
weixin_31094177的博客
06-10 464
一、盒模型中百分比和auto盒模型中属性值可以是数值、关键字、函数、百分比和auto等，本文重点探讨下常用的、非常相似的、都需要浏览器计算的的百分比和auto 。二者最大区别据某博文中总结是：auto与子元素有关，100%与父元素有关。 总体来说是正确的，但要修正一点就是margin的auto是与父元素有关 。下面是盒模型(只考虑 块级元素 )中各属性对百分比和auto处理情况。几点重要说明：所有...
css响应式布局左、右上、右中布局
最新发布
fengchengwu2012的博客
05-03 280
【代码】css响应式布局左、右上、右中布局。
前端科举八股文-CSS篇
星海拾遗
04-25 1665
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
css盒子模型垂直居中
08-02
要实现CSS盒子模型的垂直居中，可以使用不同的方法。其中一种方法是使用grid布局。在父元素的样式中，设置display为grid，然后使用justify-items和align-items属性将子元素水平和垂直居中。例如： .container { display: grid; justify-items: center; align-items: center; height: 100vh; } .element { /* 可以设置宽高等样式 */ } 另一种方法是使用flex布局。在父元素的样式中，设置display为flex，然后使用justify-content和align-items属性将子元素水平和垂直居中。例如： .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .element { /* 可以设置宽高等样式 */ } 还有一种方法是使用flex布局的另一种写法。在父元素的样式中，设置display为flex，然后使用justify-content和align-items属性将子元素水平和垂直居中。例如： .father { width: 200px; height: 200px; background-color: lightcoral; display: flex; justify-content: center; //水平居中 align-items: center; //垂直居中 } .son { width: 100px; height: 100px; background-color: lightgreen; } 以上是三种常用的方法来实现CSS盒子模型的垂直居中。具体选择哪种方法取决于你的需求和项目的要求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小疯疯0413

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值