欢迎使用CSDN-markdown编辑器

幕课网学习笔记–3大定位机制

标准文档流

浮动

绝对定位

标准文档流

举例 自动居中

*{margin：0；padding：0}；
.warp{
width:770px;
margin:0 auto //auto会根据浏览器的宽度自动的设置两边的外边距，设置margin属性为auto的时候，不能再设置浮动或者绝对定位属性
}
.header{
width:100%;
height:200px;
border:1px solid red;
}
.mainbody{
width:100%;
height:200px;
border:1px solid blue;
}
.footer{
width:100%;
height:200px;
border:1px solid green;
}

float属性

当元素没有设置宽度值，而设置了浮动，元素的宽度会随内容而变化

当元素设置浮动属性，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素

清除浮动的常用方法

1 clear：both——一般用于紧邻元素的清除

2 width：100%（或者固定宽度）+overflow：hidden；（父层受影响时使用）

*{margin：0；padding：0}；

.warp{

background:#00C;

width:960px;

margin:0 auto //auto会根据浏览器的宽度自动的设置两边的外边距，设置margin属性为auto的时候，不能再设置浮动或者绝对定位属性

}

.header{

width:100%;

height:200px;

border:1px solid red;

}

.mainbody{

background:#fc0;

width:100%;

height:200px;

border:1px solid blue;

}

.left{

width:800px;

height:200px;

background:#000;

float:left;

}

.right{

width:140px;

height:500px;

background:#690;

float:left;

}

.footer{

background:#639;

width:100%;

}

绝对定位布局

相对定位：

- 相对于自身原有位置进行偏移

- 仍旧处于文档流

- 随即拥有偏移属性和z-index属性

绝对定位：

- 以包含块为基准的定位

- 脱离了文档流

- 随即拥有偏移属性和z-index属性

- 偏移参照基准 如果没有定位的祖先元素，以为偏移基准

其实主要技能就是父元素相对定位，自己是absolute自适应宽度元素绝对定位（这个用的比较多）

-