样式布局与 BFC

一、几类视图

内联视图：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;
}

source：

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

 相关要点

①容器塌陷：

source：

<div class="box-1">
	<button class="pull-right box-2">button 1</button>
	<button class="pull-right box-2">button 2</button>
</div>
<button class="box-3">button 3</button>

解决方案  ——  子元素全为浮动， box-1 为塌陷容器。为 box-1 添加 clearfix 或 bfc 或设定高度（不建议指定容器高度，建议由子元素撑开）

source：

<div class="box-1 clearfix">
	<button class="pull-right box-2">button 1</button>
	<button class="pull-right box-2">button 2</button>
</div>
<button class="box-3">button 3</button>

附：style

<style type="text/css">
	body {
		margin-top: 10rem;
	}
	.br-grey {
		border: 1px solid #ccc;
	}
	.br-blue {
		border: 1px solid blue;
	}
	.br-red {
		border: 1px solid red;
	}
	.box-1 {
		display: block;
		/*height: 10rem;*/
		width: 50rem;
	}

	.box-2 {
		display: inline-block;
		line-height: 2rem;
	}

    .box-3 {
    	display: inline-block;
        line-height: 2rem;
    }
</style>

 

②将浮动元素单独封装在一起

目的——  避免浮动元素与非浮动直接接触。把所有浮动的元素封装一层不会塌陷（并且不为浮动）的父容器。（括号里表示浮动的父容器虽然也不会塌陷，但不符合要求;  主动限定容器高度也不建议使用）

<div class="bfc 或 clearfix">
    <div class="br-grey box-1 pull-left ">
        <button class="br-red box-2 pull-right">button 1</button>
        <button class="br-red box-2 pull-right">button 2</button>
    </div>
</div>
<button class="br-red box-3">button 3</button>

 

③若父容器同时包含浮动与非浮动元素

则只有非浮动元素会撑开容器，若父容器清除浮动，则所有元素都会撑开容器，并且以最高子元素为父容器最终高度。一个父容器中，，尽量保证子元素全部为浮动或非浮动元素，否则容易发生中心线错乱（因为不在一个流中）。

显示结果：

主动调整高度或框高，使得中心线高度一致

.box-1 {
	display: inline-block;
    line-height: 5rem;
	width: 60rem;
	padding: 2rem;
}

.box-2 {
	display: inline-block;
	line-height: 5rem;
}

.box-3 {
	display: inline-block;
    line-height: 2rem;
}

 

  

行内布局

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

特点：

inline-block 与 block 元素都可以通过 text-align: center 水平居中。

如果父类 line-height 设的很高，可以使子元素垂直居中。或者 inline-block 之间是水平排列，以其中最大的行高为当前行高。

  相关要点：

inline-block 相邻，如果有一方包含一个 block 块，则那一方的 高度被挤开。可能导致相邻的其它 inline-block 塌陷。解决方法是，将那个 block 添加浮动。

显示效果

<div class="container">
  <div class="row">
    <div class="left">33</div>
    <div class="right">22
      <div class="block">This is a block</div>
    </div>
  </div>
</div>

或者

<div class="container">
  <div class="row">
    <div class="left">33</div>
    <div class="right">
      <div class="block">block</div>22
    </div>
  </div>
</div>

附 style

<style>
.left {
  display: inline-block;
}
.right {
  display: inline-block;
}
.block {
  display: block;
  height: 80px;
  width: 50px;
}
</style>

 

定位布局

-- 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;    /* 有了这个就自动居中了 */
}

 

② 行内布局实现多元素垂直居中 

<ul class="tch-menu">
    <li>序号</li>
    <li>用户名</li>
    <li>真实姓名</li>
    <li>所在地域</li>
    <li>院校工<br/>作单位</li>
    <li>法律职业资格证书</li>
    <li>联系电话</li>
    <li>提交时间</li>
    <li>审核人</li>
    <li>状态</li>
    <li>操作</li>
</ul>

附 style

.tch-menu {
    display: inline-block;
    background-color: #FAFCFC ;
    font-size: 14px;
    padding: 4px 0;
    letter-spacing: -3px; /*消除行内布局间隔*/
}

.tch-menu li{
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    min-width: 80px;
    word-wrap:break-word;
    word-break:break-all;
    margin: 0;
    padding: 0;
    list-style: none;
    letter-spacing: 0; /*消除行内布局间隔*/
}

实现效果：

 

 

  

③ 导航条浮动布局

方案 —— 内部全为浮动元素。为保证外部高度由子元素撑开并设定上下边距，需要清除浮动并设定 padding。

<div class="br-grey box-1 clearfix">
    <button class="br-red box-2 pull-right">button 1</button>
    <button class="br-red box-2 pull-right">button 2</button>
	<button class="br-red box-3 pull-left">button 3</button>
</div>

附：style

.box-1 {
	display: block;
	width: 50rem;
	padding: 2rem;
}

.box-2 {
	display: inline-block;
	line-height: 2rem;
}

.box-3 {
	display: inline-block;
	line-height: 2rem;
}

 

 

233