bfc的一些应用

最新推荐文章于 2024-03-23 00:06:53 发布

u011263845

最新推荐文章于 2024-03-23 00:06:53 发布

阅读量442

点赞数 1

分类专栏： html5&&css3 文章标签：布局 css

本文链接：https://blog.youkuaiyun.com/u011263845/article/details/50260371

版权

html5&&css3 专栏收录该内容

37 篇文章

订阅专栏

好久在这里写文章了，
谈谈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;
}