css属性：
一.position属性（属性值：absolute、relative、fixed）
.box1 {
width：100px；
height：200px；
position：realtive；
left：30px；
top：30px；
}
表示相对于本身位置的便宜量,距离左边30px，距离上边30px；“当position值为realtive时，类box1保留原始位置”
.box2 {
width：100px；
height：200px；
position：absolute；
left：30px；
top：30px；
}
此时，box2的大小是100px乘200px；位置是相对于其外层中有position属性的元素定位，直至<body>标签；box2完全脱离文档流。
2.Z-index：（数值）；
对于完全脱离文档的控件，控制显示的层级，“数值”越大，优先显示。
.box3 {
width：100px；
height：200px；
position：fixed；
right：0px；
top：30px；
background：blue；
}
在屏幕右边距离顶部30px，距离右边0px位置有100px乘200px大小蓝色块。（相对于屏幕位置，固定不变）
3.display属性（属性值none、block），block为默认方式，即显示；
.box4 {
width：100px；
height：200px；
position：realtive；
left：30px；
top：30px；
background：blue；
display：none；
}
蓝色盒子位置没有显示任何东西，位置可以被覆盖不在保留位置。
4.visibility属性（属性值hidden、visiable）
.box5 {
width：100px；
height：200px；
position：realtive；
left：30px；
top：30px；
background：blue；
visibility：hidden；
}
蓝色盒子消失，但位置存在。
margin属性为负值时，也可以实现隐藏盒子的效果。
5.其他
div、li属于块元素，span、input、<a>、<img>是非块元素。
块元素通常是独占一行，块元素才可以设置width、height属性。非块元素可以一行多个直至宽度不够跳转至下一行。
display：line；（可以让块元素变为行内元素，此时宽高由文字等非块元素大小之和控制。）
display：line-block；（变为行内元素，保持原有大小，当多个元素有此属性时超过行宽会自动换行）
6示例
1.让盒子水平居中（不随浏览器窗口大小改变相对位置）
.box {
width:300px;
height:300px;
background:red;
margin:0px auto;
}
2.让盒子在屏幕中间（不随浏览器窗口大小改变相对位置）
.box {
width:300px;
height:300px;
background:red;
position：absolute；
left：50%；
top：50%
margin-left：-150px；（宽度一半）
margin-top：-150px;（高度一半）
}
3.让盒子内文字居中，
在盒子内添加
text-align：center；
line-height：200px；（盒子的高度）
4.滚动条
在盒子内文字如果超出盒子大小，利用如下属性实现滚动条；
overflow属性（属性值hidden、auto）
在某一方向上添加滚动条
overflow-x：scroll；横轴方向
overflow-y：scroll；竖轴方向
5.文字换行
word-break：break-all；
word-wrap：break-word；
建议都添加进去，增加兼容性；
注：有其他见解，望不吝赐教。
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
