前端基础知识复习（css）

css3 新特性

一 项目中常用的新特性

样式名	说明
border-raduis	10px
border-image	边框图像
box-shadow	水平阴影(必) 垂直阴影(必) 模糊距离(可) 阴影大小(可) 阴影颜色(可) 内侧阴影(可)
background-image	背景图/渐变
background-size	指定背景图的大小(相对父元素)
background-origin	指定了背景图像的位置区域(取值content-box,padding-box,border-box)
background-clip	规定背景的绘制区域(取值content-box,padding-box,border-box)
text-shadow	文章阴影
text-overflow	文本溢出
word-wrap	换行
word-break	单词拆分换行

二 盒模型(box-sizing)

border-box(怪异盒模型)
padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding
width = content + border + padding

content-box(标准盒模型)
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽
width = content

三 弹性盒子

display:flex;

属性	描述
flex-direction	弹性容器中子元素的排序方式
justify-content	弹性盒子在x轴方向的对齐方式
align-items	弹性盒子在y轴方向的对齐方式
flex-wrap	弹性盒子的子元素超出父容器时是否换行
align-conent	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	弹性盒子的子元素排序顺序
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性
flex	设置弹性盒子的子元素如何分配空间

四 grid 布局

display:grid;

属性	描述
grid-template-columns	用来指定行的宽度
grid-template-rows	用来指定行的高度
grid-row-gap	设置行与行之间的间隔
grid-colunm-gap	设置列与列之间的间隔
grid-auto-flow	划分网格，容器的子元素排序是按照先行后列，通过该属性可以自定义排序的顺序
justify-items	设置单元格内容的水平位置
align-items	设置单元格内容的垂直位置
justify-content	整个内容区域在容器里面的水平位置
align-content	整个内容区域在容器里面的垂直位置
grid-colunm-start	左边框所在的垂直网格线
grid-colunm-end	右边框所在的垂直网格线
grid-row-start	上边框所在的水平网格线
grid-row-end	下边框所在的水平网格线

五 css3 transform、transition、animation

// 水平垂直居中
.box {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

transform:变形，改变

在css3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale、以及矩阵变形matrix
旋转：rotate() 顺时针旋转给定的角度，允许负值rotate(30deg
扭曲：skew()元素翻转给定的角度，根据给定的水平线（x轴）和垂直线（y轴）参数：skew(30deg,20deg)
缩放：scale()放大或缩小，根据给定的水平线（x轴）和垂直线（y轴）参数：scale(2,3)
移动：translate()平移，传入的x,y值，代表x轴和y轴平移的距离

改变起点位置 transform-origin: bottom left

所有的2D方法组合在一起：
transform：rotate旋转|scale缩放|skew扭曲|translate移动|matrix矩阵变形
transform: 45deg 1 30deg 30deg 100% 100%;

.box {
    transition:all .5s;
}

transition: 允许css属性在一定的时间区间内平滑的过渡（过渡动画）、

transition作用是指定了某一个属性（width、left、height、transform）在两个值之间如何过渡

如果某一个元素指定了transition,那么当属性改变时就会按照transition指定的方式进行过渡，动画就这样产生了

transition 主要包含四个属性值：
(1) 执行变换的属性 transition-property: all | width | left | height | transform;
(2) 变换持续的时间 transition-duration:.2s;
(3) 在延续时间段，变换的速率变换：
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
linear（匀速变化）
ease（低俗开始，然后加快，快结束的时候再放慢）
ease-in（低速开始）
ease-out（低速结束）
ease-in-out（低俗开始，低速结束）

(4) 变换延迟时间 transition-delay

transition 动画的执行需要事件的触发，例如单击、失去焦点、获得焦点
语法： transition: property duration timing-function delay;

.box {
    width:200px:
    height:300px
    backgorund:red;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

@keyframes mymove {
      from {left:0px;}
      to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {left:0px;}
    to {left:200px;}
}

animation 跟 transition 一样 也是通过改变某个属性，在两个值之间过渡来实现动画

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-timing-funtion:linear（匀速变化） ease（低俗开始，然后加快，快结束的时候再放慢） ease-in（低速开始） ease-out（低速结束） ease-in-out（低俗开始，低速结束） steps()

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画需要多少秒执行完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔
animation-iteration-count	定义动画的播放次数
animation-direction	指定是否应该轮流反向播放动画
animation-fill-mode	规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式
animation-play-state	指定动画是否正在运行或已暂停

六 媒体查询

@media mediatype and|not|only (max-width: 500px) {
 
}
//根据不同的媒体使用不同的stylesheet

值	说明
and	用于将多个媒体查询规则组合成单条媒体查询
not	用于否定媒体查询，如果不满足这个条件则返回true，否则返回false
only	仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用
，(逗号)	用于将多个媒体查询合并为一个规则

七 回流和重绘

回流：改变页面元素的大小、位置、是否隐藏都会引起回流
重绘：如果只改变外观风格，不影响布局会引发重绘

八 css有哪些元素可以继承

字体属性、文本属性、color、background-color、visibility、display、opacity、cursor

九 css 实现宽度自适应100%，宽高16:9的比例的矩形

第一步计算宽度，假设宽100%，那么高为h=9/16=56.25%
第二步 设置padding-bottom方法实现矩形

  

    
这是一个16：9的矩形
  

十 图片等比缩放

.img {
     width: auto;  
     height: auto;  
     max-width: 100%;  
     max-height: 100%;    
}

文章参考
https://www.cnblogs.com/cythia/p/10894598.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries