首页 > 代码库 > css布局
css布局
你常见的布局
一、布局第一步
分析页面：自适应，定宽，多列，通栏...
选择合适的标签
选择合适的方案
二、从页面中抽出骨架
在开始coding前，我们需要仔细分析页面，然后抽取骨架和模块，如果你想的多更一些，那应该考虑到适应性和可扩展性
三、实现方案
float布局：
优点：优先显示 --可以在只改变html的顺序不改变css的情况下，让主文或侧栏优先显示。
切换列顺序 --可以在只改变css中 float的值不改变html的情况下，将侧栏和侧栏进行随意切换。
缺点：切换到不定宽? --必须定宽，不可以切换到不定宽。
BFC布局：
优点：切换列顺序--可以在只改变css中float以及margin-right(left)的值不改变html的情况下，将侧栏和侧栏进行随意切换。
切换到不定宽--可以改变父元素的定宽值，将布局变为不定宽。
缺点：优先显示?---不可以在只改变html的顺序不改变css的情况下，让主文或侧栏优先显示
absolute布局
优点：优先显示--可以在只改变html的顺序不改变css的情况下，让主文或侧栏优先显示。
切换列顺序--可以在只改变css中left的值不改变html的情况下，将侧栏和侧栏进行随意切换。
切换到不定宽--可以改变父元素的定宽值，将布局变为不定宽。
缺点：不可冲破的绝对定位列高
Inline-block布局
缺点：既不能优先显示 也不能切换列顺序 更不能切换到不定宽
垂直水平居中
垂直居中 （vertical-align: middle;|| height ）与line-height;结合使用（单行 文本作为子元素）
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持<img>等的居中
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要
三、把容器当作表格单元
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。
优点：
不用说了吧，就是表格，效果和表格一模一样
缺点：
IE6/7下无效 bug
（img 可以直接用vertial-align:middle;）
四、position 定位
- #parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%; //这里都采用了相对值 也可以是xx px具体计算
} - float类似于position 不过存在ie bug
- 不定高的垂直居中
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
五空标签加float *********************************************************************************
<div id="floater"></div> |
#floater {float:left; height:50%; margin-bottom:-120px;} |
优点：
适用于所有浏览器
没有足够空间时(例如：窗口缩小)content 不会被截断，滚动条出现
缺点：
唯一我能想到的就是需要额外的空元素了(也没那么糟，又是另外一个话题
position:relative/absolute;margin-left:-width/2;left:50%; (也适用于水平居中)
float 会浮动上去现代浏览器水平间距 iE6有3px inline-block （设_margin-x:-3px）并列显示时元素以bottom 垂直现代浏览器会有水平间距
Li 用了float a触发块布局会产生 水平margin ：---a也设置为float
IE6、IE7不识别inline-block但可以触发块元素。
其它主流浏览器均支持inline-block。
解决IE6、IE7兼容性的方法：
1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。
2、直接设置display:inline，使用zoom:1触发layout。
兼容所有浏览器的方法是：
display:inline-block;
*display:inline;
*zoom:1;
当行内框与一个浮动元素重叠时，其边框、背景、和内容都在该浮动元素“之上”显示。
块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示吗，内容在浮动元素“之上”显示
clear 在清理元素时，浏览器在元素顶上添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面 。这也会忽略为清除元素（设置了clear的元素）顶端设置的外边距宽度。
所以如果要与浮动元素保留一定空间的话可以为浮动元素设置下外边距。
关于定位和浮动的包含块
对于浮动， 浮动元素的包含块为最近的块级祖先元素。
对于定位
“根元素”的包含块（初始化包含块）由用户代理建立。
对于非根元素，如果其position值是relative或static，包含块则由最近的块级框、表单元格或行内块祖先框的内容边 界构成。
对于非根元素，如果其position值是absolute，包含块设置为最近的position不是static的祖先元素。
如果这个祖先是块级元素，包含块则设置为该元素的内边距边界。
如果这个祖先是行内元素，包含块则设置为该元素的内容边界。
如果没有祖先，元素的包含块定义为初始化包含块。
关于定位偏移
css2规范指出偏移的是内容边界而不是外边距边界
但实际游览器使用的都是外边距边界完成偏移计算
当元素设置为position:absolute，top为auto时，元素的顶端，要相对于其未定位前本来的顶端位置对齐（left:auto, right:auto也使用这个原则）。
关于元素可见性
使用display:none; 元素不仅不显示，还会从文档中删除。所以对文档布局没有任何影响。
visibility:hidden;元素处于不可见状态，但还是会影响文档的布局，就好像他可见一样，只不过你看不见他。
还有一点。Visibility:hidden; 如果后代元素还是设置了visibility:visible;后代元素是可见的。但display不是。
关于水平居中
- Margin-left:auto; Margin-right:auto;width定宽
- 子元素display: inline-block 父元素 text-align:center;
设置元素50% 必须父元素相应的属性是固定的值（不是很准确。懂那意思就行，比如: top:50% 父元素必须定高）
css布局