定位
position值有四个
-
static 静态位置（默认值）
-
relative相对定位
-
absolute绝对定位
-
fixed固定定位
left、right、top、bottom可以设置定位的位置单位
1. 单位为 px 或 百分比都可以
1. left 和 right 同时设置时只有left有效
1. top 和bottom一起设置时只有top有效
relative相对定位
- 没有脱离文档流，但是高于普通文档
- 参照物是自身
- 一般给绝对定位当参照
absolute绝对定位
- 脱离文档流
- 参照物是设置定位的父级或者上级元素，如果上级元素多个都设定位实行就近原则，如果上级元素没有设置定位参照body
- 原本宽度可以继承，但是定位的元素，宽度不再继承了，是由自身内容决定的。如果是行内元素，定位之后，宽、高也可以起作用。
fixed固定定位
相对于整个窗口固定不动
面试题：如何让一个元素在整个屏幕或者是一个盒子中水平垂直居中
先把元素position：absolute
然后
top50%
left50%
margin-left: 负的盒子宽的一半
margin-top : 负的盒子高的一半
<style>
.box{
width:200px;
height:200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
</style>
box-shadow
- 第一个值：阴影水平偏移
- 第二个值：阴影垂直偏移
- 第三个值：阴影的模糊度(模糊的距离)
- 第四个值：阴影的大小
- 第五个值：颜色
- 第六个值：默认是outset外阴影
inset 内阴影
- x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
flex（弹性盒）布局
Flex 用来为盒状模型提供最大的灵活性。 任何一个盒子都可以指定为Flex布局
div{
display:flex;
}
display有两个值
- flex ：块级弹性盒
- inline-flex：行内弹性盒
设为 Flex 布局以后，子元素的float和vertical-align属性将失效。
基本概念
在我们使用弹性盒布局前我们要知道两个概念：
- flex容器：
- flex项目：所有子元素自动成为容器成员，称为 “Flex 项目”（flex item），注意，是子代，不是后代
容器中默认存在两根轴：
- 水平的主轴
- 垂直的侧轴
属性设置
1、容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
fiex-direction
这个属性决定主轴的方向，也就是项目排列的方向
fiex-direction：row
fiex-direction：row reverse
fiex-direction：column
fiex-direction：column reverse
fiex-warp
一条轴线排不下，如何换行
fiex-warp：warp
fiex-warp：nowarp
fiex-warp：warp- reverse
（ 换行，第一行在下方）
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content
定义了项目在主轴上的对齐方式。
flex-start
flex-end
center
space-between:两端对齐，项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等
align-items
属性定义项目在侧轴上如何对齐
flex-start：侧轴起点对齐
flex-end：侧轴终点对齐
flex-center
basline
stretch:如果项目未设置高度或设为auto，将占满整个容器的高度。
项目的属性
order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
