盒子模型
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: //动画,自己生成