美文网首页
CSS宽高自适应

CSS宽高自适应

作者: 冰land | 来源:发表于2018-06-25 08:57 被阅读36次

宽高自适应

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

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%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。

相关文章

  • CSS宽高自适应

    宽高自适应 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适...

  • CSS布局相关

    CSS相关 1.左边定宽,右边自适应方案: 2.左右两边定宽,中间自适应 3.CSS左右垂直居中 设置paddin...

  • js面试题集锦2

    1、css实现图片自适应宽高 2、什么是flex,写出常见属性,以及作用 Flex即:Flexible Box,弹...

  • 前端的面试题(上)

    1、css实现图片自适应宽高 2、什么是flex,写出常见属性,以及作用 Flex即:Flexible Box,弹...

  • HTML+CSS

    1、css实现图片自适应宽高 背景图用background-size: contain,图片标签用object-f...

  • 2019年一些前端的面试题(含答案)

    1、css实现图片自适应宽高 2、什么是flex,写出常见属性,以及作用 Flex即:Flexible Box,弹...

  • iOS Masonry布局(二) - UILabel

    UILabel自适应宽高 UILabel使用Masonry布局时如果不添加宽高约束,视图会根据内容自适应宽高。 示...

  • 知识点(二)

    1. css实现图片自适应宽高 2.讲 flex,手写出 flex 常用的属性,并且讲出作用 flex 是 fle...

  • 图片自适应

    1.平均分为3份,图片宽 根据 屏幕宽 自适应,图片宽高 根据 图片宽 的大小自适应,始终不会扭曲 图片...

  • css实现图片自适应宽高

    根据容器,给定百分比宽或者高 使用背景图片,通过background-size: cover/contain又或者...

网友评论

      本文标题:CSS宽高自适应

      本文链接:https://www.haomeiwen.com/subject/oafsyftx.html