样式布局与 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

转载于:https://www.cnblogs.com/lemos/p/9826164.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值