css3笔记

1,css3针对CSS2版本出现的弱点进行的一个补充性提升。主要提升了新的CSS样式的设置，

弹性盒子和媒体查询以适应手机端的开发。，增加动画和变形以适应动画特效的制作。

能够制作一些有弧度的元素框。增加关于背景的尺寸设置，增加新的css选择器类型。

2，css3为了解决浏览器兼容的问题，设置了一些常用浏览器私有前缀：

常用浏览器：

IE（内核：Trident），

chrome，苹果浏览器（webkit内核），

firfox(mozilla内核)

-webkit-css3样式名称

-ms-css3样式名称//IE的私有前缀。

-moz-css3样式名称

3，css3选择器：

1，属性选择器：

1),利用属性来查找HTML标签[attr]//标签的属性名英文单词：attr.

[attr="value"]利用属性名称和值来找标签的。

[attr*="内容"]寻找只要该属性内包含了该内容的所有标签

    [attr^="内容"]以该内容开头的标签。

[attr$="内容"]以该内容结尾的标签。

2,结构伪类选择器：

父元素下的子元素选择器：

e:first-child{}

e:last-child{}

e:nth-child(n){}注意：这个n的取值必须计算标签e在父级元素下总的排序号，同时该序号所代表的标签名必须和冒号左侧的标签名能对上。

相同父元素下的相邻兄弟元素选择器：这个选择器只是选择父元素下同一类元素的顺序个数。

e:first-of-type{}

e:last-of-type{}

e:nth-of-type(n){}这里的n代表的是同一个父级下第n个同类元素.

3.状态伪类选择器：

：focus 当点击的行为获取焦点时 input:focus{color:red;}

：after 在元素的内容的后面插入内容 div:after{content:"hello";display:block;color:red;}

：before在元素的内容前面插入内容。

：enabled，当元素可以使用的时候

：disabled，当元素不可以使用的时候

css3:text属性：

text-shadow:x偏移量 y偏移量 z轴上的模糊值 阴影的颜色

box-shadow:x偏移量 y偏移量 z轴上的模糊值 阴影的颜色

text-stroke:文字轮廓线的宽度  文字轮廓线的颜色。

css2:overflow:的属性拓展：

overflow：hidden/scroll/auto

word-wrap:break-word  强制换行，主要针对长单词和URL地址。

透明属性：

rgba(255,245,10,0.5)//只能针对颜色设置透明，不能直接将标签设置为透明。

opacity(0.5)//具有继承性。、

渐变：

线性渐变：

background:linear-gradient(to 方向，开始颜色,结束颜色)；

径向渐变：

background:radial-gradient(定位点,渐变形状,开始颜色,结束颜色)//需要添加私有前缀

边框：

弧角border-radius:

border-radius:

上top left

右 top right

下 right bottom

左 bottom left;

圆形：正方形的标签框，使用border-radius:50%;

椭圆：长方形的，使用border-radius:50%;

半圆：宽取值：高取值=2:1 border-radius:高的值 高的值 0 0；

background:

background-size:背景图的尺寸控制：

关键词取值：

cover覆盖，

contain容纳。

固定取值：px取值：

background-size:

x轴取值 

y轴取值

background:可以实现多背景写法：每个背景图片的引入需要用“,”号隔开

background:

url(icon4.png) no-repeat left,

url(icon6.png) no-repeat right,

url(icon5.png) no-repeat top,

url(icon7.png) no-repeat bottom;

变形：transform:

transform:有四种变形方法：

位移：translate(),

旋转：rotate();

缩放：scale()；

倾斜：skew();

因为变形是瞬间完成的，所以我们无法看到变形的过程，为了呈现更好的效果，

我们需要将变形的成果表现出来这就是我们需要学习

过渡：transition:

transition-property:对什么属性进行过渡（all,单独的具体属性），

transition-duration:过渡的持续时间。

transition-timing-function:linear//线性速度，从头到尾都是保持匀速变化，

transition-delay：变形的推迟时间。

简写方式：

transition:transform 2s linear 2s;

需要结合着用：

transition:all 0.5s linear ;

