css 小细节点收藏

最新推荐文章于 2024-11-01 16:54:21 发布

郑大那只鸟

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量95

点赞数

分类专栏： HTML 文章标签： css html

本文链接：https://blog.csdn.net/zzuzhaohp/article/details/119739671

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文探讨了在未设定宽高的内容盒子中，padding和margin如何影响元素的大小。通过一个示例代码，展示了当父级盒子固定大小，子盒子高度依赖内容时，改变padding如何影响布局。建议使用浏览器开发者工具进行实时调整，以直观理解这一概念。

摘要由CSDN通过智能技术生成

对于未定下宽高的内容盒子元素，padding和margin只会影响内容盒子的大小，谁让你不定好个度，只好内卷。
下面代码解释，最外层是父亲盒子，当事人盒子没有宽高，显示时的高度由子盒子的内容而定。可以找个菜鸟教程的平台试一下代码，然后用浏览器工具调整padding试试就明白了

<div style="width:250px;height:250px">
		<div style="background-color:red;"><div class="gift-location">
                   您的位置：<a href="">首页</a>&gt;<a href="">游戏礼包</a>
             </div></div></div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

郑大那只鸟

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端解析Json字符串中有\r\n换行符

hq.zheng的博客

01-25

3万+

一.原因后端接口返回的数据换行采用了\r\n方式，使得json文本无法解析带换行符的内容二.解决方法将Json字符串中所有的\r\n转成\\r\\n 注意：不能使用replace(/[\r\n]/g, "\\r\\n")同时\r\n转换，如果是\r\n连续出现的时候，就会被替换两次，三次....死循环下去。可以分两次转换： replace(/[\r]/g, "\\r").re...

10个CSS3动画工具，值得你收藏！

2401_85122925的博客

06-12

371

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

参与评论您还未登录，请先登录后发表或查看评论

12 个要收藏的前端 CSS 网站

web前端开发

05-01

2395

英文 | https://betterprogramming.pub/12-front-end-css-generator-websites-to-bookmark-cc557079b0ac翻译 | 杨小爱使用 CSS 时，有很多任务可能具有挑战性且难以正常完成。这不是因为他们的困难，而是因为我们缺乏好用的 UI 生成工具。幸运的是，我们可以在网上找到一些工具。这些工具将...

CSS炫酷光晕按钮特效

南城

08-19

1128

一个旋转光晕的按钮。该效果不仅提升了视觉吸引力，也增强了用户的交互体验。利用 CSS 的强大功能，我们可以轻松实现复杂的动画效果，有兴趣的可以尝试使用起来～专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

css左侧投影_你所不知道的 CSS 阴影技巧与细节

weixin_39597868的博客

12-21

480

关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于box-shadow的用法。最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖到的新内容，而且有一些很有意思，遂打算再起一篇。本文的题目是 CSS 阴影技巧与细节。CSS 阴影，却不一定是box-sh...

纯CSS丝滑边框线条动画

南城

05-27

1323

纯CSS基于两个元素的1像素间距透出边框线条，配合使用`backdrop-filter`设置纯背景模糊效果，实现炫酷边框线条动画

【建议收藏】css晦涩难懂的点都在这啦

weixin_44181173的博客

10-27

786

首发原文链接: https://juejin.im/post/6888102016007176200 前言 CSS大家肯定都是会的但是每个人所撑握的情况都不一样，特别是已经工作几年的前辈(这里指的是我司)很多CSS玩法都不知道，可能他们已经习惯了用组件，但是面试的时候又不可避免问，所以我整理了下CSS比较晦涩难懂的点总结写了这篇文章，在最后也会有些面试中常问的CSS相关面试题，看完全文面试就不用慌了????。目录???? [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img

十个CSS3动画工具，你必须收藏！

qq_38110572的博客

02-22

2792

1、css3Gen - CSS3动画生成器 css3 Gen为你提供了一个易于使用的可以快速生成基本动画的动画生成器。虽然你无法使用它来完成复杂的作品，但是如果你想要不费劲的创建一个标准的动画，这个工具将会是一个很好的选择。不需要任何手动写代码，只需要在通过设置属性表单，预览结果，然后将符合预期的简单代码复制粘贴到自己的CSS文件即可。 CSS3Gen在线工具地址：http://css3gen.com/css3-animation/ 2、CSS Animate 如果你需要更复杂的动画，你会发现CSS An

【值得收藏】10个实现炫酷UI前端效果的CSS生成工具

2401_84619342的博客

06-24

684

地址：https://www.iconshock.com/svg-icons/在设计的时候，我们都注重简约。不过，有时我们喜欢添加一些渐变效果，这样会显得图标层次更加丰富一些，而这个工具，就可以帮助我们提升工作效率，哪怕你没有设计能力，你也可以设计出漂亮的图标。而这些精美的图标和大量渐变可为你提供创作灵感。地址：https://easings.co/在一系列界面上测试常见的缓动曲线。或生成自己的自定义贝塞尔曲线。地址：https://bansal.io/pattern-css。

【CSS】试试酷炫的 CSS 3D 视角

pingan8787

07-08

561

写这篇文章的缘由是因为看到了这个页面：糯米-未来大学 3D View 页面[1]运用 CSS3 完成的 3D 视角，虽然有一些晕 3D，但是使人置身于其中的交互体验感觉非常棒，运用在移动端...

收藏 CSS JS VBS 参考手册

03-06

【标题】"收藏 CSS JS VBS 参考手册" 是一个综合性的资源集合，涵盖了三种在Web开发中至关重要的编程语言和技术：CSS（层叠样式表）、JavaScript和VBScript。这些参考手册通常包含了详尽的语法说明、示例代码以及...

CSS+DIV固定顶部导航代码-不跟随页面滚动，附源文件，经典收藏

04-09

这个主题的标题“CSS+DIV固定顶部导航代码-不跟随页面滚动，附源文件，经典收藏”正是针对这一功能的实现。下面将详细讲解如何使用CSS和HTML的DIV元素来创建这样一个静态顶部导航。首先，我们需要了解HTML结构。在...

html+css3电影卡片

03-15

本项目“html+css3电影卡片”旨在利用这两种技术来创建一个具有专业外观的电影展示卡片，通常用于电影推荐、在线视频平台或者个人收藏分享等场景。在HTML5中，我们首先会使用`<div>`元素作为卡片的基础结构，通过...

手把手教你基于HTML、CSS搭建我的相册（下）