CSS快速学习10:高度自适应
高度自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。
元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。
(1)宽度自适应
元素宽度设置为100%。(块元素宽度默认为100%)
(2)元素具备最小高度的自适应
min-height属性:最小高度;
说明:IE6浏览器不识别该属性,height属性在IE6里就类似min-height作用。
hack1:min-height:value; _height:value;
hack2:min-height:value; height:auto!important; height:value;
(3)高度自适应
1)元素高度自适应窗口高度
设置方法:html,body{height:100%;}
需要自适应的元素: height:100%;
2)自适应元素高度:
父元素:height:value;
需要自适应父元素高度的子元素: height:100%;
height:auto,是指根据块内内容自动调节高度。
height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。
background-size: length|percentage|cover|contain;
Length:设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
Percentage:以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
Cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
Contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
(4)浮动元素父元素高度自适应(高度塌陷)
hack1:给父元素添加声明overflow:hidden;
hack2:在浮动元素下方添加空div,并给该元素添加声明:clear:both;height:0;overflow:hidden;font-size:0;
hack3:万能清除浮动法
:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
*visibility:hidden/visible;隐藏/可见
*visibility:hidden;和display:none;的区别:
visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失。
CSS快速学习10:高度自适应相关推荐
- [css] 怎么让body高度自适应屏幕?为什么?
[css] 怎么让body高度自适应屏幕?为什么? 为何只设置body{height:100%}不行? height:100%是相对于父元素来说的,如果只设置body的高度属性,由于其父元素是html ...
- css设置元素 网页高度自适应,css高度自适应如何实现?css高度根据内容自适应的简单方法...
在进行网页开发时,可能会遇到这样的情况,网页中的内容会超出你原先设置的高度或者宽度,这时就需要实现高度自适应或者宽度自适应,下面这篇文章将给大家来介绍关于css高度自适应. PS:css宽度自适应的介 ...
- css float 高度,CSS中 浮动float 高度自适应
文章总结了浮动float 高度自适应及在这过程中碰到的一些问题方法总结. 先来看一个示例效果的对比: 这是清除浮动之前的效果.可以明显看到column1,column2,column3这三个浮动元素的 ...
- CSS样式怎么解决高度自适应的问题?
在css中宽度可以使用百分比布局 rem布局 flex 来实现自适应,高度确不可. 可以使用vh单位来实现高度自适应的问题,实例代码如下 100vh代表高度占满屏幕 也可以写其他数值. 注意事项要 ...
- CSS完美实现iframe高度自适应(支持跨域)
https://blog.csdn.net/qq_32915337/article/details/79900222 Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用 ...
- CSS快速学习(2021.2.7-15)
注意: 这波是赶作业,所以看的速成视频.(从win32到electron到html和css,假期过大半东西还没做出来555) 仍旧是众所周知的学习网站:b站,找到了DasAutoooo老师的视频. 学 ...
- Python快速学习10: 循环的对象及设计 (生活的规律)
正文 循环对象的并不是随着Python的诞生就存在的,但它的发展迅速,特别是Python 3x的时代,循环对象正在成为循环的标准形式. 灵活的循环方式 (我晚饭后爱上了萨克斯,因为这是生活的一部分.属 ...
- html 内部浮动外部不,CSS:外部层高度自适应内部浮动层高度的方法
为了节省时间,根据个人测试在浮动层的外部层里加入overflow:auto;zoom:1; 即可适应内部浮动层的高度,似乎没有以下说的那么复杂,这样做发现问题或有更好提议的同学,欢迎留言讨论. 以下为 ...
- CSS快速学习9:浏览器兼容
五大浏览器内核 •Trident (MSHTML) (三叉戟:三叉线:三齿鱼叉) •Gecko (壁虎) •Presto ( 迅速的) •Webkit (Safa ...
最新文章
- linux php进程端口占用,linux如何查看端口占用情况
- 结婚和年龄有直接关系吗?
- OpenCV中Canny边缘检测
- 大规模研究表明,睡眠不足、压力给大脑带来的伤害,犹如脑震荡
- MySQL(4)---MYSQL 数据类型
- 在sql server中用正则表达式替换html标签,SQL Server中利用正则表达式替换字符串
- Hadoop开发环境
- SqlServer Convert函数 日期格式化
- 几种常用的抽奖方案综述(草稿)
- 深度学习入门(鱼书)学习笔记
- vs2013连接access2016
- c语言汉字编码转换,请问如何用C语言实现汉字和Unicode编码的转换 求程序
- python中无法安装xpath库,Python爬虫 | xpath的安装
- cass简码大全_考考你......列出 南方cass 简码指令50个。
- 云班课作业互评(python3+selenium)
- 元学习兴起,卷积“落幕” | NeurIPS2020研究趋势总结
- 【2016-05-09】程序员的日常:咖啡
- 微信小程序通过百度智能云实现人脸检测
- hijackthis日志祥解
- 阿里云服务器宝塔phpstudyIIS建站
热门文章
- eve服务器维护后怪物刷新,【独家披露】EVE异常空间怪物那些事儿(一)普通异常...
- cad2016中选择全图字体怎么操作_抖音上的书单都是用啥做的,抖音书单图片怎么做...
- [C++] - lambda capture的成员函数 异步调用
- QT5开发及实例学习之十七Qt5双缓冲机制
- QT5开发及实例学习之十六Qt5基础图形的绘制
- mysql处理重复数据
- 【bzoj4709】[Jsoi2011]柠檬 斜率优化
- 03.swoole学习笔记--web服务器
- LR实战之Discuz开源论坛——网页细分图结果分析(Web Page Diagnostics)
- asp.net JavaScriptSerializer实现序列化和反序列化