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-*一起使用