CSS核心笔记002

margin塌陷问题

复制代码
第一个子元素的上margin会作用在父元素上,
最后一个子元素的下margin会作用在父元素上

解决

复制代码
1. 给父元素设置 不为0的pandding 
2. 给父元素设置宽度不为0 的border
3. 给父元素设置样式 overflow:hidden

margin合并问题

复制代码
兄弟元素的下外margin和会下面兄弟的上外margin会取一个最大值而不是合并计算

解决

复制代码
布局上下兄弟元素,设置一个上下外边距即可

元素之间空白问题

复制代码
行内 行内块 之间距离会解析成为一个空格

解决

复制代码
给父元素设置 font-size:0,即可.在给元素单独设置样式

行内块 行内元素

复制代码
被父元素当成文本处理.可以设置 文本的 居中对齐效果等
比如 text-align 、 line-height 、 text-indent 

行内块幽灵空白问题

原因

复制代码
行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。

解决

复制代码
方案一: 给行行内块设置 vertical ,值不为 baseline 即可,设置为 middel 、 bottom 、
top 均可。
 方案二: 若父元素中只有一张图片,设置图片为 display:block 。
 方案三: 给父元素设置 font-size: 0 。如果该行内块内部还有文本,则需单独设置 fontsize 。
相关推荐
碎叶城李白1 小时前
若依学习笔记1-validated
java·笔记·学习·validated
HuashuiMu花水木3 小时前
PyTorch笔记1----------Tensor(张量):基本概念、创建、属性、算数运算
人工智能·pytorch·笔记
笑衬人心。6 小时前
Ubuntu 22.04 修改默认 Python 版本为 Python3 笔记
笔记·python·ubuntu
金色光环6 小时前
【Modbus学习笔记】stm32实现Modbus
笔记·stm32·学习
zhanshuo6 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang6 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
zyxzyx6667 小时前
Flyway 介绍以及与 Spring Boot 集成指南
spring boot·笔记
西岭千秋雪_8 小时前
Redis性能优化
数据库·redis·笔记·学习·缓存·性能优化
HuashuiMu花水木9 小时前
Matplotlib笔记4----------图像处理
图像处理·笔记·matplotlib
DES 仿真实践家10 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python