关于CSS3中的min-height等的使用
一、min-height
当我们需要让某个容器不能低于某个高度，但是不能将高度固定在这个高度，希望其能够随着容器内内容的增多而变高时，我们可以对容器设置一个min-height来让该容器获得该特性。（通俗来讲，当容器内容高度已经超过最小高度时，容器就会随着内容的高度变化而变化）
注意点：1.min-height属性不能为负值 2.最小高度不包括容器边框、外边距、填充。（最小高度是会包括内边距的，这意味着当上下内边距与内容高度之和大于最小高度时，容器会被撑大）
二、max-height
该属性与min-height类似，当内容小于最大高度时，容器高度会随内容的减少而进行压缩，而内容大于最大高度时，容器不会随着内容的增多而变大，而内容会直接溢出容器
注意点：1.max--height属性不能为负值 2.最大高度不包括外边距、内边距、边框。
最大宽度与最小高度与上述两者相似
关于CSS3中的min-height等的使用的更多相关文章
- CSS3中的3D动画实现(钟摆、魔方)--实现代码
CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性 all|[attr] transition-duration 过渡时间 transition-delay ...
- css3-10 css3中的边框样式有哪几种
css3-10 css3中的边框样式有哪几种 一.总结 一句话总结:1.border-radius 2. box-shadow 3.border-image三种,box一种border两种 1.css ...
- img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover
img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...
- CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- CSS3中的动画功能（一）
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- css3中transition和animation的回调处理
弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬＿┬)看来还是要再接再励啊w(ﾟДﾟ)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...
- [css] CSS3中的单位
FROM http://www.qianduan.net/understand-the-unit-of-length-in-the-css.html CSS3中的单位: css3中引入了一些新的单位: ...
- CSS3中DIV水平垂直居中-2(3)
用到CSS3中display的新属性. HTML <div class="parent"> </div> CSS html,body{ width: 100 ...
随机推荐
- 》》》Win10配置Jdk环境变量
转载:Win10如何配置Jdk环境变量 (baidu.com) 对于每一位做Java开发的朋友来说,Jdk是必须要安装的,安装好了Jdk,其实并没有结束,还需要配置Jdk的环境变量,系统在不断地更新, ...
- win10彻底关闭系统更新 - 禁用 Windows Update Medic Service服务（1803和1809版本）
这几天有点苦恼呀,不,应该说是挺苦恼,我的新本儿到了几天之后,就开始推荐更新,可以我从心里就不想着更新,那么就要阻止它了,按照原来的办法,进行了双重阻止,这在之前是屡试不爽的,但是还是一直在提醒我 ...
- css 卡片hover效果
.card { height: 430px; width: 100%; background:#ffffff; border:1px solid #eaeefb; border-radius:5px; ...
- h5 json 生成excel
引入库文件 创建下载按钮 Download Demo Excel 实现转换 var data = [ ["Joa Doe", "joa@doe.com"], [ ...
- 转载-GNSS缩写
GNSS常用的缩略语汇总,可能不全,但会不断丰富,欢迎各位批评指正!! 1|01.大表格 缩略语 全称 中文 ADOP ambiguity dilution of precision 模糊度精度因子 ...
- css样式 div垂直水平居中对齐
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 微信小程序之配置业务域名踩过的坑
1.在配置业务域名弹窗中保存按钮一直加载状态,无法保存则刷新当前界面后重新扫码打开该弹窗.2.检验文件一定要放在目标服务器域名下前端文件夹中,否则(放在后台代码文件夹中)访问不到地址.
- CMMI-QA工作流程（角色区分）
qa 是如何工作的,如何保证产品质量的? 首先制定质量保证计划->根据过程清单和产品清单对组织级和项目级内容进行检查->不符合项记录在不符合项问题记录表中.反馈项目精力,跟踪问题知道问题解 ...
- wpf 解决画图模糊或抗锯齿以及文字模糊或抗锯齿问题
解决方案中使用的.Net FrameWork版本:4.6.1 画图模糊或抗锯齿: 控件属性加入 SnapsToDevicePixels="True" 文字模糊或抗锯齿: 控件属性 ...
- 下载base64图片
下载 this.downloadFile('二维码',that.img64) downloadFile(fileName, content) { let aLink = document.create ...