浮动(float):脱离标准流且不占位
float:left; 左浮动
float:right; 右浮动
清除浮动的影响
clear: left; 清除左浮动
clear: right; 清除右浮动
clear: both; 清除左右两端的浮动
但是我们一般在程序中,直接调用一个选择器,该选择器中的内容属性能够清除浮动的影响
/* 我个人一般这么写清除浮动 */
.clearfix {
content:''; //用伪类选择器必须使用的属性,填写后面添加额内容
display:block; //块级元素将盒子撑开
clear:both; //清除左右两端的浮动
visibility:hidden; //content中的内容隐藏
height:0; //content中的内容仍占位置,将高度设置为0
}
/* 用来兼容其他的浏览器 */
.clearfix {
*zoom=1;
}
定位:
static:默认(即文档流)
relative:相对定位,相对于源文档流的位置进行定位**(仍占位置)**
absolute:绝对定位,相对于其最近的父元素或者祖先元素有定义过定位属性的(static除外)进行定位。且元素不占位(脱离文档流)如果祖先元素或者父级元素中没有定义过定位属性,则对于浏览器窗口进行定位
fixed:固定定位,相对于浏览器页面进行定位。不占位(脱离文档流)
使用绝对定位让盒子水平和垂直居中
当在文档流中的盒子想要水平居中,只需要设置
margin: 0 auto;
但是对于进行过绝对定位后的盒子就无效了
让绝对定位后的盒子水平和垂直居中:
left:50%; //其父级元素或者祖先元素宽度的一半
margin-left: -(盒子自身宽度的一半);
top: 50%; //其父级元素或者祖先元素高度的一半
margin-top: -(盒子自身高度的一半);