杂七杂八的知识总结

1.文本阴影

`div{
        text-shadow:10px 10px 1px red;
     }
      

第一个值：水平方向的位移 都可以设置负数
第二个值：垂直方向的位移
第三个值：模糊程度
第四个值阴影颜色

2.盒子阴影
box-shadow: 10px 10px 1px 10px yellow inset;
第一个值：水平方向的位移 都可以设置负数
第二个值：垂直方向的位移
第三个值：模糊距离
第四个值阴影大小
第五个值阴影颜色
最后一个值 inset内阴影

3.圆角边框
border-radius:10px;
birder-radius 可以设置px 或者百分比
v1 四个角是一样的
v1，v2 是左上右下、左下右上一致
v1,v2,v3 左上 左下右上 右下
四个值 顺时针*/

4.字体引入

@font-face{
font-family：名称；
src：路径；}

div{
font-family：名称}

5.怪异盒模型
box-sizing: content-box; 标准盒模型 不挤压内部内容空间
box-sizing: border-box;怪异盒模型 挤压内部空间

6.弹性盒子： display: flex;
1.影响子元素的默认横向排列
2.如果元素是行内元素 会变成行内块元素
3.只有一个盒子时候，子盒子直接加margin：auto 就自动居中

弹性盒子默认方向是水平排列，所以主轴方向是水平方向，侧轴是竖直方向

改变主轴方向：flex-direction：
默认row水平方向
column竖直方向
row-reverse水平反方向
column-reverse竖直反方向

调整主轴对齐方式jusitify-content：
flex-star左边开始
flex-end 右边
center中间
space-between 两端对齐
space-around 距离环绕 自身距离是等距的

侧轴对齐方式align-items：
flex-star左边开始
flex-end 右边
center中间
space-between 两端对齐
space-around 距离环绕 自身距离是等距的

7.width：100%和100vw区别：
1.没有滚动条之后，大小是没有区别的
2.有滚动条，100%是去除滚动条之后，剩余空间占满
100vw包含滚动条，窗口大小