CSS布局

2018-05-15
H5原生与OC交互第三次课-盒子模型004-脱离标准流

float属性

属性的常用取值

• left：脱离标准流，浮动在父标签的最左边。
• right： 脱离标准流，浮动在父标签的最右边。

任意一种类型的标签，一旦脱离标准流就会强制转化为行内块级标签

position属性

• absolute：生成绝对定位的元素，相当于static定位以外的第一个元素进行定位。元素的位置通过“left”、“top”、“right”以及“bottom”属性进行规定。
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过“left”、“top”、“right”以及“bottom”属性进行规定。
• relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20”会向元素的LEFT位置添加20像素。
• static：默认值。没有定位，元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明）。
• inherit：规定应该从父元素集成position属性的值。
  H5原生与OC交互第三次课-盒子模型005-水平居中&垂直居中

水平垂直居中

行内标签和行内块级标签：在父标签中设置 text-align: center;
块级标签： 在自身设置 margin: 0 auto;

text-align: center;//让内容居中

垂直居中

行内标签和行内块级标签 ： 在父标签中设置 line-height == 内容高度
块级标签 ：

position： absolute；
left：50%；
top：50%
transform： translation(-50%, -50%)