前端-基础学习-015道基础题 1：水平垂直居中的实现方式 2：positon属性 3：margin百分比设置是以谁为基

1：水平垂直居中的实现方式

<div class="div1">
    <div class="div2">11</div>
<div>

// 不定宽

（1）flex 现在基本都是flex了

.div1{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

（2）absolute + transfrom

.div1 {
  width: 100%;
  height: 100vh;
  position: relative;
}
.div2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

(3) table表格

.div1 {
  width: 100vw;
  height: 100vh;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.div2 {
  display: inline-block;
}

（4）grid布局

.div1 {
  width: 100vw;
  height: 100vh;
  display: grid;
}
.div2 {
  justify-self: center;
  align-self: center;
}

// 定宽

(1) absolute + margin auto

.div1 {
  width: 100%;
  height: 100vh;
  position: relative;
}
.div2 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

(2) absolute + 负的margin

.div1 {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.div2 {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

(3) absolute + calc

.div1 {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.div2 {
  width: 200px;
  height: 200px;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}

2：position有哪些属性，具体讲讲

inherit：继承父元素的。

static：默认值，不设置就是这个，不定位，此时设置偏移值没用

relative：相对正常位置定位，可以设偏移值了。

absolute: 相对非static的父级元素定位。

// 同一个dom下的多个absolute重叠的话，后面的在前面 // fixed在absulute上面

3: margin百分比设置是根据那个属性为基准的。

父级元素的宽度

4： float布局（左中右及其变体）

（1）：文字环绕效果（float设计出来的主要作用）

<div class="div1">
    <img src="./test.PNG" alt="图片" class="div2"></img>
    <div class="div3">2222222222</div>
</div>
.div1 {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.div2 {
  width: 200px;
  height: 200px;
  object-fit: cover;
  float: left;
}

.div3 {
  word-break: break-all;
  background-color: red;
}

（2）左右固定，中间自适应（圣杯）

<div class="content">
    <div class="div1">固定宽度</div>
    <div class="div2">自适应</div>
    <div class="div3">固定宽度</div>
</div>
.content {
    padding: 0 50px;
    height: 100px;
    overflow: hidden;
    height: 100vh;
}
.div1,.div2,.div3 {
    float: left;
    position: relative;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}
.div1 {
    width: 50px;
    margin-left: -50px;
    background: red;
}
.div2 {
    width: 100%;
    background: blue;
}
.div3 {
    width: 50px;
    /* 理解这里是相对于父元素的宽度，可以看看不加right的效果 */
    margin-left: -100%;
    right: -100%;
    background: green;
}

（3）左右固定，中间自适应（双飞翼）

<div class="content">
    <div class="div2">
        <div class="div4">双飞翼自适应</div>
    </div>
    <div class="div1">固定宽度</div>
    <div class="div3">固定宽度</div>
</div>
.content {
    height: 100px;
    position: relative;
    overflow: hidden;
}
.div1,.div2,.div3 {
    float: left;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}
.div1 {
    width: 50px;
    margin-left: -100%;
}
.div2 {
    width: 100%;
}
.div3 {
    width: 50px;
    margin-left: -50px;
}
.div4 {
    margin: 0 50px;
}

圣杯和双飞翼的异同点：都是通过浮动来实现左右固定中间自适应的布局。圣杯是直接在外面设置padding预留左右位置。而双飞翼是中间元素再去空出左右的位置。

（4）左右浮动，中间不浮动实现左中右

//利用浮动元素不占据位置，先把左右浮动的元素写好，再写入中间的元素，加上padding即可。一定要先写浮动的元素

<div class="content">
    <div class="div1">固定宽度</div>
    <div class="div3">固定宽度</div>
    <div class="div2">自适应</div>
</div>
.content {
    height: 100px;
    overflow: hidden;
}
.div1,.div2,.div3 {
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}
.div1 {
    width: 50px;
    float: left;
}
.div2 {
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
}
.div3 {
    width: 50px;
    float: right;
}

（5）扩展，定位方式实现左中右

<div class="content">
    <div class="div1">固定宽度</div>
    <div class="div2">自适应</div>
    <div class="div3">固定宽度</div>
</div>
.content {
    height: 100px;
    position: relative;
    overflow: hidden;
}
.div1,.div2,.div3 {
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}
.div1 {
    width: 50px;
    position: absolute;
    top: 0;
    left: 0;
}
.div2 {
    /* width: 100%; */
    padding-left: 50px;
    padding-right: 50px;
}
.div3 {
    width: 50px;
    position: absolute;
    right: 0;
    top: 0;
}

5：flex属性详解

flex容器的属性

1）flex-direction

决定主轴方向，值有

row 横向左边开始（默认）
row-reverse 横向从右边开始
column 纵向从上面开始
column-reverse纵向从下面开始 2）flex-wrap

决定主轴超出是否换行，值有

nowrap 超出不换行（默认）
wrap 换行
wrap-reverse 换行，但是第一行在下面，注意和row-reverse不一样。

3）flex-flow上面flex-direction和flex-warp的简写形式，默认值为row nowrap

justify-content

定义主轴上的对其方式，常用值为center和space-between

flex-start 左对齐（默认）
center 居中
space-between 两边对齐，左右顶边不留空
space-around 每个项目左右间隔相等，结果是项目之间的间隔比边框的大一倍
flex-end 右对其

5）align-items假设交叉轴为从上到下

定义交叉轴的对其方式，常用值为center和space-between

flex-start 上对齐（默认）
flex-end 下对齐
center 居中对齐
baseline 第一行文字的基线对其。 // 第一个dom设置了padding，后面的会下移保证文字对其
stretch（默认）如果没有设置高度，高度将为容器高度

6）align-content 注意如果只有多行该属性才有用（以上下为交叉轴为例） // 个人觉得是为了提供和主轴一样的space-between和space-around样式

flex-start 和交叉轴的起点对齐
flex-end 和交叉轴的终点对齐
center 与交叉轴的中间对齐
space-between 与交叉轴两端对其，中间平均
space-around 每个项目上下间隔相等，结果是项目之间的间隔比边框的大一倍
stretch （默认）轴线占满交叉轴

flex子元素的属性

1）order 定义项目的排列顺序（这个属性之前还真不知道）可以改变元素的排列顺序，一般我们结构都写好了，也不会用这个去改。属性值为数字类型，数值越小越靠前

2）flex-grow 项目的放大比例（默认为0）

属性为数值类型的，一般为0or1，0表示不放大，其他的表示放大，占据的大小和数值的大小成比例。

3）flex-shrink 项目的缩小比例，空间不足将缩小（默认为1）

属性值和flex-grow一样，0表示不缩小，1表示缩小。注意项目的内容不要被撑开，不然不会缩小。

4）flex-basis 定义为在分配多余空间之前，项目主轴占据的空间（默认为auto）

属性可以像宽高一样设置，例如100px，则项目初始占100px。设为auto则为默认大小。取完这个属性值之后，在计算对应的放大缩小后大小。

5）flex 该值为flex-grow，flex-shrink，flex-basis的缩写。（默认为0，1，auto）

6）align-self 覆盖父级元素的align-items属性，默认为auto表示继承父级。属性值和align-items一样。