CSS响应式布局

2022/3/25 23:22:51

本文主要是介绍CSS响应式布局,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

响应式布局就是在任何情况下,页面布局效果都不会发生变化,他会根据用户的电脑屏幕,尺寸大小来改变自身的布局。

浏览器窗口,VH和VW,VH 的计算方法就是,将窗口的大小分为100份,vh 的计算方法和 vh 是一样的,一个是计算高,一个是计算宽。

弹性盒子,弹性盒子是CSS3的一种新布局模式,代替浮动使布局更加简便,对齐方式包含了水平方向和垂直方向,弹性项目可以通过css重新排序。

 display: flex; 代替浮动,flex-direction: column; 元素排列,column:是纵向排列,row:横向排列,也是默认,row-reverse:反向排列,flex:进行空间分配,flex-wrap:自动换行,flex-flow:将 flex-direction 和 flex-wrap 两种结合到一起,flex-start:左对齐,flex-end:右对齐,flex-center:居中对齐,

这篇关于CSS响应式布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程