一、选择器：

分为关系选择器，属性选择器，伪类选择器

1.1关系选择器

后代选择器 ul li 选择所有的后代元素

子代选择器 ul > li 选择ul的儿子

紧邻选择器 .box + li 选择.box后面的一个li元素

兄弟选择器 .box ~ li 选择.box后面所有的li元素

1.2属性选择器：通过属性来选择对应的元素

（1）E[属性名] ：选择所有的具备这个属性的E元素

（2）E[属性名=值] ：选择所有的具备这个‘属性 = 对应值’的E元素

（3）E[属性名~=值]：选择所有的包含这个‘属性 = 对应值’的E元素

css3新增的：

（4）E[属性名^=值]：从头去匹配这个‘属性 = 对应值’的E元素

（5）E[属性名$=值]：从尾去匹配这个‘属性 = 对应值’的E元素

（6）E[属性名*=值]：从任意位置去匹配这个‘属性 = 对应值’的E元素

1.3伪类选择器

我们以前学过 before after a：link

（1）E：first-child 从父级出发找到第一个孩子为E的元素（css2）

（2）E：last-child 从父级出发找到最后一个孩子为E的元素（css3）

（3）E：nth-child（N）从父级出发找到第N个孩子为E的元素（css3）

小知识点：

（1）even 控制偶数 odd控制奇数

（2）nth-child（5n+1）： N是从0开始逐次+1

（3）有一个跟nth-child（）特别类似的一个选择器 nth-of-type（）

1.4其他选择器

（1）input:focus{} => 选择获取焦点的表单

（2）input:enabled{} => 选择可操控的表单元素

（3）input:disabled{} => 选择不可操控的表单

（4）E:target{} => 选择通过锚点跳转的当前E元素

（5）E:empty{} => 选择没有子节点的E元素包括文本节点（基本不用）

（6）Input:checked => 选择被选中的checkbox表单

二、伪元素 before after

作用：渲染一个虚拟的标签插入到当前元素的内部的前面或者后面

总结：

（1）伪元素默认是行内元素，我们可以进行转化，在实际工作中，多用来模拟一些小的标签去装饰

（2）因为伪元素是不存在的，所以不能直接用JS去获取（可以利用类去覆盖之前的样式）

（3）清除浮动的底层原理：就是让一个伪元素（因为伪元素不占dom内存）去清除浮动，从而节约了dom内存。

（4）text-indent针对伪类不起作用

（5）当伪类需要配合iconfont去使用的话需要打开iconfont.css 拿到content里面对应的值

（6）当伪元素需要hover的效果的时候不能直接hover 需要借助于父级写法：父级：hover：伪元素

（7）content一定不能省略，即使里面没有内容

三、字体的用法

网址：http://www.iconfont.cn/ 阿里

http://www.youziku.com/ 有字库

兼容：支持所有的浏览器

步骤：（这里列举了阿里的web字体的使用）

（1）进入官网点击webfont

（2）输入对应的文字然后选择添加字体

（3）可以直接引用线上地址或者本地下载，引用线上地址需要添加http,（在服务器环境下可以不用），如果是本地下载需要解压，打开demo.html复制代码即可

（4）注意修改路径，给文字添加上对应的类

四、圆角

broder-radius：值

值说明：

（1）一个值设置的是盒子的四个角的水平和垂直半径

（2）每个角都可以单独进行设置其取值顺序是左上右上右下左下顺时针设置

（3）可以简写简写的逻辑跟padding和margin一样

（4）单位支持像素，和百分比（参照的是宽度和高度）

（5）可以用水平半径/垂直半径去单独控制半径并且每一个半径都可以单独控制

（5）阴影

语法：box-shadow：值

值说明：

（1）第一个值：Npx 阴影向水平方向偏移N个像素正数往右负数往左

（2）第二个值：Npx 阴影向垂直方向偏移N个像素正数往下负数往上

（3）第三个值：羽化大小（模糊的大小）

（4）第四个值：阴影尺寸

（5）第五个值：颜色默认值是黑色

（6）第六个参数：内外阴影默认是外阴影内阴影是inset

（7）阴影可以写多个，中间用逗号隔开

（8）阴影可以简写，但是需要注意有一些值需要补0

