多语言展示
当前在线:503今日阅读:57今日分享:41

css自适应弹性盒布局怎么实现自适应全屏

css自适应弹性盒布局怎么实现自适应全屏
工具/原料

Dreamweaver.exe

方法/步骤
1

新建html文件

2

创建div及其内容

3

创建div样式

4

预览效果如图

5

去除最外边和中间div的宽度

6

预览效果如图

7

添加-webkit-box-flex:1; -moz-box-flex:1;样式使其自适应浏览器的宽度

8

预览效果如图

9

缩小浏览器窗口,中间div的宽度随之缩小

10

添加margin:0; padding:0;样式去除左右上下的空隙

11

预览效果如图附上样式

注意事项

注意兼容性

推荐信息