css布局遇到的问题(css中常见问题及解决办法)
div+css布局错乱问题解决方法
div是一种分块机制，这就要求在设计页面时要弄清各块之间级联关系
这个问题需要把left和right再使用一个div包含起来，直接上代码啦，下边就可以实现你要求的布局。foot总在下边，并能随着left，right的高度改变自动调整。
div
id="box"
div
id="content"
div
id="left"这里是页面的左部分内容/div
div
id="right"这里是页面的右部分内容/div
/div
div
id="foot"这里是放页尾的版权信息等的/div
/div
/******css样式**/
style
type="text/css"
#content{
width:
100%;
background:
aqua;
overflow:
auto;
}
#left{
width:50%;
float:
left;
height:250px;
background:
blue;
}
#right{
width:50%;
float:
right;
height:100px;
background:
fuchsia;
}
#foot{
height:
30px;
background:
gray;
}
/style
CSS布局问题
div是块元素，在浏览器里默认样式就是占据一整行，除非你对其使用了浮动和宽度设置转换成行内元素。
所有的标签默认样式都是从左右开始对齐的；那么第一个div不需要是用浮动，
第二个div里的a向右对齐，那么需要使用右浮动；
代码示例如下：
style?type="text/css"
*{padding:?0;?margin:?0;}
/*初始化*/
.box2?a{?float:?right;}
.clear{clear:?both;}
/style
div?class="box1"
a?href="#"文字演示1/a
a?href="#"文字演示2/a
/div
div?class="box2"
a?href="#"文字演示3/a
a?href="#"文字演示4/a
div?class="clear"/div
!--清除浮动--
/div
css布局需要注意的几点
要注意整体布局；
链接样式；（当用css定义链接的各种状态时，要注意书写的顺序）
伪类和选择符的配合使用；（将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了）
所有样式名全都小写;尽量用英文;为保证日后能一目了然，尽量不缩写；
一些代码的使用方试；
浮动：float（(1、对于内部全为浮动的元素，记得清除浮动。2、元素内部的子元素尽量不要全部浮动，最好保留最边上的一个设置margin，这样便不会出现因浏览器窗口缩放导致的浮动元素被挤到下一行，使页面错乱的情况。）
定位：
相对定位：relative（外边距合并情况，仅当父元素与子元素都是默认定位(relative)，或指定为relative，且父元素合并边没有border时才会发生）
绝对定位：absolute（1、所有父类元素都没指定position时，相对于body绝对定位。2、父类中有指定position的元素时，相对于从下往上遍历的第一个指定了position的父类元素绝对定位。）
CSS fixed 布局嵌套的一些问题
之前遇到过 fixed 布局嵌套的一些场景， fixed 布局是针对 body 定位的，但是在某些特殊情况下，子级的 fixed 会受到父级 fixed 的影响，除了需要 z-index 来区分层级，还要注意 transform 的使用（貌似好多地方 transform 都会引发问题）
一般的场景是一个遮罩加一个弹框
效果是这样的
这个时候在内部的 children 再使用 fixed 布局时，就会被父级的 fixed 元素限制住
1、父级不使用 tansform
2、不进行嵌套
关于CSS布局的问题
那个第2点有两个原因造成，一是PageBody的padding-top属性，二是MainBody的margin-top属性，把它们都设为0。
第3点可以设置PageBody的overflow属性，有四五个值，你一个个试下看看哪个是你要的效果。
head
title
/title
style?type="text/css"
body?{font-family:Verdana;?font-size:14px;?margin:0;}
/*页面层容器*/
#container?{width:800px;margin:0?auto;}
/*页面头部*/
#Header?{margin-bottom:5px;height:100px;background:#FFCC99;}
/*页面主体*/
#PageBody{height:400px;width:800px;margin-bottom:5px;background:#CCFF00;
padding-top:0;
overflow:hidden;}
#Sidebar{width:370px;height:400px;float:left;background:#99FF99;}
#MainBody{width:400px;height:500px;margin-left:377px;background:#99FFFF;
margin-top:0;}
/*页面底部*/
#Footer?{height:60px;background:#00FFFF}
/style
/head
body
div?id="container"
div?id="Header"/div
div?id="PageBody"
div?id="Sidebar"/div
div?id="MainBody"/div
/div
div?id="Footer"/div
/div
/body
/html