两点补充——CSS3新属性以及弹性布局

时间:2021-12-21 08:50:32
CSS3 新属性
一、【 CSS3新增属性前缀 】
  1、-webkit-:chrome/safari
  2、-moz-:火狐
  3、-mo-:IE
  4、-o-: Opera 欧朋
二 、【CSS 长度单位】
  1、px:像素。长度固定,表示分辨率占几个像素点;
  2、%:表示相对于默认值的百分比;
  3、em:长度与元素的字号挂钩。
  rem:长度与根元素的字号挂钩。 即与html 的 font-size 挂钩,若不设置,默认16px 。
  【 em与rem区别 】
  em与当前元素自身的font-size挂钩,若当前元素没有设置,则向上查找最近的祖先元素字号,直至根字号;
  rem与当前元素字号无关,直接与根节点字号有关。
代码
html{
font-size: 48px; /* 修改根元素字号大小 */
} #div3{
font-size: 200%; /*32号字*/
background-color: yellow;
height: 3rem; /* 3*32=94*/ }

效果图

两点补充——CSS3新属性以及弹性布局
三、【CSS3 背景属性】
  1、background-clip: 设置背景图或者背景色的裁切显示区域
    border-box:从边框外圆开始显示
    padding-box:从边框内圆开始显示
    content-box: 从文字内容区域开始显示
    如果不在显示区域的背景图或者背景色,会被裁切掉不显示
  2、background-origin:设置背景图左上角 从哪个位置 开始定位显示
    border-box:背景图左上角从边框外缘开始显示
    padding-box:背景图左上角从边框内圆开始显示
    content-box: 背景图左上角从文字内容区域开始显示
【注】background-origin 不会改变背景图显示区域的大小,只是决定 背景图左上角 从哪个位置 开始定位。
   background-clip 只负责 裁切出显示区域,并不关心背景图定位在哪。
  3、background-attachment:背景图的附着方式
    scroll :背景图随区域滚动
    fixed:背景图充满整个区域。并且是固定的,不随滚动条滚动。
  4、缩写形式:
   background: background-color background-image background-repeat background-attachment background-position;
代码
#div4{
width: 100px;
height: 1000px;
background-color: yellow;
padding: 20px;
border: 20px dotted red;
background-clip: border-box;
background-image: url(img/005.png);
/*background-repeat: no-repeat;*/
background-origin:content-box;
background-attachment: fixed; /*下图验证该条语句*/
}

效果图   fixed 背景不随滚动条滚动

两点补充——CSS3新属性以及弹性布局
四、【 transition 过渡属性】
  transition: all .5s ease 3s; 过渡属性,接受四个属性
  1、设置哪个CSS属性,参与过渡;可以直接指定all或none;
  2、过渡多长时间完成。通常 .3s、.5s
  3、过渡的样式效果。通常 ease
  4、过渡延时几秒后再开始。可以省略不写
【注】 可以同时定义多个属性的过渡效果,用,隔开。
    eg.  transition: width .3s ease,height .5s ease;
代码
#div5{
width: 100px;
height: 100px;
background-color: red;
transition: width .3s ease,height .5s ease;
}
#div5:hover{
height: 50px;
background-color: yellow;
width: 50px;
transition: all .5s ease; /*对比transition置于不同位置,过渡特效作用完后恢复到原状态的时间不同*/
}

效果图

过渡前

两点补充——CSS3新属性以及弹性布局

过渡后
两点补充——CSS3新属性以及弹性布局
五、【 transform变换属性 】
  1、 常用的变换函数:
    translate(10px,10px)第二个不写,默认为0
    scale(1.1)缩放 overflow=hidden;
    rotate(90deg)90度旋转,默认绕z轴转 可以使用rotateY(180deg);等
    skew(20deg,30deg)扭曲,水平、垂直方向扭曲多少度
  2、可以实现多种变换,用空格分隔
    eg. transform:skew(180deg) scale(1.5) translate(200px 200px) ;
  3、 transform-origin 定义变换起点,常用于旋转变换
    可选值:left center right top center bottom
    也可以直接定义x、y坐标点,第一个数为X轴
    eg .transform: rotate(90deg);
       transform-origin:right bottom ; 绕右下角旋转90度
代码
#div6{
width: 100px;
height: 100px;
background-color: red;
} #div6-1:hover+#div6{
/*transform:translate(200px 200px) ;*/
transform: scale(1.5); /*放大*/
transform: rotateY(180deg); /*旋转180°*/
transform-origin:right bottom; /*绕右下角*/
transform: skew(180deg); /* 扭曲180°*/
}

效果图

两点补充——CSS3新属性以及弹性布局
六、【 CSS3 动画的使用 】
  1、声明一个关键帧(动画)
    @keyframes name{
      from{}
      to{}
    }
    阶段的写法:① 直接使用from-to的写法;
          ② 设置0%到100%的写法,开头结尾必须是0%、100%;
  2、在CSS选择器中,使用 animation 调用声明好的动画 ;
    animation的缩写
    Animation-name:动画名称 (声明的关键帧name)
    Animation-duration:动画持续时间 (5s )
    Animation-timing-function:动画速度曲线(ease)
    Animation-iteration-count:动画播放次数,默认为1.(infinite 无限次重复)
    Animation-direction:动画在下一个是否逆向播放,默认为(不逆向播放)normal.(逆序播放alternate)
    Animation-fill-mode:表示动画结束后停留在何种状态。要使用这个属性,动画执行次数必须有限次!(forwards 动画停留在结束状态;backwards表示动画停留在初始状态,默认效果)
    【注】 name和duration必须设置,其他选填!可以同时设置多个动画,多个动画之间 用 , 分隔。例如,animation:frame1 1s,frame2 1s......
