图解CSS3核心技术与案例实战

PDF网盘地址
提取码：7klk

笔记部分

渐近增强和优雅降级

选择器

1、多类选择器

任一类名不存在就无法匹配（IE6不支持，会以末尾类名为准）

2、E + F 选择相邻且紧挨E的F

3、目标伪类选择器

E :target 匹配E的所有元素，且匹配元素被相关URL指向
E后需要一个空格

4、语言伪类选择器

E:lang(en){
quotes:'"' '"';
}

5、结构伪类选择器

• ul>li:nth-child(2)，如果第二个子元素不是li，那便找不到元素
• :nth-child(n)，选取父元素的所有子元素

伪元素::select

匹配突出显示的文本，只接受background和color属性

属性选择器

• E[attr]，选择具有attr属性的元素
• E[attr*=val]和E[attr~=val]的区别：前者是元素属性只要包含val即可，后者表示属性值要包含val，例：

1、<a title='value'></a>
2、<a title='val me'></a>

第一条代码只有title*=val才能选取，第二条则两者都可以选取到

边框

（前缀）

border:border-width border-style border-color;

其中，border-style为必须
border-style默认为solid，border-width默认为medium，border-color默认为字体颜色

• border-color实现渐变边框（存在兼容性问题）
• border-image
  border-image-source、border-image-slice、border-image-width、border-image-repeat
• border-radius：10px 20px 30px 40px/30px 20px 10px 1px
  border-radius半径小于或等于边框厚度时，内部是直角效果
  图片应用圆角，webkit内核浏览器不会进行剪切，可以利用JavaScript把图片转化为背景再进行剪切
  表格应用圆角，当border-collapse为collapse时不能正常显示，只有当值为separate时才行
• box-shadow
  拓展半径
  层次关系：边框>内阴影>背景图片>背景颜色>外阴影
  border-shadow的内阴影在图片上无用，外层添加div，类为box-shadow；
  或者将img转化为div的背景也可实现

.box-shadow{
display:inline-block;
box-shadow:inset 5px 5px 10px #06c;
}
img{
position:relative;                 //设置index需要，使阴影在图片上方
z-index=-1;
vertical-align:top;              //默认base，会在下方有空隙
}

多层阴影，如果有共同部分，先写的会在上面显示

背景

（前缀）

• background-origin：background-position的定位原点，默认为padding边缘
• background-repeat：
  no-repeat时：background-color从元素边框左上角到右下角，border-image从元素padding边缘左上角到右下角
  repeat时：两者都为padding边缘左上角到右下角
• background-clip：默认border-box
• background-size：值为百分比时，是相对于元素宽高进行计算，而非自己本身的宽高
  background-size：cover和background：center制作满屏背景效果，但是会失真
• background-break：内联元素背景图像进行平铺时的循环方式，存在兼容性问题
• 多背景图像：background-color只能有一个，最先指定的背景图像放在最顶层，可以通过重复定义background-image处理兼容性问题，先写单一，再写多背景

文本

• text-shadow制作文本特效
• 溢出文本：text-overflow，white-space、overflow
• word-wrap：文字换行，在pre和table标签中没有作用
• word-break：文字换行
• white-space：文本换行

颜色

1、RGBA，和opacity的区别
2、HLS，色调，饱和度，亮度，HLSA
3、在IE8下使用RGBA,HLSA可以将其转化为grandient滤镜

盒子

1、w3c盒子模型和ie盒子模型
2、overflow-x，overflow-y

• 外轮廓
  效果与border类似，不占用布局，动态样式，只有在元素获取焦点或被激活的时候才会呈现
  outline创建的外轮廓线在元素各边都一样，始终是闭合的，可以通过outline-offset将其向内拓展

伸缩布局盒模型

（前缀）
1、display为flex的元素会渲染成块元素，设置为inline-flex会渲染成一个行内元素，如果设置为inlin-flex且是浮动或绝对定位元素，则display计算值是flex
2、flex-direction，默认为row；flex-wrap，默认为nowrap，flex-flow为前两者简写属性
3、老版本flexbox、混合版本flexbox（主要针对IE10，使用前缀-ms-）、新版本flexbox
4、CSS的columns在flex容器上没有效果，float、clear和vertical-align在flex项目上没有效果
5、任意测轴外边距为auto时，aligns-self没有效果，align-self为auto，其计算值为aligns-items值，如果该伸缩项目没有伸缩容器，计算值为stretch
6、align-centent：会更改flex-wrap的行为，，flex-wrap为wrap且多行时生效
7、flex

多列布局

（前缀）
1、column-width，column-count，column-gap
2、列宽过大导致无法多列布局时会自动减少列数并调整列宽
3、column-rule不占据空间位置，在Z轴上介于background和content之间，如果column-rule-width超过列于列之间的宽度，列边框就会自动消失
4、跨列column-span，值只有all和none
5、多列高度：column-fill：auto || balance

渐变色

（前缀）
1、渐变可以应用在任何使用背景图片的地方
2、IE低版本兼容：利用滤镜
3、webkit老式：-webkit-gradient- webkit新式：-webkit-linear-gradient
4、radial渐变， position默认为center
5、如果< shape >设置为circle或省略，< size >可以设置length，不能为百分比，不能为负值
6、如果< shape >为ellipse，< size >可以设置length或百分比，不能为负值
7、< size >默认为farthest-corner
8、radial-gradient（50px 150px at 200px 150px，起始颜色，终止颜色）圆心在200px，150px处半径是50px，150px；或circle at center
9、radial-gradient（50px|closest-side circle [at top]，起始颜色，终止颜色）
10、重复线性渐变：[-webkit-]repeating-linear-gradient，重复径向渐变：-webkit-radial-linear-gradient，不能加to？；repeating-radial-gradient，要to top，不能少to？
11、渐变显示的是颜色，但事实是一张图像

变形

（前缀）

• transform：多个变化用空格隔开而非逗号
• transform-origin：z-offset只能是数值，百分比无用，xy轴数值可以为数值、百分比或关键词（top等）
• transform-style：flat，2D呈现，preserve-3d，子元素开启3d，overflow-hidden会使preserve-3d失效
• perspective：用户和元素3D元素空间Z平面之间的距离，越小，3D效果越强，设置给父节点
• perspective()函数，取值只能大于0，否则无法激活3D空间，应用在当前元素上而非父元素，transform:perspective(100px)
• perspective-origin：两个值，x和y
• backface-visibility ：元素旋转背面是否可见，默认可见
• scale()函数，可以取正值，也可以取负值，负值时元素先反转在缩放
• skew()，matrix()
• rotateX(a)等于rotate3d(1,0,0,a)
• 多重变形：空格隔开

过渡

(前缀）

transition:property duration timing-function delay

• timig-function：贝塞尔曲线
• step（）
• transition-delay：正整数 延迟触发 ，负整数：之前动作被截断
• TransitionEnd事件，优先的过渡属性，过渡开始和结束为auto，隐式过渡，开关状态的不同过渡方式、几乎无限延迟的过渡
• 通过硬件加速使过渡更流畅
• 过渡和伪元素

动画

（前缀）

• animation，@keyframe

媒体查询

(无前缀）

• link方式

<link rel='stylesheet' href='style.css' media='screen'/>

• xml方式
• @import方式

@import url(style.css) screen

• media方式

@media screen {}

• < meta name=‘viewport’ content=’’ />
• IE9以下浏览器要使用媒体查询需要添加脚本

嵌入WEB字体

（无前缀）

• 为了兼容各种浏览器需要添加许多字体

content：attr(data-)：attr()获取元素属性，一般和data-*一起使用