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 小时前
PySide6从0开始学习的笔记(二十六) 重写Qt窗口对象的事件(QEvent)处理方法
笔记·python·qt·学习·pyqt
中屹指纹浏览器1 小时前
中屹指纹浏览器多场景技术适配与接口封装实践
经验分享·笔记
web打印社区2 小时前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
RFCEO2 小时前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
BugShare3 小时前
Obsidian 使用指南:从零开始搭建你的个人知识库
笔记·obsidian
深蓝海拓3 小时前
PySide6从0开始学习的笔记(二十五) Qt窗口对象的生命周期和及时销毁
笔记·python·qt·学习·pyqt
跃渊Yuey4 小时前
【Linux】线程同步与互斥
linux·笔记
AI视觉网奇4 小时前
FBX AnimSequence] 动画长度13与导入帧率30 fps(子帧0.94)不兼容。动画必须与帧边界对齐。
笔记·学习·ue5
科技林总4 小时前
使用Miniconda安装Jupyter
笔记
woodykissme5 小时前
倒圆角问题解决思路分享
笔记·学习·工艺