absolute 和 relative 定位
- relative 依据自身定位
- relative 依据自身定位
BFC:一块独立渲染的区域,内部元素的渲染不会影响边界以外的元素。
响应式布局概率
一些复杂的布局案例
CSS position 属性用于指定一个元素在文档中的定位方式,其中 top, right, bottom 和 left 属性则决定了该元素的最终定位
当元素被浮动时,会脱离文档流,根据 float 的值向左或者向右移动,直到它的外边界碰到父元素的内边界或另外一个浮动元素的外边界为止,是 CSS 布局中实现左右布局的一种方式
常用容器语法
弹性盒子是一种用于按行或按列布局的一维布局方法,元素可以膨胀以填充额外的空间,收缩以适应更小的空间
圣杯布局
CSS 网格是一个用于 web 的二维布局系统。利用网格,你可以把内容按照行与列的格式进行排版。另外,网格还能非常轻松地实现一些复杂的布局
- 写具体数值,如 30px,则继承该值(30px,好理解)
答案:15px
- margin-top 和 margin-left 负值,元素向上、向左移动
rem 是一个长度单位
首先看个例子,学习下概念
计算过程,以 iPhone 6 为例
- media-query,根据不同的屏幕宽度设置根元素 font-size
块状元素,独占一行
用正确的标签做正确的事情。
水平居中
盒模型宽度计算