css3宽高自适应三种方法，css宽度和高度怎么设置

用CSS2及CSS3弹性盒两种方式实现如下布局,要求自适应浏览器窗口宽高...

1、CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

2、对于弹性盒子的理解弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成，而弹性容器则可以通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器，其中弹性容器内可以包含了一个或多个弹性子元素。

3、你可能需要检查和修改你的CSS样式以适应这种情况。具体来说，你可能需要使用媒体查询（Media Queries）。媒体查询是CSS3的一个特性，允许你根据设备的特定条件应用不同的CSS样式。

4、图片自适应，且不超过原始大小，需要设置最大宽度，代码如下：img{ width：100%； max-width：100%；}。

相关问答

Q1: 如何用css3实现div自适应高度

1、首先创建或者打开我们的web项目，新建一个html文件和css文件即可，如图所示。html页面代码如图所示，定义一个div，然后给一个id属性即可。

2、第一种：一定高度内容加多时自适应高度，而内容少时DIV有一定最小高度；第二种：没有最小高度，DIV完全自适应高度。

3、CSS3中的弹性盒模型可以纯粹使用div+css实现你要的效果。

4、所以直接给height IE类浏览器是可以的。但是火狐不行。并且min-height这个样式IE6不认识。所以用IE6HACK即_height只有IE6认识。当超出时 也适应，没有超出时候是这个高度。

5、div高度无法自适应内容两种解决办法：首先要确保这个div是不是是display：inline-block。默认情况下，div是block。可能在设置某些css样式的时候更改了也不一定。

Q2: 怎样用css控制图片自适应大小?

1、在IE6中有效。◎ overflow：hidden； 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。有时候图片太大，会破环网页整齐的布局。

2、这样的操作，一般有两种办法：直接使用CSS属性值；使用JavaScript动态设置CSS值。

3、首先，打开html编辑器，新建一个html文件，例如：index.html。其次，在index.html中的标签中，输入css样式代码：body {background： url(imagejpg) no-repeat；background-size： 250px；}。

4、而且背景图片不会随着滚动条滚动而滚动，实现背景图片的自适应。

5、当遇到这样的DIV CSS布局时候，其实非常简单，我们只需要对图片宽度进行控制，而图片高度不用设置即图片高度会自动适应缩放比例（不设置高度即高度值默认为auto自适应）。

css3宽高自适应三种方法的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css宽度和高度怎么设置、css3宽高自适应三种方法的信息别忘了在本站进行查找喔。