css 响应式布局
响应式布局概念
响应式布局概念
一些复杂的布局案例
CSS position 属性用于指定一个元素在文档中的定位方式,其中 top, right, bottom 和 left 属性则决定了该元素的最终定位
当元素被浮动时,会脱离文档流,根据 float 的值向左或者向右移动,直到它的外边界碰到父元素的内边界或另外一个浮动元素的外边界为止,是 CSS 布局中实现左右布局的一种方式
弹性盒子是一种用于按行或按列布局的一维布局方法,元素可以膨胀以填充额外的空间,收缩以适应更小的空间
CSS 网格是一个用于 web 的二维布局系统。利用网格,你可以把内容按照行与列的格式进行排版。另外,网格还能非常轻松地实现一些复杂的布局
首先看个例子,学习下概念
计算过程,以 iPhone 6 为例