CSS之意想不到的坑(一)

xinxin_csdn

已于 2022-05-09 23:47:34 修改

阅读量137

点赞数

文章标签： css

于 2022-05-05 18:53:11 首次发布

本文链接：https://blog.youkuaiyun.com/xinxin_csdn/article/details/124486719

版权

1. margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠

空内容的<p></p>也会重叠

答案： 15px

BFC会解决这个问题

BFC:一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件：脱离文档流的情况下需要BFC

float不是none
position是absolute 或 fixed
overflow不是visible
display是flex inline-block等

2. margin负值问题

margin-top、margin-left负值，元素本身向上、向左移动

margin-right负值，右侧元素左移，自身不受影响

margin-bottom负值，下边元素上移，自身不受影响

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xinxin_csdn

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

一位大佬对于 Qt 学习的最全总结（三万字干货）

编程与实战的博客

01-21

1万+

击上方“C语言与CPP编程”，选择“关注/置顶/星标公众号”干货福利，第一时间送达！分享一位大佬 Github 上关于 Qt 学习的总结。作者无私分享了一百多个自定义控件以及几本 Qt 的...

总结了一份Qt5 的开发经验

李肖遥的专栏

08-10

2228

关注、星标公众号，直达精彩内容来源：https://gitee.com/feiyangqingyun当编译发现大量错误的时候，从第一个看起，一个一个的解决，不要急着去看下一个错误，往往后面...

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

css如何让两个div上下排列_【CSS】避坑总结

weixin_39630106的博客

11-20

5282

mark下，自己在学习CSS过程的点滴细节心得体会：1、不要用通配符*当多个CSS属性层叠在一起时会产生意想不到的隐患问题。比如：不要写*{margin: 0;padding: 0;}，而是body, h1, h2...{margin: 0;padding: 0;}2、不要轻易用float会破坏文档流结构，用了float一定要记得清除浮动效果，给父容器设置overflow: hidden。3、并不...

css postion你不知道的坑，aboslute、fiexed、relative等值不为static状态时

weixin_42498482的博客

05-11

390

一、z-index基础知识 1.z-index的含义 z-index属性指定了元素及其子元素的【z顺序】，而【z顺序】可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个。 2.属性值 z-index:auto; 默认值 z-index:;整数值 z-index:inherit; 继承 3.基本特性 1>支持负值； 2>支持CSS3 animation动画；（并没什么实用应用场景） 3>在CSS2.1时代，需要和定位元素配合使用如果不考虑C

CSS中使用vertical-align:middle使<span>元素垂直居中的坑

热门推荐

凌卓Nice 的博客

10-29

1万+

在CSS样式中，vertical-align 属性设置元素的垂直对齐方式，想必学过一个前端的人都知道这个东西，也知道怎么用。今天在做项目的时候遇到一个坑，在这里做个记录。先简单说一下vertical-align 这个属性吧，根据查阅文档可以知道它有如下几个参数：baseline：与元素的基线对齐。 middle：与元素中部对齐。 sub：字下沉。 super：字上升。 text-top：...

CSS中margin属性介绍

杨春建的博客

08-02

1263

原文地址：http://www.cnblogs.com/zhuzhenwei918/p/6124263.html 深入理解css中的margin属性　　之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分：　　

原生css实现栅格布局,(译)原生CSS网格布局学习笔记

weixin_28988985的博客

08-04

562

css布局margin介绍,深入理解css中的margin属性（推荐）

weixin_42363277的博客

08-04

1718

之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分：margin--基础知识margin--在同级元素(非父子关系)之间应用margin--在父元素和子元素之间应用(重点)margin--margin值的单位为%时的几种情况第一部分：margin...

css less 不要作用到子对象_前端开发 css、less编写规范

weixin_39784460的博客

12-30

1997

壹 ❀ 引早在大半年前，我在负责整理定义了前端组JavaScript开发规范与less、css样式开发规范。一直想将两个规范整理成文章，但在整理了JavaScript规范后，我花了较多的时间在学习JavaScript基础知识，所以对于样式规范一直处于放置状态。直到上周我收到了一条关于JavaScript规范的评论，提醒了我样式规范不能再拖了，那么在放假前花点时间整理一遍作为复习也算不错。说在前面，...

深入理解css中的margin属性

廿四桥明月夜的博客

10-09

864

深入理解css中的margin属性　　之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分： margin--基础知识margin--在同级元素（非父子关系）之间应用margin--在父元素和子元素之间应用（重点）margin--ma

前端面试题（二）（CSS篇）建议收藏，持续更新中...

Jack, what else can you do besides holding your little darling?

09-28

1117

如何给段落首行缩进？一看题目居然没想起text-indent????，它的规定如下适用于块元素直至单位如下长度值：px em rem 百分比：取决于包含块的width 关键字： each-line：文本缩进会影响第一行，以及使用强制断行后的第一行；hanging：该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。全局值：inherit ini

PostCSS实践技巧：结合实际项目案例学习PostCSS的应用

PostCSS是一个用JavaScript插件转换CSS代码的工具。通过使用各种插件，PostCSS可以帮助开发者优化CSS代码，实现自动添加浏览器前缀、压缩代码、未来CSS语法支持等功能。 ## 1.2 PostCSS与传统CSS预处理器的区别 ...

【高频考点精讲】CSS定位全解析：static、relative、absolute、fixed、sticky的区别和应用场景

全栈老李的博客

05-05

944

🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS定位这个看似简单实则暗藏玄机的话题。我是全栈老李，一个在代码海洋里摸爬滚打多年的老司机。定位(position)这个属性，表面上看就几个值，但用起来却能让不少新手掉坑里。不信？咱们慢慢聊。

Qt开发经验总结

草上爬的博客

12-02

1万+

增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。

Animaster：一次由 CodeBuddy 主导的 CSS 动画编辑器诞生记

繁依Fanyi的博客

05-17

1464

如果你问我：在这个项目中，CodeBuddy 最让我惊艳的是什么？那我会说，不是它能实现这些功能，而是它知道先做什么、再做什么、怎么做最好。整个开发过程中，它完全主导节奏，每一个步骤都恰到好处——没有草率地跳过，也没有啰嗦地拖延。更重要的是，它写的代码几乎不需要我去「救火」或「返工」。你可以把它当作一个经验老到的工程师，它不仅写代码，还会思考架构、风格一致性和用户体验。

CSS详解：特性、选择器与优先级

修炼魔法中....

05-18

1199

CSS（层叠样式表）是前端开发中用于控制网页外观和布局的核心技术。其核心特性包括层叠性、继承性、优先级、响应式设计以及动画与过渡。层叠性决定了多个样式规则作用于同一元素时的最终样式，继承性则使某些属性从父元素传递到子元素。优先级通过选择器的类型和数量决定样式的应用顺序，而响应式设计和动画功能则增强了网页的交互性和适应性。

开发指南115-CSS中选择器关系

wangbing1125的博客

05-18

217

可以用选择器1 选择器2（中间用空格分隔）来表达，也可以在大括号里通过包含关系来表达。注意css本身并不支持嵌套的写法，是scss等提供的扩展能力。举例：input[type="text"]举例::not(button)选择器1 > 选择器2（中间用>分隔）举例 .a > .b。举例 .a + .b。

css 中 content: “\e6d0“ 怎么变成图标的？

小妖666个人笔记

05-17

564

css 中 content: "\e6d0" 怎么变成图标的？

CSS- 4.4 固定定位（fixed）& 咖啡售卖官网实例