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

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 背景属性】

　　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 背景不随滚动条滚动

四、【 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置于不同位置，过渡特效作用完后恢复到原状态的时间不同*/
}

效果图

过渡前

过渡后

五、【 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 动画的使用】

　　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......

响应式布局

一、实现响应式的方式:

JS 媒体查询流体布局 弹性布局

二. flex 弹性布局

　　1、了解两个基本概念;

　　容器：需要添加弹性布局的父元素；

　　项目：弹性布局中的每一个子元素。

　　 2、弹性布局的使用

　　　　① 给父容器添加display：flex/inline-flex；可以使容器内部采用弹性布局显示，不遵循常规文档流的显示方式；

　　　　② 容器添加弹性布局后，仅仅是内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；（不打破文档流，友好）

　　　　 ③ display: flex; 容器添加弹性布局后，显示为块级元素

　　　　 display:inline-flex; 容器添加弹性布局后，显示为行级元素

　　　　 ④ 设为flex布局之后，子元素的float、vertical-align、clear失效。但是position依然生效。

示例图

display:inline-flex; 显示为行级元素

display:flex; 显示为块级元素自动换行

　　3、作用于容器的相关属性：

　　　　① flex-direction 属性决定主轴的方向（即项目的排列方向）。

　　　　 row（默认值）：主轴为水平方向，起点在左端

　　　　 row-reverse：主轴为水平方向，起点在右端

　　　　 column：主轴为垂直方向，起点在上沿。

　　　　 column-reverse：主轴为垂直方向，起点在下沿。

示例图

　　　 ② flex-wrap 属性定义，如果一条轴线排不下，如何换行。

　　　　　　 nowrap（默认）：不换行。当容器宽度不够时，每个项目的宽度会被挤压

　　　　 wrap：换行，并且第一行在容器最上方

　　　　　　 wrap-reverse; 换行，第一行在下方。

　　　 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

代码

示例图

　　③ justify-content 属性定义了项目在主轴上的对齐方式。

　　【注】此属性与主轴方向息息相关。主轴方向：row - 起点在左边；row-reverse - 起点在右边； column - 起点在上边；column-reverse - 起点在下边。

　　　　 flex-start（默认值）：项目位于主轴起点

　　　　flex-end：项目位于主轴终点

　　　　 center：居中

　　　　space-between：两端对齐，项目之间的间隔都相等。（开头和最后的项目，与父容器边缘没有间隔）【常用】

　　　　 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。（开头和最后的项目，与父容器边缘有一定间隔）

示例图 justify-content: space-between; 两端对齐

　　 ④ align-items 属性定义项目在交叉轴上的排列方式。

　　 flex-start：交叉轴的起点对齐。

　　 flex-end：交叉轴的终点对齐。

　　 center：交叉轴的中点对齐。

　　　　 baseline: 项目的第一行文字的基线对齐。（文字行高、字体大小会影响每行的基线）

　　　　 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

可以参照下图加以理解：

　　　 ⑤ 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: 1;                  /*调换次序*/flex-grow: 0;
}
.div3{order: 0;flex-grow: 2;    flex-shrink: 1;align-self: flex-end;            /*使序号3向下对齐*/
}

效果图

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

点收藏哦~~~

转载于:https://www.cnblogs.com/Tracey-1023/p/7392483.html

两点补充——CSS3新属性以及弹性布局相关推荐

从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
“约见”面试官系列之常见面试题第三十七篇之CSS3新属性（建议收藏）
目录 CSS3 结构(位置)伪类选择器(CSS3) 目标伪类选择器(CSS3) 属性选择器(CSS3) 伪元素选择器(CSS3,重要) CSS3盒模型(重要) 颜色模式盒子阴影(CSS3) 文本阴影 ...
CSS中的EM属性之弹性布局
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...
使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
CS3属性之弹性布局
弹性布局添加在父元素默认状态下,交叉轴的宽度或者高度会铺满:但是如果定义了交叉轴的对齐方式,宽度或者高度会被内容撑开定义弹性盒:display:flex; 确定主轴方向: flex-dire ...
Css3新属性：calc()
一.前言 calc()看起来像是javascript中的一个函数,而事实上它是用在Css中的,可以用它来计算长度(宽度或高度),能够自动根据不同尺寸的屏幕自动调接数值,从而很轻松的实现自适应布局展示在 ...
css3新属性partA
1.新的选择器其实大家可以预感到,css3的出现一定会给大家带来更加powerful的选择器,我自称为正则选择器: 如果我们现在有5个li标签,但是每个li标签都要求有不同的背景颜色.传统的做法有两 ...
CSS3新特性-多栏布局
为了实现类似报纸,杂志的多列排版的布局,CSS3新增了一个多列布局模块(css multi column layout module).主要应用在文本的多列布局方面. 语法: colums:<c ...

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

两点补充——CSS3新属性以及弹性布局相关推荐

最新文章

热门文章