关于前端:jsliang-求职系列-43-CSS-系列汇总

39次阅读

共计 3510 个字符,预计需要花费 9 分钟才能阅读完成。

一 目录

不折腾的前端,和咸鱼有什么区别

目录
一 目录
二 温习知识点
 2.1 根底
 2.2 盒子模型
 2.3 挪动端
三 参考文献
 3.1 面试
 3.2 布局
 3.3 Flex
 3.4 挪动端
 3.5 CSS
 3.6 CSS3
 3.7 层叠上下文
 3.8 BFC 块格式化上下文
 3.9 其余

二 温习知识点

返回目录

温习知识点有 3 个局部。

2.1 根底

返回目录

文章地址:根底

  • [x] DIV + CSS 布局优缺点
  • [x] LoVe HAte 准则a 标签 hover 事件生效问题,link -> visited -> hover -> active
  • [x] 响应式:一个网站可能兼容多个终端,而不是为每一个终端做一个特定的版本,通过 @media 检测不同设施屏幕尺寸做解决
  • [x] 垂直居中

    • [x] Flex 布局:align-itemsjustify-content
    • [x] 相对定位布局:absolute + left/right/bottom/top: 0 + margin: auto
    • [x] transform 布局:absolute + transform: translate(-50%, -50%)
  • [x] 文档流:将窗体自上而下分成一行一行,并在每行中按从左至右一次排放元素,成为文档流,也就一般流
  • [x] 脱离文档流:脱离文档流的元素,将不再在文档流占据空间,而是沉没在文档流上方。float: left/right 以及 position: absolute/fixed
  • [x] 块级作用域上下文(BFC)

    • [x] 阐释:指页面上一个隔离的独立容器,容器外部的子元素不会影响到里面的元素,反之里面的元素也不会影响容器外面的元素
    • [x] 解决问题:革除元素外部浮动、解决外边距合并问题
    • [x] 产生条件:根元素 htmlfloat: left/rightposition: absolute/fixeddisplay: inline-block/flex/gridoverflow: hidden
  • [x] pxemremvw/vh 区别
  • [x] link@import 区别
  • [x] 渐进增减和优雅降级
  • [x] 设置暗藏元素display: nonevisibility: hiddenopacity: 0
  • [x] CSS 选择器

    • [x] 在属性前面应用 !important 会笼罩页面任意地位定义的元素款式
    • [x] 作为 style 属性写在元素内的款式(行内款式)
    • [x] id 选择器
    • [x] 类选择器 | 伪类选择器 | 属性选择器(前面款式笼罩后面款式)
    • [x] 标签选择器
    • [x] 通配符抉择
    • [x] 浏览器自定义款式
  • [x] 层叠上下文background/borderz-index 为负值、块级元素、浮动元素、行内元素、z-index: 0 / autoz-index 为正值
  • [x] displayinlineblockinline-blocktablenone
  • [x] positionstaticrelativepositionfixedsticky
  • [x] CSS 3 新个性
  • [x] CSS 优化

    • [x] 防止链式选择符(从右往左匹配规定)
    • [x] 防止不必要反复
    • [x] 防止 * 通配符
    • [x] 规定引入地位:在 head 定义 link

2.2 盒子模型

返回目录

文章地址:盒子模型

  • [x] 规范盒子 :规范盒子的 contentWidth 等于设置的 width,它的 理论总宽度 = width + padding + border + margin。(高度也一样)
  • [x] 怪异盒子 :怪异盒子的 contentWidth 等于设置的 width + padding + border,它的 理论总宽度 = contentWidth + margin。(高度也一样)
  • [x] 设置盒子模式inherit 继承、content-box 规范盒子、border-box 怪异盒子

2.3 挪动端

返回目录

文章地址:挪动端

  • [x] 应用单位emrem% 以及 vw/vh
  • [x] 布局:应用 rem 单位、通过 position: relative/absolute 布局、Flex 布局
  • [x] 1px 实现:利用 ::after 伪类 + transform: scaleY(0.5)、利用 box-shadow: 0 0.5 0 0 #ccc
  • [x] 300ms 点击提早

    • [x] 为什么呈现:须要通过提早判断用户是须要单击还是双击
    • [x] 如何解决:设置 <meta>、通过 FastClick

三 参考文献

返回目录

本系列参考文献有 46 篇。

3.1 面试

