Web网页开发-CSS定位-笔记

一、CSS的三种布局
(1) 标准流
块级元素:一行一个
行内元素:一行多个，margin上下无效
行内块元素:一行多个
(2) 浮动
让元素同处一行
(3) 定位
让元素在浏览器中任何位置,并且覆盖住其他元素，能够固定死在浏览器上的某个位置，不随滚动条滚动
对于定位的元素，默认堆叠值为0，z-index:数值越大越靠上
边偏移:决定了元素的位置，top: 表示与上面的距离，bottom: 表示与下面距离，left: 表示与左边距离，right: 表示与右边距离

二、四种定位模式及元素居中的两种情况
(1) 静态定位static: 没有任何作用，仍然保持标准流
(2) 绝对定位absolute: 可以定位浏览器的任何位置
      位置取决与有定位的父盒子，原来的位置不再保留，后面元素会自动补位，自动转成行内块
      当父盒子有定位时:子盒子在父盒子内移动[子绝父相]
      当父盒子没有定位时，子盒子在浏览器内移动
(3) 相对定位relative：相对于原来的位置进行移动，原来的位置仍然保留
(4) 固定定位fixed：固定浏览器的某个位置，自动转成行内块，只认浏览器，不随滚动条滚动

浮动、绝对定位、固定定位：都不在占据原来的位置，后面的元素自动补位，自动转成行内块
float: left;
position: absolute;
position: fixed;

元素居中的两种情况：

1.设置绝对定位或者固定定位的元素水平居中
   left: 50%;
   margin-left:负的盒子宽度的一半；
2.设置绝对定位或者固定定位的元素垂直居中
   top:50%;
   margin-top: 负的盒子宽度的一半;

三、嵌套型盒子的外边距合并问题的解决方案
1.给父盒子添加overflow：hidden属性
2.给父盒子边框border、内边距padding
3.设置子盒子浮动
4.设置子盒子绝对定位或固定定位