WEB7.9

盒子模型

border

内边距

padding-top:20px; //距离顶部二十距离 ---文字距离外边框的距离

外边距

margin; //给外面添加一个盒子

外边距塌陷问题

margin-bottom：10px //对所有子元素进行间隔

margin-top：10px //对单个元素进行间隔

父元素会抢走第一个子元素的margin的值-----解决方法：对父元素加边框border 或者+overflow：hidden

文本溢出

overflow：auto/hidden //解决文本溢出问题

样式继承

对div类型进行继承1，2，4

css样式的继承性：不是所有进行继承，只改变对布局无影响的元素

flex布局

display：flex； //默认为主轴 排列方式从左到右

• 排列方式

  flex-direction：row-reverse

  flex-direction：column

  flex-direction：column-reverse

• 布局变为多行

  flex-wrap：wrap；

  flex-wrap：nowrap； //换行

  justify-content:space-between； //主轴上的布局

  align-items：end； //存在结尾，设置单行 ----侧轴上的布局

  ：start //恢复默认

  align-content //设置多行

  order： ； //值越小，位置越靠前

float讲解

float：left //重叠，谁浮谁加

当子元素发生浮动时，其父元素会造成高度塌陷

渐变

background-image：linear-gradient（green，pink）

字体图标

改图标大小 在style中选中icon进行调节大小

媒体查询

@media screen and （min-width：700px） and（min-width：500px） //700至500的颜色是pink

默认外边距

conten="width=device-width,initial-scale=1.0" //默认外边距16px

取消默认内外边距：padding：0 margin：0

2d转换

transform：translateX（70px) //向左平移70距离 ----水平

transform：roateZ(49deg) //顺时针旋转40 --旋转

3d变换

transform：rotateX（45deg） //X轴进行旋转

transform：rotate3d（1，1，0，45deg） //斜向旋转

transform-origin：top //沿着父元素盒子顶部旋转

过渡

transition：all 5s //鼠标指上之后图标烟左边进行延伸用时5s

• 需要设置鼠标.son{width:600px;}

动画

@keyframes myMovie //生成动画

animation： //动画，自己生成