响应式布局(弹性布局 响应式布局的实现方式及应用)


1.浮动+百分比布局

floa:left  /right

 with:100% ...

注:网页的显示内容会随着浏览器的伸展而伸展,收缩而收缩。

2.flex布局

   css3引入 ,又称弹性盒模型。

*在屏幕和浏览器窗口大小发生改变时也可以灵活的调整布局

*控制元素在页面的布局方向

*按照不同于文档对象模型(DOM)所指定的排序方式对屏幕上的元素重新排序

语法

    display:flex;

     *div{

 display:flex;

   }

    *div div1{

   flex:1

   }

  *div div2{

   flex:1

   }


1、)伸缩流方向  flex-direction

  *决定主轴的方向 (即项目的排列方向),可以简单的将多个元素的排列方向从水平方向改为垂直方向,或者反之。

 

 

 

 

 

 

 

 

 

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM