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