android recyclerview item自适应高度_web前端学习:高度自适应知识点
一、宽高自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。
它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。
(1)宽度自适应
块元素宽度默认为auto
(2) 高度自适应
元素{height:auto;}/高度不写
二、浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)
解决高度塌陷的方法(清除浮动的方法):
方法1:给父元素添加声明overflow:hidden;(缺点:会隐藏溢出的元素)
hack2:在浮动元素下方添加空块元素,并给该元素添加声明:clearboth;height:0;overflow:hidden;
(缺点:在结构里增加了空的标签,不利于代码可读性,且降低了浏览器的性能)
hack3:万能清除浮动法
选择符:after{content:".";clear:both;display:block;height:0;visibility:hidden; }
父容器选择符{zoom:1;}/*为了兼容IE6,IE7*/
三、伪类选择符/ ::伪元素或叫伪对象
1):after(与content属性一起使用,定义在对象后的内容。)
如:div:after{content:url(logo.jpg);}
div:after{content:"文本内容";}
2):before:与content属性一起使用,定义在对象前的内容。
如:div:before{content:"在其前放内容";}
3):first-letter:定义对象内第一个字符的样式。
4):first-line:定义对象内第一行的样式。
说明:
*(:first-letter;:first-line该伪类只能用于块级元素。)
四、visibility:hidden/visible/inherit;隐藏/可见
visibility:hidden;和display:none;的区别:
visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,而 display:none属性会隐藏内容且空间消失。
元素具备最小高度最小宽度,最大高度,最大宽度的自适应
min-height属性:最小高度;
min-width:最小宽度
max-height:最大高度
max-width:最大宽度
注:IE6及以下版本不识别该组属性。
注:height属性在IE6里就类似min-height作用。
五、Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。
本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。
-----、过滤器(filter)
1)下划线属性过滤器
当在一个属性前面增加了一个下划线后,由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明,但是在IE6及更低版本浏览器中会继续解析这个规则。
语法:选择符{_属性:属性值;}
2)!important关键字过滤器
它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它(important),我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。
语法:选择符{属性:属性值!important;}
兼容元素具备最小高度自适应的方法:
hack1:min-height:value; _height:value;
hack2:min-height:value; height:auto!important; height:value;(建议使用)
3)*/+属性过滤器
当在一个属性前面增加了*后,该属性只能被IE7及以下版本浏览器识别,其它浏览器忽略该属性的作用。
语法:选择符{*属性:属性值;}
4)扩展内容
9:IE9以下的 语法:选择符{属性:属性值9;}
:IE8 及以上 语法:选择符{属性:属性值;}
六、元素高度自适应窗口高度
设置方法:html,body{height:100%;}
2)自适应元素高度:height:100%;
扩展:
七、<iframe> 标签 框架
语法:<iframe src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height="" frameborder="1/0" name="iframe名称" scrolling="yes/no/auto"> </iframe>
frameborder="1/0" 1代表有框架边框 /0代表无框架边框
滚动条:scrolling="yes/no/auto" yes :有 no:无 auto:自动
<a href="" target="iframe的name属性值"></a>表示超链接的目标地址在框架中打开。
android recyclerview item自适应高度_web前端学习:高度自适应知识点相关推荐
- android recyclerview item自适应高度_web前端入门到实战:css让一个盒子的高度自适应屏幕剩余的部分...
项目中,移动端要自适应,由于有时候数据不够,所以导致了有的区域空白 要求:没有数据的时候能够充满屏幕,数据超出屏幕就出现滚动条 做法 1-让容器高度充满这个屏幕 在容器内容很少的情况下,要想让这个容器 ...
- css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动 这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1.高度塌陷 举个例子我们看一下. 我们在 ...
- mysql like in 数组_Web前端学习教程之常用的MySQL优化技巧
想要成为一个高薪Web前端工程师,除了需要了解前端三要素以及常用的框架外,数据库知识同样不可忽视.目前市场上比较流行的数据库有MySQL.Oracle.Redis,今天千锋郑州老师就给大家分享一些常用 ...
- web后端语言_web前端学习路线图_快速入门web前端学习路线图
如何学好Web前端开发技术?前端学习路线是什么?如今,移动开发的发展依旧如火如荼,企业对于Web前端人才需求产生了巨大的缺口,从事Web前端开发的程序员们则是其中较大的获益者.Web前端的广泛运用,造 ...
- 前端学习——JS基础知识点复习
一. JS复习 1.1 如何使用JS HTML标签内使用JS,要求写在onclick等事件属性或者href属性中(不推荐使用) 页面中的script标签内可以直接写JS代码 script标签的src属 ...
- echarts 自适应高度_web 报表工具如何自适应
现在的报表用户已经不再将报表作为一个单纯的报表工具看待了,有时候也会当作页面工具来使用,这时为了页面显示工整美观,就需要报表能够自适应宽度.下面我们就基于润乾报表来讲一下是如何做到自适应展现报表. 产 ...
- android recyclerview item点击事件,RecyclerView的Item的单击事件
RecyclerView 的每个Item的点击事件并没有像ListView一样封装在组件中,需要Item的单击事件时就需要自己去实现,在Adapter中为RecyclerView添加单击事件参考如下: ...
- flex 左右布局_web前端学习:移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
- flowlayout布局怎么换行_web前端学习怎么入门
web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...
- Android recyclerview item获焦时更新UI导致列表自动滚动到获焦处
问题场景描述:scrollview嵌套rv,rv item里有edittext,当edittext处于获焦状态时,item中有数据改变导致更新UI时,此时列表会自动滚动到获焦处. 分析原因:更新UI时 ...
最新文章
- 【AI白身境】一文览尽计算机视觉研究方向
- 自己实现spring核心功能 三
- FZU Monthly-201903 获奖名单
- 通过javascript改变form提交的action,实现不同的按钮向不同的action提交同一个form的数据
- 使用python判断流媒体mp3格式
- 二进制位交换,反转,与统计1的个数
- 【Spring Cloud笔记】 Eureka通过集群实现高可用
- 经典论文阅读记录-持续更新
- python工业互联网应用实战13—基于selenium的功能测试
- java 反转二叉树 非递归_【刷算法】翻转二叉树的递归和非递归解法
- Spark分组取TopN
- matplotlib制作多张图
- pgm图像缩小C语言,C++将二进制(P5)图像转换为ascii(P2)图像(.pgm)
- java开发工具小结
- 天载股票开户美股再度创出新高
- WPS如何给公式加上右边序号
- array方法常用记载
- 错误: 找不到符号 java
- 方差分析(ANOVA)简记
- 【ARM裸机s5pv210 】程序烧录