css三种定位+水平垂直居中+弹性盒子

css声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

1. 定位
2. 盒模型
3. 文字和排版
4. 可视化效果
5. 其他

定位（position）

static（默认）

absolute(绝对定位)

绝对定位:：以最近的非static父容器为参考

脱离标准流

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

(1)绝对定位盒子居中

absolute使用margin时，不管它有没有已经定位的祖先元素，都会以它原来所在文档流中的位置作为参照。此时margin-top、margin-bottom不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。

(2)bottom属性绝对定位时所参考的是浏览器首屏页面的左下顶点。

也就是滚动浏览器页面被绝对定位的到浏览器底部的盒子会向上移动.

(3)子绝父相

relative(相对定位)

相对定位：相对于自己原来的位置进行移动

不脱离标准流

在原来的地方仍然占据空间

fixed(固定定位)

固定地位:：以浏览器为参考

脱离标准流

多用于用到修饰导航条和点击置顶。

盒子模型

margin

属性的顺序:
margin : 上 右 下 左; 或者 margin 上下 左右;

padding

同上

box-sizing

css3新增属性，用于设置盒子边框模式，取值一般有：content-box 和 border-box；关于两个取值如下

content-box

​ padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

border-box

​ padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

常用 box-sizing:border-box;

布局

垂直方向的布局一波用标准流，水平方向的一般用浮动流.
标准流中元素可以撑起父元素的高度，浮动流不行.

浮动(float)：

只能左右与父元素对齐.用了float就不能用margin：0 auto,标签都成了行内块级.
浮动后就脱标，从标准流中删除，如果前一个元素浮动，后一个没有则前面盖住后面
浮动排序规则：
	1.相同方向，先浮动的在前面，不会盖住
	2.不同方向，左浮动找左浮，右找右
	3.浮动之后的位置由之前在标准流中的位置确定
贴靠现象：当父元素的宽度不够，从最后一个元素开始往前贴，直到贴到父元素
	浏览器会尽量显示浮动元素
字围现象：没有浮动的元素中的字会给浮动元素让位置

清除浮动：主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

1.给父元素设置高度，(一般不用)
2.给后面的盒子添加clear（marign失效）:
取值	含义
none	默认取值，按照浮动元素的排序规则来排序
left	当前元素不要找前面的左浮动
right	当前元素不要找前面的右浮动
both	不要找前面的左浮动和右浮动
inhert	继承
3.隔墙法：
	外墙法：两个盒子之间加个块级元素，然后在块级元素中设置clear both
	(1)（第一个不可以margin-bottom，第二个可以margin-top）
	(2)所以一般不设置margin,就给块级元素加height
	内墙法：前面盒子所有子元素后加个块级，然后clear both（前后都可以marian，也可以块级加高）
外墙不能撑起前面盒子的高度，而内墙可以.
4.伪元素选择器法      在后面设置一个块级元素
.class::after {
      /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
    }
兼容问题：css3    .box1{*zoom：1；}
5.overflow：hidden（1.不让标签中的内容超过标签，2.清除浮动（给前面盒子添加）	其余与内墙法一样，）
		3.给外边的盒子设置，则里面的盒子加marign-top不会把外边的顶下来
兼容问题： .box1{*zoom：1；}

水平与垂直居中

水平居中

1.margin: 0 auto;//需设宽度,且为块级元素

水平垂直居中

2.postion元素已知宽度

父元素:relative

子元素:absolute

.box1{position: relative;}
.box2{
    position: absolute;
	left:50%;
    top:50%;
    margin: -50px 0 0 -50px;
}

3.position transform 元素未知宽度

将上述的margin: -50px 0 0 -50px; 替换成transform: translate(-50%,-50%);

.box2{	
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%); 
}

4.flex布局

.parent{
	display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}

弹性盒子

弹性盒子就是上述的flex布局

https://blog.csdn.net/weixin_42790916/article/details/82117734<<弹性盒子>>

justify-content:主轴方向的排列顺序.

align-items:侧轴方向的排列顺序

默认stretch:元素被拉伸以适应容器(100%),设置宽高有效。

flex: flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间

.box1{display:flex}
.box2{flex:3}
.box3{flex:7}

<div class="box1">
​	<div class="box2">div>
​	<div class="box3">div>
div>

box2与box3 比例3:7 且占满父元素.