样式布局与 BFC

Posted 2021-01-14 lemos

一、几类视图

内联视图：inline

单行

 

块级视图：block

换行，有高度

 

行内块级视图：inline-block

单行，有高度

 

 

二、几类布局

块级布局

换行，通过设置 margin 水平居中

<div class="center-block">...</div>

source：

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

  

浮动布局

单行，类似流体布局

<div class="pull-left">...</div>
<div class="pull-right">...</div>

source：

.pull-left {  float: left !important;
}
.pull-right {
  float: right !important;
}

 

若全为浮动，则父容器会高度塌陷，需要在此清除浮动。

<div class="clearfix">...</div>

source：

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

 

行内布局

单行，若设定 line-height 垂直方向自动居中。通过设定 text-align 元素将按一定顺序排列。

 

定位布局

-- relative

相对于元素自身最初位置进行偏移，偏移后位置跟最初位置相关联，即最初位置若受其他元素影响，会导致偏移后位置受关联影响。

-- absolute

相对于父类非默认定位，即设置了（‘absolute‘、‘relative‘ 或者 ‘fixed‘）父类元素进行偏移，如果都没有，则相对于  body 进行偏移。脱离文档流。

 

 

三、BFC

mdn说明

 

 

四、相关布局实例

① 绝对定位实现垂直居中

a 一般用法

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

b css3 用法

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

c 特殊用法

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

 

 

 

233