好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML页面布局基础_html/css_WEB-ITnose

本篇博文主要整理一下html页面布局的基础知识。虽然这些知识基本都懂,但是实际用起来,其中的一些细节老是注意不到(>_

盒子模型

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。盒子模型范围包括: border、padding、margin、content 。盒子模型有两种,分别是IE(怪异模式)盒子模型和标准盒子模型。两者的区别是,IE盒子模型content部分包含 padding 和 border ,而标准盒子模型不包括!css3的 border-sizing 属性可以选择特定盒模型: content-boxing (默认 标准盒子模型); border-boxing (IE盒子模型)

     box   /* 标准模式 */.content-box{ box-sizing: content-box; width:200px; height:100px; margin:20px; padding:30px; border:10px solid green; }/* 怪异模式 */.border-box{ box-sizing: border-box; -moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:200px; height:100px; margin:20px; padding:30px; border:10px solid green; }   标准模式

      

查看更多关于HTML页面布局基础_html/css_WEB-ITnose的详细内容...

  阅读:30次