牛客刷题知识点-CSS

1、属性描述linear动画从头到尾的速度是相同的。ease 默认动画以低速开始,然后加快,在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

2、display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间

repaint(重绘)

repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,backgroundcolor,不会影响到dom结构渲染。

reflow(渲染)

与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。

所以display:none才会产生reflow visibility:hidden只会出发repaint

3、要想让文字前留两空白

1.最常用的padding-left

2.text-indent 首行缩进

3.margin-left 整个盒往右,相对于原来位置,文字前不也是留了空白吗(这种方法不应该推荐,只不过也是能达到这题的目的)

4、mozilla内核 (firefox,flock等) -moz webkit内核(safari,chrome等) -webkit opera内核(opera浏览器) -o trident内核(ie浏览器) -ms

5、外部资源由 <object> 元素表示,该元素可以被视为图像、嵌套的浏览上下文或插件要处理的资源。它包括各种属性,如存档、边框、分类、代码库、代码类型等</object>

6、<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

7、overflow:规定内容溢出时发生的事情  是CSS样式  如overflow:scroll;

可能的值

    visible :默认值,超出就超出  不修剪

    hidden:内容会修建,修建内容不可见

    scroll:内容会修建,但可滚动查看其余内容

                无论是否需要都滚动  保证不丢失内容

    auto:如内容修剪,会显示滚动条

    inherit 继承  父元素的 overflow 属性的值

8、rotateY:定义沿 Y 轴的 3D 旋转,可实现翻书的效果

translateY:沿着 Y 轴移动元素

scaleY:定义 2D 缩放转换时,改变元素的高度;定义 3D 缩放转换时,通过给定一个 Y 轴的值

perspective(n):改变3D元素是怎样查看透视图(注:只影响 3D 转换元素)

9、css3动画运用@keyframes规则和animation属性

语法@keyframes animationname {keyframes-selector {css-styles;}}

10、Link,visited,hover,active.

 L o v e h a t e  爱与恨

11、position:fixed | relative | absolute | inherit。fixed固定定位,relative相对定位,absolute绝对定位,inherit从父元素继承。

12、CSS 预编译工具有stylus,sass,less

为什么会出现CSS预编译器这个东西呢?这就要谈到CSS的不足了:没有变量(新的规范已经支持了),不支持嵌套,编程可以力较弱,代码复使用性差。这些不足导致写出来的CSS维护性极差,同时包含大量重复性的代码;为了弥补这些不足之处,CSS预编译器应运而生。而谈到CSS预编译器,就离不开这三剑客Sass、Less、Stylus。历史上,最先登场的是Sass,由于出现最早,所以也是最完善的,有各种丰富的功可以;Less的出现伴随着Bootstrap的流行,因而也取得大量使用户;最后是Stylus,由TJ大神开发(敬大神),因为其简洁的语法,更像是一门编程语言,写起来非常Cool

13、:nth-child(-n+1)  从负方向开始选择,选取小于等于1的标签。nth-child从1开始

14、继承的样式权重小于给自身设置样式的权重

15、BFC

BFC(Block Formatting Context)直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用 当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。 也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器,并且这个容器的里box的布局,与这个容器外的毫不相干

怎样才能形成BFC

float的值不能为none

overflow的值不能为visible

display的值为table-cell, table-caption, inline-block中的任何一个

position的值不为relative和static

16、单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间单;

元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离。、

17、a标签不能套a标签,p标签不能套块标签 CSS3中,单冒号 :visited 伪类,双冒号 ::before 伪元素。 :before 是CSS3之前的旧的伪类。

18、BFC的区域不会与float的元素区域重叠

19、继承就是指子节点默认使用父节点的样式属性。

 不可继承的属性太多了不要背,记住可以继承的属性有哪些就行了。可以继承的属性很少,只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承。 所有元素可继承:visibility和cursor。 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 终端块状元素可继承:text-indent和text-align。 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image

20、:nth-child(n),n从1开始计数

:nth-child(odd)和:nth-child(even),从1开始计数

:nth-child(an+b),n从0开始计数

21、relative和absolute都可以基于(相对于)relative、absolute、fixed定位,而且层级也是默认叠加的,不仅仅只局限于我们所熟知的“子绝父相”。flxed:只基于窗口定位。

22、选择器的优先级 

从高到低依次是: 1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素标签上的内联样式 

3.id选择器 

4.类选择器 =伪类选择器 =属性选择器 

5.标签选择器 

6.通配符选择器

23、使用@font-face调用服务器端字体的代码

24、fixed元素,可定位于相对于浏览器窗口的指定坐标,它始终是以 窗口 为依据

relative元素以它原来的位置为基准偏移,在其移动后,原来的位置仍然占据空间

25、css颜色

1、颜色名

如:red,blue,green

2、十六进制(红绿蓝)

#f00、#ff0000表示红色

一般为3或者6位数字,题目4位???

3、rgb(r,g,b)

如:rgb(255,0,0)表示红色 

4、hsl(Hue,Saturation,Lightness)/(色调、饱和度、亮度) 

hsl(0,100%,100%)

0:红色

120:绿色,

240: 蓝色 

26、css继承

不可继承的:baidisplay、dumargin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

所有子元素可继承:visibility和cursor。

内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

块状元素可继承:text-indent和text-align。

列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承:border-collapse。

27、border-top-width:默认值medium,定义中等的上边框。outline-width:默认值medium,规定中等的轮廓。

28、1. svg绘制出来的每一个图形元素都是独立的DOM节点,可方便后期绑定事件或修改,而canvas输出的是一整幅画布

2. svg输出的图形是矢量的,后期可以修改参数来自由放大缩小,无失真,canvas输出标量画布,就像一张图片一样

3.canvas是使用javascript程序绘图(动态生成),svg是使用xml文档描述来绘图。

4.所以svg更适合用来做动态交互,而且svg绘图很容易编辑,只需要增加或移除相应的元素就可以了。同时svg是基于矢量的,所有它能够很好的处理图形大小的改变。canvas是基于位图的图像,它不能够改变大小,只能缩放显示;所以说canvas更适合用来实现类似于flash能做的事情(当然现在canvas与flash相比还有一些不够完善的地方)

29、margin每个值之间用空格隔开,而不是逗号

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蹦卡啦撒卡玛卡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值