bfc的一些应用

来源：互联网发布：淘宝产品标题怎么写好编辑：程序博客网时间：2024/06/06 12:58

好久在这里写文章了，
谈谈bfc吧。概念什么的就不说了。
很简单的一个东西，在布局的时候确实真的很有用处的。
写了个列子http://codepen.io/tianzi77/pen/MKwLpr

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>BFC应用之目录线</title></head><body>  <h1>BFC日常应用目录、栏目标题等</h1>  <div class="catalogue">    <div class="bfc">      <div class="name">CSS3的REM设置字体大小</div>      <div class="page">w3cplus</div>      <div class="line"></div>    </div>    <div class="bfc">      <div class="name">FONT SIZING WITH REM </div>      <div class="page">Jonathan Snook</div>      <div class="line"></div>    </div>     <div class="bfc">      <div class="name">There’s more to the CSS rem unit than font sizing </div>      <div class="page">css-tricks</div>      <div class="line"></div>    </div>    <div class="bfc">      <div class="name">In Defense Of Rem Units </div>      <div class="page">Matthew Lettini</div>      <div class="line"></div>    </div>     <div class="bfc">      <div class="name">Font sizing with rem could be avoided </div>      <div class="page">Harry</div>      <div class="line"></div>    </div>    <div class="bfc">      <div class="name">响应式十日谈第一日：使用 rem 设置文字大小</div>      <div class="page">一丝</div>      <div class="line"></div>    </div>   </div></body></html>

body {  width: 757.5px;  margin: 0 auto;  font-family: Arial;  background: red;  -webkit-background-size: cover;  background-size: cover;  color: #fff;}h1 { text-align: center; }.bfc { height: 30px; line-height: 30px; font-family: "Tahoma"; margin: 0 10px; padding: 10px 0; }.bfc:before,.bfc:after { content: "."; display: table; visibility: hidden; font-size: 0; height: 0; line-height: 0; }.bfc .name { float: left; font-size: 12px; font-weight: 700; padding-right: 15px; }.bfc .line { height: 1px; font-size: 0; background-color: #fff; position: relative; top: 15px; overflow: hidden; }.bfc .page { float: right; margin-left: 15px; }

这种就是简单的目录排版结构，实现的方法有很多，但是这样实现的话可拓展性比较高，
还有就是输入验证码的时候还剩下多少秒的布局，其实用这个也是有很多好处的，还可以增加icon。以便后期维护

<div class="form_field">  <label class="input_label">图标</label>  <div class="input_addon">    <span>重发 (2)秒</span>    <span>&times;</span>    <span>通过添加任意内容都会自动扩容</span>  </div>  <div class="input_control">    <input type="text" class="input_txt" value="Hello, BFC!" placehold="请输入短信验证码" />  </div></div>

.form_field {  height: 40px;  font-size: 12px;  line-height: 40px;  background-color: gray;  color: #fff;}.input_label {  float: left;  width: 40px;  height: 40px;  text-align: center;  background-color: green;}.input_addon {  float: right;  height: 40px;  padding: 0 5px;  text-align: right;  background-color: red;}.input_addon span {  float: right;  margin: 0 5px;}.input_control {  overflow: hidden;}.input_txt {  width: 100%;  height: 40px;  background-color: #0000ff;  border: none;  color: #fff;  font-size: 24px;  overflow: hidden;}

1 0