【CSS】知识点整理

1. link和@import的区别

均为外部引用CSS文件:

<link rel="stylesheet" href="xx.css" type="text/css" @import url('xx.css') 

(1)link属于HTML标签,而@import是CSS提供的;;
(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载
(3)link是HTML标签,无兼容问题;而import只在IE5以上才能识别
(4)link方式的样式的权重 高于@import的权重。

2. 盒模型(box-sizing)

盒模型:本质上是一个盒子,用来封装周围的HTML元素。它包括:边距(margin),边框(border),填充(padding),和实际内容(content)。

  • 标准盒模型(W3C盒模型)【默认值】
    (1) 定义:
    box-sizing:content-box;


    (2)设置的 width为content部分的width。
    一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
  • 怪异盒模型(IE盒模型)
    (1)定义:
    box-sizing:border-box;


    (2)设置的 width为content+padding(左右)+border(左右)
    一个块的总宽度=width+margin(左右)(即width已经包含了padding和border值)

3. 选择器优先级

  • !important > 内联样式 > ID选择器 > class选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性
  • 内联样式 > 内部样式表 > 外部样式表
  • 计算规则:
    由A、B、C、D的值来决定:
    (1)存在内联样式,那么A=1,否则 A=0;
    (2)B = ID选择器出现的次数;
    (3)C = 类选择器 + 属性选择器 + 伪类选择器 出现的总次数
    (4)D = 标签选择器 + 伪元素选择器 出现的总次数
    比较规则:按位比较(ABCD),从左到右。只要一位高出则立即胜出,若无则继续比较。

4. 关系选择器

选择器 名称 描述
E F 包含选择器 选择所有包含在E元素里面的F元素
E>F 子选择器 选择所有作为E元素的子元素F,不包括孙元素
E+F 相邻选择器 选择紧贴在E元素之后的F元素
E~F 兄弟选择器 选择E元素所有兄弟元素F,不一定是紧邻的

5. display常用属性

作用
inline(行内元素) 与其他元素共享一行,满了换行显示;
不能更改width和height,大小高度由内容撑开;
padding上下左右均有效,margin左右有效,上下无效
block(块级元素) 元素内容独占一行;
可以修改width和height;
padding和margin上下左右均有效。
inline-block(融合行内与块级元素) 可以与其他元素共享一行;
可以修改width和height;
padding和margin上下左右均有效。
table 块元素级的表格。

6. display:none 和 visibility:hidden的区别

(1)display:none,不会占原来的位置,会影响页面的布局,相当于把元素删除掉。
(2) visibility:hidden,仍然占有原来的位置,不会影响页面的布局,也不会触发该元素绑定的事件。

7. em和rem的区别

(1)em:相对于父元素的font-size
(2)rem:相对于根元素(html)的font-size
注意1rem=16px

8. 外边距折叠问题

(1)margin均为正值:取较大值
(2)margin均为负值:取绝对值中的较大值
(3)margin有正有负:取两者的相加的和

9. z-index 多个元素层叠顺序

  • z-index默认为0,可取整数值(也可取负值)
  • z-index值较大的元素,显示在上面

10. 优雅降级 和 渐进增强

(1)优雅降级【向下兼容】:一开始就构建站点的完整功能,然后针对低版本的浏览器进行测试和修复。
(2)渐进增强【向上兼容】:针对低版本的浏览器构建页面,以保证最基本的功能实现;接着根据高版本的浏览器进行交互、效果,追加功能以达到更好的体验。

全部评论

相关推荐

06-13 17:33
门头沟学院 Java
顺序不记了,大致顺序是这样的,有的相同知识点写分开了1.基本数据类型2.基本数据类型和包装类型的区别3.==和equals区别4.ArrayList与LinkedList区别5.hashmap底层原理,put操作时会发生什么6.说出几种树型数据结构7.B树和B+树区别8.jvm加载类机制9.线程池核心参数10.创建线程池的几种方式11.callable与runnable区别12.线程池怎么回收线程13.redis三剑客14.布隆过滤器原理,不要背八股,说说真正使用时遇到了问题没有(我说没有,不知道该怎么回答了)15.堆的内存结构16.自己在写项目时有没有遇见过oom,如何处理,不要背八股,根据真实经验,我说不会17.redis死锁怎么办,watchdog机制如何发现是否锁过期18.如何避免redis红锁19.一个表性别与年龄如何加索引20.自己的项目的QPS怎么测的,有没有真正遇到大数量表21.说一说泛型22.springboot自动装配原理23.springmvc与springboot区别24.aop使用过嘛?动态代理与静态代理区别25.spring循环依赖怎么解决26.你说用过es,es如何分片,怎么存的数据,1000万条数据怎么写入库中27.你说用limit,那么在数据量大之后,如何优化28.rabbitmq如何批次发送,批量读取,答了延迟队列和线程池,都不对29.计网知不知道smtp协议,不知道写了对不对,完全听懵了30.springcloud知道嘛?只是了解反问1.做什么的?短信服务,信息量能到千万级2.对我的建议,基础不错,但是不要只背八股,多去实际开发中理解。面试官人不错,虽然没露脸,但是中间会引导我回答问题,不会的也只是说对我要求没那么高。面完问我在济宁生活有没有困难,最快什么时候到,让人事给我聊薪资了。下午人事打电话,问我27届的会不会跑路,还在想办法如何使我不跑路,不想扣我薪资等。之后我再联系吧,还挺想去的😭,我真不跑路哥😢附一张河科大幽默大专图,科大就是大专罢了
查看30道真题和解析
点赞 评论 收藏
分享
能干的三文鱼刷了10...:公司可能有弄嵌入式需要会画pcb的需求,而且pcb能快速直观看出一个人某方面的实力。看看是否有面试资格。问你问题也能ai出来,pcb这东西能作假概率不高
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务