CSS3 常用新特性(个人总结)

一、CSS3选择器

1、属性选择器 title属性：

#test[title=box1]{ 
background-color: yellow;  
}

<div id="test" title="box1">Hello world\</div>

如果写成[title~=box1]{ background-color: yellow;}，那么符合title属性值里含有box1字段的选择器，其他字段用空格隔开也会生效，例如： title="box1 abc"

同理类推：

1、[attribute|=value]：value值开头(必须只有value为开头的整个单词或者后面接连字符)

2、[attribute^=value]：value值开头的所有元素

3、[attribute*=value]：包含value的所有元素

4、[attribute$=value]：以value为结尾的所有元素

 

2、伪类选择器

1、p:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 适用于给父类名使用

2、:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。

3、:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

4、:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。

二、盒模型

1、盒模型种类

• content-box： 内容+padding+边框
• padding-box： 内容+padding
• border-box： 只有内容

2、弹性盒子（Flex Box）

　Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局，即使是行内元素。

.box{

　display: inline-flex;

}

PS：flex布局会使子元素的float、clear、vertical-align失效。

当容器写上box-orient: horizon水平方向排序（不写的时候此为默认值），其子元素排序为水平方向排序。此外flex布局还有6个常用属性。

• flex-direction 容器内容排列方向
• flex-wrap 一行排满后，项目换行方式
• flex-flow 这是上面两个的缩写
• justify-content 水平排列方式
• align-items 垂直排列方式
• align-content 垂直排列（仅对多行有效）

三、动画特效

• transform transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
• transition transition 属性是一个简写属性，用于设置四个过渡属性
• animation animation 属性是一个简写属性，用于设置六个动画属性
• @keyframes 通过 @keyframes 规则，您能够创建动画。

1、transform

transform: none|transform-functions

2、transition

transition: property duration timing-function delay;

3、animation

animation: name duration timing-function delay iteration-count direction;

4、keyframes

 搭配animation使用:

#box1{

　anmition: mymove 2s infinite;

}

@keyframes mymove{

　0% {top:0px;}

　25% {top:200px;}

　50% {top:100px;}

　75% {top:200px;}

100% {top:0px;}

}

四、边框border

• border-radius 用于创建圆角
• box-shadow 用于创建阴影
• border-image 用图片当边框 (较少用)

1、border-radius

#box{
　text-align:center;
　border:2px solid #a1a1a1;
　padding:10px 10px;
　background:#dddddd;
　width:120px;
　border-radius:20px;
}

 

2、box-shadow

box-shadow:10px 10px 5px #888888;

五、字体

• @font-face 设计师可以通过此任意使用自己喜欢的字体

转载于:https://my.oschina.net/chendejie/blog/3074226