返回目录

  • [x] 50 道 CSS 经典面试题【浏览倡议:30min】
  • [x] 12 个 HTML 和 CSS 必须晓得的重点难点问题【浏览倡议:30min】

3.2 布局

返回目录

  • [x] 干货! 各种常见布局实现 + 出名网站实例剖析【浏览倡议:1h】
  • [x] CSS 常见布局形式【浏览倡议:1h】

3.3 Flex

返回目录

  • [x] Flex 布局教程:语法篇【浏览倡议:1h】
  • [x] Flex 布局教程:实例篇【浏览倡议:1h】
  • [x] 30 分钟学会 Flex 布局【浏览倡议:30min】
  • [x] 写给本人看的 display: flex 布局教程【浏览倡议:30min】

3.4 挪动端

返回目录

  • [x] Mars – mobile needs a hero【浏览倡议:无】
  • [x] 腾讯挪动 Web 前端知识库【浏览倡议:无】
  • [x] 对于挪动端适配,你必须要晓得的【浏览倡议:30min】
  • [x] 如何解决挪动端 Click 事件 300ms 提早的问题?【浏览倡议:20min】
  • [x] 设计方案 – 挪动端提早 300ms 的起因以及解决方案【浏览倡议:20min】
  • [x] 细说挪动端 经典的 REM 布局 与 新秀 VW 布局【浏览倡议:30min】
  • [x] 挪动端 1px 解决方案【浏览倡议:30min】
  • [x] Retina 屏的挪动设施如何实现真正 1px 的线?【浏览倡议:20min】
  • [x] rem 布局解析【浏览倡议:5min】

3.5 CSS

返回目录

  • [x] CSS 罕用技巧【浏览倡议:30min】
  • [x] CSS 设置居中的计划总结 - 超全【浏览倡议:30min】
  • [x] CSS 性能优化的 8 个技巧【浏览倡议:20min】
  • [x] css 加载会造成阻塞吗?【浏览倡议:30min】
  • [x] css 加载会造成阻塞吗【浏览倡议:30min】
  • [x] 不堪设想的纯 CSS 滚动进度条成果【浏览倡议:30min]
  • [x] CSS 定位详解【浏览倡议:20min】
  • [x] Css 单位 px,rem,em,vw,vh 的区别【浏览倡议:10min】
  • [x] 谈谈 rem 与 vw — rem【浏览倡议:5min】
  • [x] 杀了个回马枪,还是说说 position:sticky 吧【浏览倡议:20min】
  • [x] css 行高 line-height 的一些深刻了解及利用【浏览倡议:10min】
  • [x] 浏览器将 rem 转成 px 时有精度误差怎么办?【浏览倡议:20min】
  • [x] 彻底搞懂 word-break、word-wrap、white-space【浏览倡议:20min】

3.6 CSS3

返回目录

  • [x] 集体总结(css3 新个性)【浏览倡议:1h】
  • [x] 高性能 CSS3 动画【浏览倡议:20min】
  • [x] 趣味 CSS3 成果挑战小汇总【浏览倡议:20min】
  • [x] 从青铜到王者 10 个 css3 伪类应用技巧和使用,理解一哈【浏览倡议:20min】

3.7 层叠上下文

返回目录

  • [x] 彻底搞懂 CSS 层叠上下文、层叠等级、层叠程序、z-index【浏览倡议:30min】
  • [x] 深刻了解 CSS 中的层叠上下文和层叠程序【浏览倡议:40min】

3.8 BFC 块格式化上下文

返回目录

  • [x] 什么是 BFC?什么条件下会触发?利用场景有哪些?【浏览倡议:20min】
  • [x] 学习 BFC (Block Formatting Context)【浏览倡议:20min】
  • [x] MDN – 块格式化上下文【浏览倡议:20min】
  • [x] BFC(块级格式化上下文)【浏览倡议:5min】

3.9 其余

返回目录

  • [x] Web 开发者须要晓得的 CSS Tricks【浏览倡议:无】
  • [x] CSS 世界中那些说起来很冷的常识【浏览倡议:30min】
  • [x] 从网易与淘宝的 font-size 思考前端设计稿与工作流【浏览倡议:20min】
  • [x] 2019 年,你是否能够摈弃 CSS 预处理器?【浏览倡议:10min】
  • [x] 浅谈 CSS 预处理器(一):为什么要应用预处理器?【浏览倡议:20min】
  • [x] 布局的下一次变革【浏览倡议:20min】

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。

正文完
 0