CSS3新特性属性

1.  box-sizing 属性

指定两个boxes接壤:决定内容的宽度和高度是否减去各自双方该边框和填充的宽度从指定的”宽度”和”高度”属性计算。

<style> 
div.container
{
	width:30em;
	border:1em solid;
}
div.box
{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	width:50%;
	border:1em solid red;
	float:left;
}
</style>
<div class="container">
    <div class="box">这个 div 占据了左边的一半。.</div>
    <div class="box">这个 div 占据了右边的一半。</div>
</div>

参考来源:

http://zh.learnlayout.com/box-model.html

对比

http://zh.learnlayout.com/box-sizing.html

2. 多列布局 column-count、column-gap

CSS columns是很新的标准,所以你需要使用前缀,并且它不被IE9及以下和Opera Mini支持。还有许多和 column 相关的属性,点击这里了解更多

<style type="text/css">
.spcontainer {
  position: relative;
  border: solid #6AC5AC 3px;
  overflow: auto;
}
.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}
.spcontainer section .label, .spcontainer section .endlabel {
    background: #6AC5AC;
}
.spcontainer section .label {
    top: 0px;
    left: 0px;
    position: absolute;
}
.spcontainer section .endlabel {
    bottom: 0px;
    right: 0px;
    position: absolute;
}
</style>
<div class="spcontainer elem">
  <section class="elem three-column ipsum">
    <span class="label">&lt;div class="three-column"&gt;</span>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
    </div>
    <span class="endlabel">&lt;/div&gt;</span>
  </section>
</div>

3.Flexbox 属性的布局

1).flexbox平分空间布局

<style>
.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}
</style>
<div class="container elem">

  <section class="elem elem-green initial">
    <span class="label">&lt;div class="initial"&gt;</span>
    <p>
      空间足够的时候,我的宽度是200px,如果空间不足,我会变窄到100px,但不会再窄了。
    </p>
    <span class="endlabel">&lt;/div&gt;</span>
  </section>

  <section class="elem elem-green none">
    <span class="label">&lt;div class="none"&gt;</span>
    <p>
      无论窗口如何变化,我的宽度一直是200px。
    </p>
    <span class="endlabel">&lt;/div&gt;</span>
  </section>

  <section class="elem elem-green flex1">
    <span class="label">&lt;div class="flex1"&gt;</span>
    <p>
      我会占满剩余宽度的1/3。
    </p>
    <span class="endlabel">&lt;/div&gt;</span>
  </section>

  <section class="elem elem-green flex2">
    <span class="label">&lt;div class="flex2"&gt;</span>
    <p>
      我会占满剩余宽度的2/3。
    </p>
    <span class="endlabel">&lt;/div&gt;</span>
  </section>

</div>

2).flexbox居中布局

<style>
.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
</style>
<div class="vertical-container elem">
  <span class="label">&lt;div class="vertical-container"&gt;</span>

  <section class="elem elem-green">
    <span class="label">&lt;div&gt;</span>
    <p>
      CSS里总算是有了一种简单的垂直居中布局的方法了!
    </p>
    <span class="endlabel">&lt;/div&gt;</span>
  </section>

  <span class="endlabel">&lt;/div&gt;</span>
</div>

来源:http://zh.learnlayout.com/flexbox.html

 

Leave a comment