һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+

[CSS] CSS3е

[]
11980 websjy 2014-4-3 09:00:11
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x

ƪУǽһЩCSS3ԣӶHTMLCSSʱסһHTMLCSSʷ˽Ϊʲôǰѡ

ʷ

ʱǵIJһ㡣ͿڴвֵҪߡȻɹʵdz⣩

ĿͶ졣HTMLCSSѾ÷dzӣWeb֪Ⱥ͸ӶվʹõľɵIJַȻѾoutˡȻһʷ⸡ˮ棺в֡

ӵǣǵҳȲǾ̬ġӦʽڻڰٷֱȵпڹ̶960ؿļѾвͨҪ

CSS2淶øеķһ⡣Ϊ˷ֹԪƻIJ֣ҪclearfixַͨԪصĸ߶̮⣨Ԫ׼ԪػΪԴڣǴ󲿷ַֽȻΪһhack漼ɣ

ͨinline-boxķȻڡԪػᱣһУȻ˳СһбռԪȻ۵һСΪΪıԣΪıζHTMLԪ֮ĿհԪ(ոtabС)Inline-blockΪƵģҹIJʮ⡣

ַУķɿΪʲôУڵһλȻкǷҪٴѹݣΪҪһЩ롣յ⣺ģ

ģʲô˵һԪصʵʳߴ߶/+ڱ߾+ߵĿȡ߾ݲʹӱ󣬽ԼԪ֮ӿ϶ÿʱ,25%ӵʵʿȱö࣬ζһû㹻ĿռĸԪء

ⷳ˵вͬĽ߾࣬ǶԪء֪ȫˡǶҪCSSDOMԪأhackʵCSS2ûнĺ÷

Ȼ죬CSS3ṩܺõ֧֣淶רļԡЩԶЩʹǣǿһ

box-sizing: border-box

Ѿ֮һչģ͵ʡͨbox-sizingֵΪborder-boxԽ⡣ͨݿʹߺڱ߾ľҲ㵽width

HTML

  1. <div class="row">
  2.   <div class="column">Col one</div>
  3.   <div class="column">Col two</div>
  4.   <div class="column">Col three</div>
  5.   <div class="column">Col four</div>
  6. </div>
ƴ

CSS

  1. .row:after {
  2.   clear: both;
  3.   content: '';
  4.   display: block;
  5. }

  6. .column {
  7.   -webkit-box-sizing: border-box;
  8.   -moz-box-sizing: border-box;
  9.   box-sizing: border-box;

  10.   float: left;
  11.   min-height: 8em;
  12.   overflow: hidden;
  13.   padding: 2em;
  14.   width: 25%;
  15. }

  16. .column:nth-child(1) { background-color: #9df5ba; }
  17. .column:nth-child(2) { background-color: #9df5d7; }
  18. .column:nth-child(3) { background-color: #9df5f5; }
  19. .column:nth-child(4) { background-color: #9dd7f5; }
ƴ

Demo

Ȼ⹤ĺܰȻҪʹøȻҪ⣬ֻʹڱ߾ΪԪصĿռ䣬߾಻áζڿԪ֮ûʵʵĿռ䣬ݡȻԺܶƷdzãȻǸС

  • Firefox 1
  • Chrome 1
  • IE 8
  • Opera 7
  • Safari 3
width: calc(ٷֱ C )

һΰѡʹcalc()ڲJavaScript¼ԪصʵȡDzͬĵλ

HTML

  1. <div class="row">
  2.   <div class="column">Col one</div>
  3.   <div class="column">Col two</div>
  4.   <div class="column">Col three</div>
  5.   <div class="column">Col four</div>
  6. </div>
ƴ

CSS

  1. .row { margin-left: -1em; }

  2. .row:after {
  3.   clear: both;
  4.   content: '';
  5.   display: block;
  6. }

  7. .column {
  8.   float: left;
  9.   margin-left: 1em;
  10.   min-height: 8em;
  11.   padding: 1em;
  12.   width: -webkit-calc(25% - 3em);
  13.   width: -moz-calc(25% - 3em);
  14.   width: calc(25% - 3em);
  15. }

  16. .column:nth-child(1) { background-color: #9df5ba; }
  17. .column:nth-child(2) { background-color: #9df5d7; }
  18. .column:nth-child(3) { background-color: #9df5f5; }
  19. .column:nth-child(4) { background-color: #9dd7f5; }
ƴ

Demo

¼ʵʳߴһΰѡ񣬵ҵĵǣȻҪҲҪеΪ߾ࡣͬϣһܰѡ񣬵ȻЩ覴á

  • Firefox 4
  • Chrome 19
  • IE 9
  • Opera ?
  • Safari 6 (appears to be a little buggy)
Flexbox

ֺضΪԪءеǵûΪʵ൱Ϊʾݶ仯Ѿʹñ񲼾֣Աǩһѡ пд긴ӡкܶԣӢݽˡ˵ǣChirs Coyierдһеΰָұᵽ

HTML

  1. <div class="row">
  2.   <div class="column">Col one</div>
  3.   <div class="column">Col two</div>
  4.   <div class="column">Col three</div>
  5.   <div class="column">Col four</div>
  6. </div>
ƴ

CSS

  1. .row {
  2.     display: -webkit-flex;
  3.     -webkit-flex-direction: row;
  4.     -webkit-flex-wrap: nowrap;
  5.     -webkit-justify-content: space-between;

  6.     display: flex;
  7.     flex-direction: row;
  8.     flex-wrap: nowrap;
  9.     justify-content: space-between;
  10. }

  11. .column {
  12.     margin: 0.5em;
  13.     min-height: 8em;
  14.     padding: 1em;
  15.     width: 25%;
  16. }

  17. .column:nth-child(1) { background-color: #9df5ba; }
  18. .column:nth-child(2) { background-color: #9df5d7; }
  19. .column:nth-child(3) { background-color: #9df5f5; }
  20. .column:nth-child(4) { background-color: #9dd7f5; }
ƴ

Demo

ô򵥣ֲ֧Ǻܺá

  • Firefox 18
  • Chrome 21
  • IE 10
  • Opera 12.10
  • Safari 6.1

CSS3Բ޸һЩʷ⣬ҿвCSSΨһhackȻҵֱ֧ƽƽΣḻ˱֣һкܺõ֧֡

עԭģhttp://flippinawesome.org/2014/03/03/grids-in-css3/


CSS3, ֪, , ʷ, Ԫ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2017-11-22 04:52

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б