高度自适应第一种情况

1.高度不去设置,或者高度设置auto 内容撑开父元素的高度。
2.内容撑开父元素的高度 -> 最小高度的设置 min-height
3.浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度,会出现高度塌陷

解决高度塌陷的方法

(1)给出现高度塌陷的元素添加:overflow:hidden;
原理:overflow:hidden;触发了一个 BFC(布局逻辑)
BFC规定:计算BFC高度时候,浮动元素也参与计算。
弊端:隐藏掉定位在当前元素外围的内容。

(2)在浮动元素的下方(同级)添加一个空的div,给div设置样式div{clear:both;}
原理:添加的空div添加了clear:both;忽略上方同级添加浮动的元素留出的空间。在父元素最底下显示,撑 开父元素高度。
弊端:形成代码的冗余(出现高度塌陷,添加一个div)

(3)万能清除法:

.clear_fix:after{
content:".";
clear:both;
display:block;
height:;
overflow:hidden;
visibility:hidden;
}
.clear_fix{
zoom:;
}

007办公资源网站 https://www.wode007.com

高度自适应第二种情况

让子元素高度随着父元素高度进行改变。

让一个元素在浏览器窗口完全铺满

前提条件:

body,html{
height:%;
}

clear

clear:both; 当前元素会忽略上方添加浮动的元素 留出来的空间。
(闭合浮动)
clear的属性值:

clear:left
clear:right
clear:both

伪对象选择符

1.元素选择符

::after{
content:"";
}

说明: 在某个元素的后面用css的形式添加内容(图片、文本)。
2.元素选择符

::before{
content:"";
}

说明: 在某个元素的前面用css的形式添加内容(图片、文本)。
3.元素选择符

::first-letter{

}

说明:控制第一个字符的样式
4.元素选择符

::first-line{

}

说明:控制第一行的样式

display:none;
 

将元素彻底隐藏,不再占据空间

visibility:hidden;

将元素隐藏,占据空间,在页面上留下一片空白

CSS技术让高度自适应减少很多不必要的检测的更多相关文章

  1. CSS两列高度自适应,右边自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css控制元素高度自适应

    可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...

  3. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  4. DIV+CSS左右列高度自适应问题

    其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...

  5. CSS布局之-高度自适应

    何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...

  6. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  7. css实现左边高度自适应右边高度

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. css实现 textarea 高度自适应

    此textarea非彼textarea ,有经验的老司机们应该知道html标签contenteditable这个属性. 利用此属性使当前的标签成为可以输入的状态,等同于输入框. 演示地址:https: ...

  9. (转)iFrame高度自适应

    第一种方法:代码简单,兼容性还可以,大家可以先测试下: function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

随机推荐

  1. Java实现台阶问题

    1 问题描述 一个台阶总共有n级,如果一次可以跳1级,也可以跳2级,求总共有多少种跳法. 2 解决方案 2.1 递归法 如果整个台阶只有1级,则显然只有一种跳法.如果台阶有2级,则有两种跳法:一种是分 ...

  2. java实现砝码称重

    5个砝码 用天平称重时,我们希望用尽可能少的砝码组合称出尽可能多的重量. 如果只有5个砝码,重量分别是1,3,9,27,81.则它们可以组合称出1到121之间任意整数重量(砝码允许放在左右两个盘中). ...

  3. vscode的个人配置

    前言 此篇只是为了记录自己vscode的设置,防止以后配置丢失,无实际意义 { "files.autoSave": "afterDelay", "ed ...

  4. 浅谈js运行机制

    前言 因为js的运行机制十分重要,理解起来也十分抽象,仍还是在这里做个记录,加深自己的记忆. 总之,希望本文的内容能够对您的学习或者工作有所帮助.另,如果有任何的错误或者不足请指正! 如何理解js单线 ...

  5. 运用Navicat for MySQL进行MSSQL数据转移MYSQL

    当前不同数据库进行数据转移已经不是一件麻烦事情,特别是有很多很方便的工具,而最近我在搜集各种数据时候,也需要进行大量的数据转移,并且数据库和所转移的数据库表都不同,这次给大家介绍个最简单的方法,就是使 ...

  6. Scrapy 小技巧(一):使用 scrapy 自带的函数(follow & follow_all)优雅的生成下一个请求

    前言 如何优雅的获取同一个网站上下一次爬取的链接并放到生成一个 Scrapy Response 呢? 样例 from urllib import parse import scrapy class S ...

  7. tensorflow2.0学习笔记第二章第二节

    2.2复杂度和学习率 指数衰减学习率可以先用较大的学习率,快速得到较优解,然后逐步减少学习率,使得模型在训练后期稳定指数衰减学习率 = 初始学习率 * 学习率衰减率^(当前轮数/多少轮衰减一次) 空间 ...

  8. ASP.NET Core通过Nacos SDK读取阿里云ACM

    背景 前段时间,cranelee 在Github上给老黄提了个issues, 问到了如何用Nacos的SDK访问阿里云ACM. https://github.com/catcherwong/nacos ...

  9. 环境篇:呕心沥血@CDH线上调优

    环境篇:呕心沥血@线上调优 为什么出这篇文章? 近期有很多公司开始引入大数据,由于各方资源有限,并不能合理分配服务器资源,和服务器选型,小叶这里将工作中的总结出来,给新入行的小伙伴带个方向,不敢说一定 ...

  10. WAMP3.1 安装php_redis.dll扩展并配置php.ini

    一. 下载对应版本的php_redis.dll 下载地址:http://windows.php.net/downloads/pecl/releases/redis 注:php7目录下有php7.dll ...