CSS的布局和定位

盒子模型（1）

1. 概念：页面中的所有元素都可以看成是一个盒子，例如文字，图片，导航，列表等，每个盒子都占据这一定的页面空间
2. 

这里的宽高描述的是内容的宽高，不是盒子的宽高，盒子大小的计算公式是content+padding+border+margin

3.超过盒子大小的处理办法

超过盒子大小如何显示，使用overflow属性
属性值hidden：超出的部分不可见被隐藏了
属性值scroll：超出的部分会显示滚动条
属性值auto：假如有超出部分，显示滚动条

4.对浏览器默认的设置清理
首先采用全局样式
*{
margin:0;
padding:0;
}
1)当margin只有一个值时，代表上下左右都是此值

2)当margin有两个值时

遵循顺时针，上右下左

5.注意的点

6.水平居中
图片，文字水平居中：text-align:center;
div水平居中 margin:0 auto;
垂直方向的居中：line-height，跟当前所在区域的高度相同，就可以了
7.解决inline间有空隙
在它的父层元素设置：font-size:0;

文档流定位

有的元素会单独占一行，有的元素会跟其他元素排列在一行
元素的分类：block,inline,inline-block
不同的类型可以通过display属性转换

1）block元素特点
独占一行

元素的height，width，margin，padding都可以设置
常见的block元素：div p h1-h6 ol ul table form

当然也可以让其他类型的元素显示为block元素，也就是可以让它独占一行
例如a标签原本是一行显示的
a{
display：block;
}
设定为block后，a就变成了块元素，可以设置它的高宽，padding，margin

2）inline元素特点

• 不单独占用一行，在宽度够用的情况下，所有inline类型的元素都会在一行显示
• width height 不可设置，它高宽是由它包含的文字或者图片的高宽度来决定的

常见的inline元素： span a

将block类型元素更改为inline类型的元素
div{
display：inline;
}

注意的点：inline元素有一个间距或者间隙的问题
两个inline元素水平排列默认带有的间隙
如何消除？
方法1：将inline类型转换成block
方法2：用p标签或者li标签包裹住a标签
方法3：在它的父层元素设置：font-size:0;

3）inline-block元素
就是同时具备inline元素，block元素的特点，可以看成是可以水平排列的block类型的元素
常见的inline-block元素：img
转换 display：inline-block;

浮动定位

float属性：left，right
clear属性：left，right，both
原有位置丢失，其他盒子会占据原有位置

这是宽度够用的情况

假如宽度不够用

清除浮动

假如要两个盒子在文本右侧浮动，就如图一，使用float：right即可，假如要更改成图二，则要加上clear：right； 清除浮动的意思不是删除，而是右侧没有浮动了，意味着要另起一行来显示

层定位

1.固定定位fix


假如一个网页中间是内容，两侧是广告，在滑动滚轮的时候，希望广告位置不变，让用户总是能看到，这时候要使用固定定位fix

2.相对定位relative
初始定位位置

使用相对定位和top，left之后

relative的参照物是它的直接父元素，并且虽然它走了但是其在文档流的原位置依然存在，下面的内容并没有顶上去占位置

3.绝对定位absolute
初始位置

使用绝对定位，top，left之后

原位置不复存在，下面的盒子顶了上去

当使用相对定位relative时，它的参照物总是它的直接父元素，不管它的父元素是static，还是relative，还是absolute，都是参照它的直接父元素

绝对定位absolute，它的参照物是最近的定义为absolute或relative的父层，所以这个父层不一定就是直接父层，除非它的直接父层就是absolute或relative
初始位置

使用绝对定位以后


4.相对定位和绝对定位结合使用
通常将外层的父元素box1设置为相对定位relative，而内层的子元素box2设置为绝对定位absolute，同时通过top，botton，left，right，z-index来确定子元素相对于父元素的位置，这样只要父元素移动，子元素就会跟着父元素一起移动而保持相对静止