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;
建议都添加进去,增加兼容性;
注:有其他见解,望不吝赐教。