CSS网页构造的技能

发布时间:2017-04-17 11:50 来源:互联网 以后栏目:网页设计教程

   构造

  CSS相当重要的感化, CSS的设计初志.

  CSS构造和几年前table横行时的构造又不太一样, 在构造化语义化的HTML文档前面, CSS在格局化文档的衬着后果, 把构造化文档用表示化说话来描述. 简而言之, 就是CSS不须要表示性标签!

  CSS构造技巧依附于三个根本概念: 定位, 浮动, margin把持. 构造技巧之间没有本质的差别, 雷同一种构造让100个前端开辟工程师来做, 能够就有100种办法.

  居中

  在table时代, align和Valign相当的好用, 而在CSS中却没有简单完成的办法,所以在标准化方才开端推行的时辰, 很多重构项目中居中成绩变成了妨碍标准化进步的绊脚石.

  1. 主动外补丁程度居中

  普通情况下程度居中比较轻易完成, 只须要给要居中的容器设定宽度, 和主动程度外补丁便可以了.网页教授教化网

  比如HTML以下:

  CSS以下: 网页教授教化网

  body{}

  .wrapper{width:760px;margin:0 auto;}

  很简单不是吗? 然则有点小成绩... 我们亲爱的IE家族里, IE5.x和IE 6不支撑主动外补丁, 然则异样荣幸的是, IE将 text-align:center 懂得为一切器械居中, 而不只是文本. 哈哈, 可以应用这个Bug.

  将CSS改成:

  body{text-align:center;}

  .wrapper{width:760px;margin:0 auto;text-align:left;}

  这里就用到了一种Hack,不过不会影响其他浏览器的Hack就是好Hack,呵呵, 就先这么用着吧~

  等等, 仿佛Netscape那边也出成绩了, 用Netscape 6将窗口减少到小于容器宽度时, 容器的左边就会跑到屏幕外边去了, 并且还不会有转动条...万恶的浏览器大年夜战啊...

  再来改改我们的CSS:

  body{min-width:760px;text-align:center;}

  .wrapper{width:760px;margin:0 auto;text-align:left;}

  如许就根本上ok了. 网页教授教化网

  2. 定位法程度居中

  我们也能够稍稍复杂的用定位法来完成这个任务. 所谓的定位法是用 position 属性来定义容器地位.网页教授教化网

  异样用下面一例的HTML代码,

  我们用定位法的CSS以下:

  body{margin:0;padding:0;}

  .wrapper{position:relative;left:50%;width:760px;margin-left:-380px;}

  为甚么用相对定位( relative )呢? 能用相对定位( absolute )吗?

  相对定位固然也能够, 然则相对定位会将容器提出文档流, 让前面的文档流到定位容器的地位去了, 略不留意就会被定为的容器隐瞒住前面的内容, 而relative不会将容器提出文档流, 前面的文档流会给定位的容器留下它应有的空间.

  3. 垂直居中

  CSS中比较大年夜的成绩出现了, CSS较难应用简单的办法来完成垂直居中. 网页教授教化网

  在容器中要使文字垂直居中, 那可以将容器的line-height设置的和height一样来完成这个任务,

  然则要使容器垂直居中的话, 那就比较复杂了.

  HTML以下:

  123

  CSS以下:

  body{margin:0;padding:0;height:100%;}

  .wrapper{display:table-cell;vertical-align:middle;width:600px;height:400px;border:solid 1px red;}

  #box{width:200px;margin:auto;vertical-align:middle;border:solid 1px blue;}

  按理说如许便可以了呀, 然则IE下面一点后果都没有...那是由于IE的display属性只接收:block, inline, inline-block, none, inherit, 不接收table, table-cell, table-row, 那就头痛了呀.

  唔, 其实思路有很多, 我供给个中一种:

  CSS以下:

  body{margin:0;padding:0;height:100%;}

  .wrapper{width:600px;height:400px;border:solid 1px red;}

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、