css_margin塌陷问题

问题描述

<div class="father">
<div class="child1"></div>
<div class="child2"></div>
</div>

child1设置了margin-top时,margin-top会作用在father上

child2设置了margin——bottom时,margin-bottom会作用在father上

解决方法

  • 给father设置 overflow:hidden;
.father{
overflow:hidden;
}

历史遗留问题,这样解决最好,因为不会影响father的大小,其他方式会影响father的大小,比如:

  • 给father设置不为0的padding(内边距)
  • 给father设置不为0的border(边框)

body的默认样式

body {
display: block;
margin: 8px;
}

CSS居中布局问题

水平居中

  • 子元素是块元素-div...

    margin: 0 auto;
  • 子元素是行内元素-span 或 行内块元素-img

    text-align:center;

垂直居中

  • 子元素是块元素-div

    margin-top:(父元素高度-子元素高度)/2;
  • 子元素是行内元素-span 或 行内块元素-img

    line-hight=父元素height;
    vertical-align:middle;
    • 如果想要绝对垂直居中,父元素font-size:0; 子元素再单独覆盖设置font-size;

CSS出现空白问题

元素之间出现空白

  • 原因:行内元素、行内块元素彼此之间的换行会被浏览器解析为一个空白字符

  • 解决方法:

    给父元素设置

    font-size:0;

行内块底部出现空白(幽灵块)

  • 原因:行内块元素和文本的基线(x的最底端)对齐,而文本的基线和文本行的最底端是有一定距离的

  • 解决办法

    • 给行内块设置

      vertical:middle;
      vertical:bottom;
      vertical:top;
      //vertical:baseline不行,因为这就是默认的基线对齐,和改之前没有区别
    • 给父元素设置

      font-size:0;
    • (不推荐)

      display:block;

CSS_相关问题及解决_持续更新的更多相关文章

  1. Android开发中Eclispe相关问题及相应解决(持续更新)

    1.Eclipse项目中的Android Private Libraries没有自动生成. 一般而言,在Android开发中,项目中引用到的jar包会放到项目目录中的libs中,引入库会放到Andro ...

  2. Android开发中的问题及相应解决(持续更新)

    最近博客写的少了,以后还得经常更新才行. ------------------------------------------------------------ 1.特定业务需求下try cath ...

  3. git使用之错误分析及解决(持续更新)

    错误一: 使用 $ git push -u origin master 出现如下错误: error: src refspec master does not match any. error: fai ...

  4. SLAM细碎内容积累_来自各种技术交流群_持续更新

    imu标定 工具包:imu_utils,   imu_tk,   kalibr 用kalibr做标定,相机和imu的采样频率要求:相机20,imu100.kalibr也可以做鱼眼相机+imu的联合标定 ...

  5. 我遇到的CocoaPods的问题(也许后期会解决,持续更新)

    在此博客中写下两类关于CocoaPods的问题: 未解决的问题:可以留着以后解决 已经解决的问题:可以备份以后回头再参考解决同样的问题 <已解决的问题> 解决方法是:pod install ...

  6. ubuntu使用问题与解决记录[持续更新]

    1. 添加到计划任务 为脚本增加可执行权限 sudo chmod +x yeelink.sh 将脚本加入cronjob(计划任务) sudo crontab -e 在cornjob文件中添加下面一行, ...

  7. M_LROOT,LD_LIBRARY_PATH, “Not all extension Dlls were loaded”问题原因及解决方法(持续更新)

    最近在需要在云主机上进行压力测试,所以需要Linux的Agent. 一.安装:教程可以百度,大概步骤如下: 1.Upload Linux.zip to 指定的机器 2.解压,chmod 777 $Li ...

  8. 【java】Java相关学习参考链接(持续更新)

    How to do in java,https://howtodoinjava.com/,Java手册,分版本,并且有每个版本的新特性的详细解析. Java World,https://www.jav ...

  9. Tomcat异常及解决办法——持续更新中

    公司项目,开发语言为java,中间件为Tomcat,运行过程中,从Tomcat出现了一些异常,现将异常及解决办法记录如下,仅供参考.(不断在补充中.......) 异常一: 1.日志内容 org.ap ...

  10. Linux相关——记录gdb基本操作(持续更新)

    -----------2018.9.26更新标记----------- gdb的确是个很强大的东西啊,这里记录一下gdb的基本操作吧 后续可能会补充,但暂时感觉够用了就不写多了. 首先是ubuntu终 ...

随机推荐

  1. Python property、setter、deleter

    面向对象封装特点之一就是通过实现好的方法来访问,限制对数据的不合理访问,把对象状态私有化,仅供类的内部进行操作 下方示例,Test方法的number属性类实例的时候传递1,number是一个公开属性, ...

  2. day47:Bootstrap

    什么是Bootstrap? Bootstrap是一个开源框架,是对html\css\js\jquery等的封装,用法,复制黏贴一把梭. 关于Bootstrap的一些常用网址 网址: https://w ...

  3. day11:return关键字&全局/局部变量&函数名的使用&函数的嵌套&nonlocal关键字&locals/globals

    关键字:return 自定义函数的返回值,return可以把值返回到函数的调用处        1.return+六大标准数据类型,还有类和对象,函数        如果不定义return,默认返回的 ...

  4. DG:模拟failover故障与恢复

    问题描述:情形是当主库真正出现异常之后,才会执行的操作,那么我们执行过failover 之后,如何在重新构建DG,这里我们利用flashback database来重构.模拟前主库要开启闪回区,否则要 ...

  5. 好奇心驱使下试验了 chatGPT 的 js 代码的能力

    手边的项目中有个函数,主要实现图片分片裁剪功能.可以优化一下. 也想看看 chatGPT 的代码理解能力,优化能力,实现能力,用例能力. 于是有了这篇文章. 实验结果总结: chatGPT 确实强大, ...

  6. 【Ubuntu】 Perf工具的使用

    一.perf工具的安装 sudo apt-get install linux-tools-common sudo apt-get install linux-tools-"$(uname - ...

  7. C++核心知识回顾(函数&参数、异常、动态分配)

    复习C++的核心知识 函数与参数 传值参数.模板函数.引用参数.常量引用参数 传值参数 int abc(int a,int b,int c) { return a + b * c; } a.b.c是函 ...

  8. 最新版新款影视直播粉红色UI的CMS源码/带教程/支付已接

    demo软件园每日更新资源,请看到最后就能获取你想要的: 1.最新版新款影视直播粉红色UI的麻豆CMS源码/带教程/支付已接 基于苹果CMS v10影视系统框架开发的前端模板,带会员中心,可设置试看付 ...

  9. Mysql中如果建立了索引,索引所占的空间随着数据量增长而变大,这样无论写入还是查询,性能都会有所下降,怎么处理?

    索引所占空间的增长确实会对MySQL数据库的写入性能和查询性能造成影响,这主要是由于索引数据过多时会导致磁盘I/O操作变得非常频繁,从而使性能下降.为此,可以采取以下几种方式来减缓这种影响: 1. 限 ...

  10. .Net8的快速JIT,分层编译,R2R的设置

    前言 本篇通过一些简单的JIT设置,比如快速JIT,适用于循环的快速 JIT,分层编译,R2R等核心内容设置,快速进入.Net8核心区域. 概括 1.快速JIT 什么是快速JIT,顾名思义,被Rosy ...