CSS宽高自适应

宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。
元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。

1、宽度自适应
元素宽度设置为100%。(块元素宽度默认为100%)
2、元素具备最小高度的自适应
min-height属性:最小高度;

说明:
IE6浏览器不识别该属性,height属性在IE6就类似min-height作用。
hack1:mine-height:value; _height:value;
hack2: mine-height:value; height:auto!improtant; height:value;

min-height(最小高度)
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
注:IE6及以下版本不识别该组属性。

3、高度自适应
1.元素高度自适应窗口高度
设置方法:html,body{height:100%;}
需要自适应的元素:height:100%;
2.自适应元素高度
父元素:height:value;
需要自适应父元素高度的子元素:height:100%;

height:auto,是指根据块内内容自动调节高度。
height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,211评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,942评论 5 15
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,138评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,460评论 0 11
  • 文|月半猫 每一个女生心中都有一个公主梦,希望自己的另一半能像王子一般,优秀、英俊,对爱情忠贞不渝。可现实生活中,...
    一条流浪的猫阅读 189评论 0 0

友情链接更多精彩内容