走进css——02

1.定位

1.1相对定位

​ 定位原点：浏览器可视窗口左上角

position:relative

1.2绝对定位

​ 定位原点：如果父元素是相对定位，他的定位原点就是父元素；如果父元素没有相对定位，则会一直往上找，直到找到body上

position:absloute

1.2固定定位

​ 定位原点：浏览器可视窗口左上角

position = fixed
// 顺便介绍一种粘性布局
position = sticky   //sticky粘性

2.显示模式

2.1块元素特点

​ 1.独占一行
​ 2.可以设置宽高
​ 3.块元素不设置宽度的时候,默认父元素的宽度, 不设置高度的时候,默认高度为0,内容会撑开高度

2.2行内元素特点

​ 1.在一行上显示
​ 2.行内元素不能设置宽高
​ 3.行内元素默认宽高0,内容会撑开宽高
​ 4.行内元素代码换行会生成缝隙

2.3行内块元素特点

​ 1.在一行上显示
​ 2.可以设置宽高
​ 3.行内块元素代码换行生成缝隙

3.盒子模型

盒模型由外边框margin，边框border，内边距padding，内容区域content四大部分组成

我们知道了标准盒子模型是由四部分组成，但是css3中的box-sizing:border-box这个属性，会使盒子发生改变，内边距和边框不会撑宽或撑高盒子了。我们叫它css3盒子模型。

css实现水平垂直居中的方法

// 1.flex布局实现弹性模型	
.parent {
	display:flex
	align-item:center
	justify-item:center
}
.child {
	/* 子盒子只设置宽高就行 */
}
// 2.绝对定位+transfrom
 .parent {
     position：relative;
 }
 .child {
     position： absolute;
     left： 50%;
     top：50%;
     transform：translate(-50%, -50%);
 }
// 3.利用定位+margin
.child {
    width: 300px;
    height: 300px;
    background: orange;
    margin: 0 auto; /*水平居中*/
    position: relative;
    top: 50%; /*偏移*/
    margin-top: -150px; 
}