transform:translate(0px,-6px);

不能出现过渡的属性：display：none ---display:block;

translate(500px)【位移】//向右移动500px；

translate(500px,600px)//元素沿着500px宽600px高的轨迹走的是对角线 ，走的距离可以取负值，代表相反方向。

rotate(360deg)【旋转】，沿着元素的中心点宣传360度。顺时针方向，负值是逆时针方向。

scale(1.5,1.5)【缩放】//沿着水平和垂直方向将元素放大为原来的1.5倍，取值小于1，大于0是指缩小。

skew(xxdeg);【倾斜】将元素倾斜一定的角度，形成平行四边形的立体效果。

变形中心点设置：

transform-origin:定位值

动画：面试题：动画和过渡的区别是什么？

1，过渡的特点：

1，所有的过渡变形都是一次性动作，中间无法做状态转换。

2，所有的过渡都无法重复运动，一次运动结束，立即停止。

3，所有过渡均需要使用人为触发才能实现。

4. 变形无法做批量运动设置。

动画：就是将整个形变动作都归于一个时间段内。并且能够对时间段进行相应的片段划分，实在在不同片段内，动作变形不一样。

动画内容属性：@keyframes{

0%{}

20%{}

40%{}

60%{}

80%{}

100%{}

}

如果我们的动画内容想要加载到指定的标签上，就需要使用另一个属性：animation。

animation-name:规定了动画的名称

animation-duration：动画持续时间

animation-timing-function:动画的运动方式

animation-delay：动画触发的延迟时间。

animation-iteration-count:播放次数：有一个永久播放：infinite

animation-derection:播放的方向：反向播放：reverse

alternate：奇数正向，偶数反向。

animation-play-state:播放状态。暂停：paused

创建动画：

animation：a1 5s linear infinite

媒体查询：

1，媒体查询的样式：@media。

如果我们要进行媒体查询，那么查询什么呢？

查询媒体类型：就是显示设备的类型：

1，阅读器设备kindle，

2，printer打印设备，

3，显示器：screen，

显示器根据尺寸分为四种类型屏幕。

1，屏幕宽度大于等于1200px的称为大屏幕。

2，大于992，小于1200，称为中屏。

3，大于768，小于992，称为小屏

4，小于768称为超小屏

为了配合媒体查询能够在手机设备上显示样式。我们需要讲在页面的head区域设置视窗。

弹性盒子：

弹性盒子的推出是为了对css2传统盒子的一种补充和改善，

1，提高了元素盒子的使用灵活性，

2，实现关键词取值，简化了css布局样式的使用，提升了浏览器的通用性。

样式属性：

设置弹性盒子：

用法：在父级元素上设置：

display:flex，能够直接作用在相邻子级元素上，让相邻子级元素变成弹性盒子。

当子级变成弹性盒子之后，所有的子级标签高度默认为父级高度。所有的子级都自动排为一行。不再需要浮动。

弹性盒子的排列方向：

flex-direction:

row/

row-reverse/

column/

column-reverse;

练习：综合利用弹性盒子排列和弹性盒子的设置来替代float实现一行四列的布局。

设置弹性盒子在默认排列方式下，

水平对齐的方式：

属性名称：

justify-content:取值：

flex-start//居左，

flex-end//居右，

center居中，

space-between:左右两侧紧挨着父级标签，子级块之间的间距相等。

space-around：子级块左右两侧间距等于子级块之间的间距的一半。

弹性盒子在垂直方向的对齐方式：

属性：align-items

值：

flex-start：顶部

flex-end：底部

center：居中

flex-wrap:wrap;弹性盒子的子级，换行

align-content:

flex-start,

flex-end,

center,

space-between,

space-around

以上属性均为：放在父级标签上实现对相邻子级的控制。

以下属性都是放在子级上实现对自身的控制

order：数值；数值大的排序在后面，。数字小的排前面，支持负数。

align-self:设置具体的子级在垂直方向的对齐问题，

flex-start，

flex-end，

center

flex：设置子级的所占比例问题，设置的数字表示子级标签所占份数。