两点补充——CSS3新属性以及弹性布局
 响应式布局
一、实现响应式的方式:
      JS  媒体查询 流体布局 弹性布局
二. flex 弹性布局
  1、了解两个基本概念;
        容器:需要添加弹性布局的父元素;
        项目:弹性布局中的每一个子元素。
   2、弹性布局的使用
     ① 给父容器添加display:flex/inline-flex;可以使容器内部采用弹性布局显示,不遵循常规文档流的显示方式;
     ② 容器添加弹性布局后,仅仅是内容采用弹性布局,而容器自身在文档流中的定位方式依然遵循常规文档流;(不打破文档流,友好) 
     ③ display: flex; 容器添加弹性布局后,显示为块级元素  
         display:inline-flex; 容器添加弹性布局后,显示为行级元素
     ④ 设为flex布局之后,子元素的float、vertical-align、clear失效。但是position依然生效。
  示例图  
两点补充——CSS3新属性以及弹性布局
 display:inline-flex; 显示为行级元素
两点补充——CSS3新属性以及弹性布局
 display:flex; 显示为块级元素 自动换行
  3、作用于容器的相关属性:
    ① flex-direction 属性决定 主轴的方向(即项目的排列方向)。
            row(默认值):主轴为水平方向,起点在左端
            row-reverse:主轴为水平方向,起点在右端
            column:主轴为垂直方向,起点在上沿。
            column-reverse:主轴为垂直方向,起点在下沿。
  示例图  
两点补充——CSS3新属性以及弹性布局
       ② flex-wrap 属性定义,如果一条轴线排不下,如何换行。
         nowrap(默认):不换行。当容器宽度不够时,每个项目的宽度会被挤压
               wrap:换行,并且第一行在容器最上方
          wrap-reverse; 换行,第一行在下方。
          flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
  代码  
两点补充——CSS3新属性以及弹性布局
  示例图  
两点补充——CSS3新属性以及弹性布局
  ③ justify-content 属性定义了项目在主轴上的对齐方式。
       【注】此属性与主轴 方向息息相关。主轴方向:row - 起点在左边;row-reverse - 起点在右边; column - 起点在上边;column-reverse - 起点在下边。
           flex-start(默认值):项目位于主轴起点
           flex-end:项目位于主轴终点
           center: 居中
           space-between:两端对齐,项目之间的 间隔都相等。(开头和最后的项目,与父容器边缘没有间隔)【常用】
           space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目,与父容器边缘有一定间隔)
  示例图   justify-content: space-between;  两端对齐
两点补充——CSS3新属性以及弹性布局
      ④ align-items 属性定义项目在交叉轴上的排列方式。
                flex-start:交叉轴的起点对齐。
                flex-end:交叉轴的终点对齐。
                center:交叉轴的中点对齐。
           baseline: 项目的第一行文字的基线对齐。(文字行高、字体大小会影响每行的基线)
           stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
可以参照下图加以理解:
两点补充——CSS3新属性以及弹性布局
    ⑤ align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。            
           【注】当项目换为多行时,可以使用align-content 取代 align-items 。
            flex-start:与交叉轴的起点对齐。
            flex-end:与交叉轴的终点对齐。
            center:与交叉轴的中点对齐。
            space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
            space-around:每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。
            stretch(默认值):轴线占满整个交叉轴。
  4、作用于项目上的属性
       ① order: 0;属性定义项目的排列顺序。 数值越小越靠前,默认为0。
       ② flex-grow 属性 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
       ③ flex-shrink 属性 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
       ④ flex-basis 定义项目占据的主轴空间(设置后,若果主轴为水平,相当于设置项目的宽度,原width失效。)
       ⑤ flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
        这个属性有两个快捷设置:auto=(1 1 auto)空间不够会挤压、空间剩余会放大 和 none = (0 0 auto)空间不够不挤压、空间剩余也不放大
        ⑥ align-self 定义单个项目自身在交叉轴上的排列方式,可以覆盖掉容器上的align-items属性
         属性值:与 align-items 相同,默认auto,表示继承父容器align-items的属性值 
eg.
#div{
width: 500px;
height: 500px;
background-color: yellow;
display:flex;
justify-content: space-between;
align-items: flex-start;
}
#div div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: blue;
color: white;
font-size: 30px;
}
.div1{
font-size: 100px;
order:; /*调换次序*/
flex-grow:;
}
.div3{
order:;
flex-grow:;
flex-shrink:;
align-self: flex-end; /*使序号3向下对齐*/
}

效果图

两点补充——CSS3新属性以及弹性布局

CSS部分可以告一段落了~~~如果对你有帮助  →
点收藏哦~~~