2017-12-06一些小的知识点

原创 moxiao 随笔 个人笔记 2816阅读 2017-12-06 21:57:24 举报

结构伪类选择器
E:nth-child(n) 表示E【父元素中】的第n个子节点

       以-child结尾的选择器,可以理解为“严格匹配”
       元素及顺序需要完全统一

E:nth-last-child(n) 表示E父元素中的第n个子节点,从后向前计算
E:nth-of-type(n)  表示E父元素中的第n个字节点,且类型为E

       :nth-of-type(n) 没有指定具象某个元素,那么是以“通配符”的方式进行查找,如果存在多个不同类型的标签,则找到所有不同类型标签的第n个

       以-type结尾的选择器,以元素为目标,找到第n个出现的元素

 E:nth-last-of-type(n)表示E父元素中的第n个字节点,且类型为E,从后向前计算

涉及到通过顺序查找的伪类选择器,都能使用以下三种方式:
1、odd  奇数
2、even 偶数
3、自然数 n

 E:first-child 表示E元素中的第一个子节点
 E:last-child 表示E元素中的最后一个子节点

 E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
 E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

 E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点
 E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点

文字阴影
text-shadow:x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊(度)距离
color 阴影颜色

    多组属性值用逗号分隔
    覆盖关系:
        从左至右,先写先展示

文字描边
-webkit-text-stroke:宽度 颜色

文字溢出
text-overflow 定义省略文本的处理方式
clip 无省略号
ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)
只适用于单行文字

属性选择器 (IE7及以上支持)
标准属性
自定义属性
非标准属性都称为自定义属性
在使用自定义属性是,加上【data-】前缀

    E[attr]只使用属性名,但没有确定任何属性值

E[attr="value"]指定属性名,并指定了该属性的属性值

    E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个[词列表],并且[以空格隔开],其中词列表中包含了一个value词,而且等号前面的“〜”不能不写
        [词列表]
        [以空格隔开]
        和class="wrap mod-mv"类似
            并不是完整需要有多个词或者空格隔开才能找到,一个词也能找到

    E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的

        ^ 在程序界的意思是以...开头,并且通用

     E[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的

     E[attr*="value"]指定了属性名,并且有属性值,而且属值中包含了value

  E[attr|="value"]指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn)

transition
只有一个时间,那么为运动时间
有两个时间时,第一个运动时间、第二个是延迟时间

transition-duration 运动时间    (ms || s)
transition-property  要运动的样式  (all || [attr] || none)
transition-delay 延迟时间
transition-timing-function 运动形式 
    ease:(逐渐变慢)默认值
    linear:(匀速)
    ease-in:(加速)
    ease-out:(减速)
    ease-in-out:(先加速后减速)
    cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 )

盒模型阴影
box-shadow:[inset] x y blur [spread] color
参数
inset:投影方式
inset:内投影
不给:外投影
x、y:阴影偏移
blur:模糊半径
spread:扩展阴影半径
先扩展原有形状,再开始画阴影
color

border-radius 圆角
不是非得配合border一起使用的

    非绝对测试结果:
        包含第一个纯色块的大小,一定要正方形

        border-radius: 10px 20px 30px 40px;
            从原点(左上角)开始,以顺时针方向进行设置
            如果非4个参数,缺少的参数以对角线的参数为准。

            1个:都一样
            border-radius: 一样
            2个:对角
            border-radius: 左上&右下    右上&左下
            3个:斜对角
            border-radius: 左上    右上&左下    右下
            4个:全部,顺时针
            border-radius: 左上    右上    右下    左下

            正方形实现圆角,设置宽高的一半。
                比如:宽高为400,那么圆角设置为200

            x
            y
            前面是水平,后面是垂直
            不给“/”则水平和垂直一样

outline: none; 表单元素以及a标签在获取焦点时,取消浏览器默认的蓝色边框

线性渐变
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
只能用在背景上,是以背景图生效。

角度  deg

标准样式和内核支持的样式在角度上是不一样的

标准样式的0deg,从下往上
    内核支持的样式0deg,从左往右
    从A颜色渐变到B颜色时,如果中间没有预留空间,那么不会有渐变的过程

重复repeating-linear-gradient

 径向渐变
radial-gradient([<>]? [<形状> || <大小>,]? <点>, <点>…);起点
    浏览器内核支持样式:
        起点:可以是关键字(left,top,right,bottom),具体数值或百分比
        形状: ellipse、circle
        大小 :具体数值或百分比,也可以是关键字(最近端,最近角,最远端,最远角,
                              包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover));

如果想让文字配合背景图裁切,那么文字颜色需要设置为有透明度的颜色

背景图裁切
background-clip
    border-box: 从border区域向外裁剪背景。 
    padding-box: 从padding区域向外裁剪背景。 
    content-box: 从content区域向外裁剪背景。 
    no-clip: 从border区域向外裁剪背景。

  多背景
    逗号分开
    background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

背景尺寸
background-size:x y
background-size:100% 100%
cover 放大
使小背景图放到至整个容器大小
如果不符合缩放比例,会导致背景图变形
将图片放大至整个容器大小,超出容器大小范围的图片不显示
contain 缩小
以图片的缩放进行拉伸
撑满宽或者高
不保证一定能铺满整个容器

背景图现实基点
background-origin : border | padding | content
border-box: 从border区域开始显示背景。
padding-box: 从padding区域开始显示背景。
content-box: 从content区域开始显示背景。

遮罩
mask-image
mask-position
mask-repeat

这几天学的知识点不少,要好好捋下,明天要创造条件把这些知识点用上。

加油吧,没有人给打伞,不想淋雨,就只能找个避雨的地方了。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复