文字阴影

语法： text-shadow：水平偏移垂直偏移羽化大小颜色

巧妙运用可以制作文字凹凸效果

（6）边框图片

语法：border-image：值

遵从的是九宫格式切图，上下左右分别来一刀

值说明：

（1）border-image-source:url('border.png'); 图片路径

（2）border-image-slice:26;图片切割，不要带单位，遵从九宫格式切图法（上下左右各来一刀）

（3）border-image-repeat:round或者stretch或者repeat; round没有瑕疵，stretch默认拉伸，repeat 平铺（可能有瑕疵）

（4）简写：border-image:url('border.png') 26 round;

总结：是以九宫格式的方式切图

（7）背景系列

（7.1）背景图片的基准点

语法：background-origin：值

值说明：

（1）border-box ：忽略边框直接从边框的起始 0 ，0点平铺

（2）padding-box：默认值，忽略padding 直接从padding的起始 0 ，0点平铺

（3）content-box ：从内容部分开始平铺跟padding有关系

（7.2）多重背景

说明：背景图片之间用逗号隔开，可以写多组，最先渲染的图片有可能会遮住后面渲染的图片

（7.3）控制背景图片的大小

语法：background-size：值

值说明：

（1）当只有一个值的情况下，宽度实现拉伸，并且高度会保持等比例，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽度

（2）当有两个值的情况下，宽度和高度会分别拉伸到对应的值，可能会变形，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽度

（3）contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘，则停止变化

（4）在contain的基础上保证不留白，这就是cover的效果

（8）盒子内减 --- 重要

之前我们的盒子的实际宽度是实际宽度 = width + padding + border，而内减属性会自动帮我们 padding 和 border值，所以用了内减的盒子实际宽度就等于width，至于padding和border的值会自动被width内减掉

在实际工作中，内减配合百分比布局是实现移动端布局的方式之一

（9）渐变

（9.1）线性渐变

background:-webkit-linear-gradient(起始位置,颜色一位置,颜色二位置 ,颜色三位置);

总结：（1）需要添加私有前缀

（2）起始位置建议用方位名词去控制

（9.2）径向渐变

background:-webkit-radial-gradient(起始位置,颜色一位置,颜色二位置 ,颜色三位置);

总结：

（1）起始位置可以是方位名词也可以是角度角度主要是渐变线的角度渐变线默认是水平方向箭头朝右，正值逆时针旋转负数反之（线性渐变）

（2）不支持角度支持像素和方位名词（径向渐变）

（9.3）私有前缀

每一条css3属性合理来说都需要添加对应浏览器的前缀，以保证其兼容性

谷歌苹果：-webkit-

火狐：-moz-

IE：-ms-

o：-o-

小细节：在手机端，一般来说只需要写一个-webkit-（针对国内的绝大部分手机端）

添加的位置：大部分都是直接添加到最前面，css2没有的属性都是添加在最前面的，有一些是css2就有的属性是添加在后面的（background：-webkit-linear-gradient（））

巴特西

CSS3基础01

一、选择器：

1.1关系选择器

1.2属性选择器：通过属性来选择对应的元素

1.3伪类选择器

1.4其他选择器

二、伪元素 before after

三、字体的用法

四、圆角

（5）阴影

（6）边框图片

（7）背景系列

（7.1）背景图片的基准点

（7.2）多重背景

（7.3）控制背景图片的大小

（8）盒子内减 --- 重要

（9）渐变

（9.1）线性渐变

（9.2）径向渐变

（9.3）私有前缀

最新文章

热门文章

巴特西

CSS3基础01

一、选择器：

1.1关系选择器

1.2属性选择器 ：通过属性来选择对应的元素

1.3伪类选择器

1.4其他选择器

二、伪元素 before after

三、字体的用法

四、 圆角

（5） 阴影

（6）边框图片

（7） 背景系列

（7.1）背景图片的基准点

（7.2）多重背景

（7.3）控制背景图片的大小

（8）盒子内减 --- 重要

（9）渐变

（9.1）线性渐变

（9.2）径向渐变

（9.3）私有前缀

最新文章

热门文章

1.2属性选择器：通过属性来选择对应的元素

四、圆角

（5）阴影

（7）背景系列