CSS高度坍塌和外边距溢出问题及解决方法使用帮助_元素小白教程

高度坍塌成因父元素 div 未设置高度子元素全部设置浮动(float: left | right;),浮动元素 脱离文档流 且 不占页面空间由于父元素为设置高度,高度靠内部子元素撑开,而今子元素全部脱离文档流,所以此时父元素的高度为 0,给父元素和子元素设置 边框(border: 1px solid #000;)或者 显示父元素轮廓(outline: 1px

CSS高度坍塌和外边距溢出问题及解决方法使用帮助

高度坍塌

成因

CSS高度坍塌和外边距溢出问题及解决方法使用帮助_元素小白教程

    父元素 div 未设置高度子元素全部设置浮动(float: left | right;),浮动元素 脱离文档流 且 不占页面空间由于父元素为设置高度,高度靠内部子元素撑开,而今子元素全部脱离文档流,所以此时父元素的高度为 0,给父元素和子元素设置 边框(border: 1px solid #000;)或者 显示父元素轮廓(outline: 1px solid #000;),会出现子元素超出了父元素的区域范围,即为:高度坍塌现象

解决方法

1 根据子元素的最大高度为父元素设置高度

    前提是要知道子元素高度

2 父元素也设置为浮动

    会影响父元素的兄弟元素,可能破坏原有的页面布局

3 父元素设置 overflow: auto | hidden; 属性

    只要溢出的内容一律都会被隐藏,可能会隐藏不想被隐藏的部分

4 为父元素增加伪元素(推荐)

/**
 .div-parent 为父元素类选择器
 设置 content 为空,父元素最后一个伪元素子元素内容为空
 clear: both 会清除该元素左右两端的所有的浮动元素,即该元素在父元素中处于所有子元素的最     下方,且存在于文档流中,占页面空间;父元素识别到该元素将会自适应高度
*/
.div-parent::after {
    display: table;
    content: "";
    clear: both;
}

外边距溢出

成因

    父元素 div 未设置边框第一个子元素设置了上外边距(margin-top: 10rem;)或者 最后一个子元素设置了下外边距(margin-bottom: 10rem;)导致父元素与子元素一起发生相应的偏移的现象,即为:外边距溢出现象

解决方法

/**
    设置外边距的元素不与父元素直接接触既不会一起发生偏移
而父元素前或后添加的伪元素子元素 content 为空,所以不会出现不希望看到的效果
*/
 /** 上外边距溢出 */
.div-parent::before {
display: table;
 content: "";
 }
  /** 下外边距溢出 */
 .div-parent::after {
 display: table;
content: "";
  }
海计划公众号
(0)
上一篇 2020/03/26 23:33
下一篇 2020/03/26 23:33

您可能感兴趣的内容

  • 谈谈培训机构的骗局入门攻略_培训教程视频

    前言为什么要写这篇文章呢,近些年培训这个话题也比较火,很多在看这篇文章的朋友身边也应该有从培训机构出来的同事或者同学,所以大家应该对培训机构并不陌生,刚好最近也在招人,也面试了不少人,过程暂且不表,就说说看法吧。首先是水平不高,其次是造假包装;然后就是简历雷同、项目经验惊人的相似。不止如此,面完后我也跟其中的一些人私信聊过,他们的经历也类似,毕业没找到工作。

    2020/04/05
  • 大搜车技术小白常识_用技术改变行业

    大搜车技术小白常识 官方网址:https://blog.souche.com/ 简介描述:用技术改变行业 大搜车是中国领先的汽车新零售和新金融平台,大搜车技术博客比较新,更新频率也…

    2020/03/06
  • 我当初为什么写webpack小白攻略Tobias Koppers_webpack小白常识

    原文链接: www.cross-platform-blog.com翻译链接:https://www.zcfy.cc/article/interview-with-webpack-founder-tobias-koppersTobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目

    2020/04/05
  • Ghostnote基础知识教程_给文件/网页/应用添加标签

    Ghostnote基础知识教程 官方网址:https://www.ghostnoteapp.com/ 简介描述:给文件/网页/应用添加标签 Ghostnote是一个适用于MAC电脑…

    2020/03/10
  • 7个好用的TypeScript 新功能基础教程_功能小白攻略

    1. 可选链从 v3.7 可用这是当你尝试访问嵌套数据时的一个痛点,嵌套数据越多,代码就会变得越繁琐。在下面的例子中,要访问 address ,你必须遍历 data.customer.address,而且 data 或 customer 有可能是 undefined,所以通常使用 && 运算符或类似例子中的技巧遍历检查每个层次的定义。现在你可以用 .? 运算

    2020/03/22
  • javascript中如何截取字符串?小白入门_字符串菜鸟教程下载

    JavaScript中截取字符串有三种方法,分别是substring(),substr(),split()。下面本篇文章就来给大家介绍一下它们的使用方法,希望对大家有所帮助。方法1:使用substring()substring()方法用于提取字符串中介于两个指定下标之间的字符。语法:substring(start,stop)● start:一个非负的整数,指

    2020/03/22
  • 带@的css语法,你知道多少?零基础入门_语法使用攻略

    前言css的顶层样式表由两种规则组成的规则列表构成,一种称为at—rule规则,也就是at规则,另一种是qualified rule,也就是普通规则。今天就学习一下at规则正文@charset用于提示css文件使用的编码方式,必须在最前面使用@charset “utf-8”;@import用于引入一个css文件,除了@charset规则不会被引入,可以引入一

    2020/03/31
  • canvas绘制模糊问题小白基础_模糊菜鸟教程网

    模糊原因首先,需要理解canvas的展示机制。
    我绘制了一张375px的canvas,iphone6的宽度也是375px,ok,canvas铺满了整个屏幕。那么canvas的大小就是375px,canvas类似于图片,一张375px的图片,我们就把它当做是图

    2020/03/24
  • 4DB入门知识_日本网页设计风格展

    4DB入门知识 官方网址:http://4db.cc/ 简介描述:日本网页设计风格展 4DB网站是日本的一家致力于分享网站设计展示的站点,通过日本地理位置来方式来划分不同地区的行业…

    2020/03/10
  • 前端越学越越迷茫,如何跳出前端学习的5大误区?指南攻略_学习小白知识

    大家好,今天给大家分享一下我从事WEB前行业一些自己的学习经验分享也希望通过这篇文章,可以帮助到更多正在学习但是又不知道从哪里学习学习的前端的小伙伴,还有一些想要去转行的,但是不知道不知道如何去学习,以及整个市场的情况,还有一些正在从事前端开发的小伙伴吧,好了,希望这篇文章对你有所帮助!首先,学习前端开发是一个漫长的过程,我觉得学习最重要就是坚持和多练。不要

    2020/03/24
  • 如何理解商业渠道上的变化?菜鸟指南_商业菜鸟指南

    1、流量盛宴结束,新品牌还有机会?2、流量成本越来越分散越来越贵中小企业还能再负担起成本?3、流量陷阱越来越多对中小企业来讲承担的网络推广成本将越来越高,不远将成为企业推广的奢侈品,不是任何初创企业可以用得起4、 互联网是中小企业战略转型唯一机会,但成也流量败也流量,用好是机会,用不好将是陷阱反加速失败(推广成本运营成本越来越高,流量陷阱越来越多越来大)流

    2020/04/03
  • granim.js菜鸟指南_轻量级的用来创建流体和交互式渐变动画的js库

    granim.js菜鸟指南 官方网址:https://sarcadass.github.io/granim.js/ GitHub:https://github.com/sarcad…

    2020/03/06
  • UI Garage使用帮助_网页设计、移动UI设计欣赏

    UI Garage小白教程 官方网址:http://uigarage.net/ 简介描述:网页设计、移动UI设计欣赏 Specific design patterns for We…

    2020/03/06
  • 图片预览以及上传显示进度小白知识_上传入门攻略

    在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化。 1.搭建项目基于Vue.js+axios搭建的项目,新建一个Index.Vue项目如下,基本结构可以先可以选择文件,预览文件。<h2 c

    2020/03/26
  • Vue组件的三种调用方式使用教程_Vue使用攻略

    之前在写fj-service-system的时候,遇到了一些问题。那就是我有些组件,比如Dialog、Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然它们有按需引入的功能,但是整体风格和我的整个系统不搭。于是就可以考虑自己手动实现这些简单的组件了。通常我们看Vue的一些文章的时候,我们能看到的通常是讲Vue单

    2020/04/05
  • Object.create()分析及实现基础指南_object小白基础

    Object.create()方法的作用:创建一个新对象,使用现有的对象来提供新创建的对象的__proto__(会返回一个新对象,带着指定的原型对象和属性)。分析默认情况下,js中对象的隐式原型__proto__指向其构造函数的显示原型prototype(这里的指向可以理解为属性与值的关系)// 字面量创建对象
    let obj1 = {}
    obj1.__pr

    2020/03/24