源码网,专注为站长提供最优质的源代码服务 CSS3演示 | 站长工具 | 网页特效 | 网页模板 | 网页素材 | PSD素材 | 手机系统 | W3C教程
广告加载中...

红色字符和背景标识的为比较实用的结构固定宽度CSS版式布局

  • 1列固定宽度居中
  • 1列固定宽度居中+头部
  • 1列固定宽度居中+头部+尾部
  • 1列固定宽度居中+头部+导航+尾部
  • 2列固定宽度居中左窄右宽型
  • 2列固定宽度居中右窄左宽型
  • 2列固定宽度居中平分型
  • 2列固定宽度左窄右宽型+头部
  • 2列固定宽度右窄左宽型+头部
  • 2列固定宽度左窄右宽型+头部+尾部
  • 2列固定宽度右窄左宽型+头部+尾部
  • 2列固定宽度左窄右宽型+头部+导航+尾部
  • 2列固定宽度右窄左宽型+头部+导航+尾部
  • 2列固定宽度左窄右宽型+头部+导航+尾部
  • 2列固定宽度右窄左宽型+头部+导航+尾部
  • 3列固定宽度居中
  • 3列固定宽度居中+头部
  • 3列固定宽度居中+头部+尾部
  • 3列固定宽度居中+头部+导航
  • 3列固定宽度居中+头部+导航+尾部
  • 2列左窄右宽、高度自适应+头部+导航+尾部
  • 2列右窄左宽、高度自适应+头部+导航+尾部
  • 2列左窄右宽高度自适应且未知高度底部平齐、型+头部+导航+尾部
  • 2列右窄左宽、高度自适应且未知高度底部平齐+头部+导航+尾部

红色字符和背景标识的为比较实用的结构自适应(弹性)宽度CSS版式布局

  • 2列右窄左宽、高度自适应且未知高度底部平齐+头部+导航+尾部
  • 1列自适应宽度+头部
  • 1列自适应宽度居中+头部+尾部
  • 1列固定宽度居中+头部+导航+尾部
  • 2列左侧固定,右侧自适应宽度,中间无缝型
  • 2列右侧固定,左侧自适应宽度,中间无缝型
  • 2列左侧固定,右侧自适应宽度
  • 2列右侧固定,左侧自适应宽度
  • 2列左侧百分比右侧自适应
  • 2列左侧固定,右侧自适应宽度+头部
  • 2列右侧固定左侧自适应宽度+头部
  • 2列左侧固定右侧自适应宽度+头部+尾部
  • 2列右侧固定,左侧自适应宽度+头部+尾部
  • 2列左侧固定,右侧自适应宽度+头部+导航
  • 2列右侧固定左侧自适应宽度+头部+导航
  • 2列左侧固定右侧自适应宽度+头部+导航+尾部
  • 2列右侧固定左侧自适应宽度+头部+导航+尾部
  • 3列左右侧固定,中间列自适应居中
  • 3列左右侧固定,中间列自适应居中+头部
  • 3列左右侧固定,中间列自适应居中+头部+尾部
  • 3列左右侧固定,中间列自适应居中+头部+导航
  • 3列左右侧固定,中间列自适应居中+头部+导航+尾部
  • 2列左侧固定右侧自适应宽度,未知高度+头部+导航+尾部
  • 2列右侧固定左侧自适应宽度,未知高度+头部+导航+尾部
  • 2列左侧固定右侧自适应宽度,未知高度且底部平齐+头部+导航+尾部
  • 2列右侧固定左侧自适应宽度,未知高度且底部平齐+头部+导航+尾部

标准布局常见问题及解决办法

CSS2.0盒模型层次平面示意图和3D示意图
CSS2.0盒模型层次平面示意图和3D示意图
3像素问题及解决办法
当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,请参考例29、31的解决方法
上边容器浮动后,下边的容器跟着浮动,造成页面错乱
如以上例子中的footer必须要单独占一行,但当sidebar浮动后,content的高度小于sidebar的高度时,footer也跟着浮动到sidebar右侧了,造成页面错乱。解决办法是在maincontent和footer之间插入一个容器,设置样式 clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除,即可使页面正常
当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?
这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!--[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!--[if IE]>中,这样应该可以通过验证了
相对定位与绝对定位
规划页面时,许多时候需要用到相对定位或绝对定位,这里边有个技巧,掌握后有些地方就不用繁冗的js了。就是当父容器使用相对定位后,此时子元素再使用绝对定位,位置是相对于父元素。如果父元素没有定位,那么子元素的绝对定位是相对于浏览器
IE6双倍边距bug
当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px,而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug