开发经验 ·

系统讲解CSS应用

详解CSS应用

一、HTML基础强化

0x1 理解HTML

HTML是一个“文档”,描述文档的结构,有区块和大纲。
点此查看相关开源项目

0x2 表单

这里的选项二可以点击文字达到点击单选框的效果。

submit/reset必须要有form才有效果。

0x3 HTML版本

HTML4/4.01 (SGML)
XHTML(XML)
HTML5

在XHTML中要求很严格,下面的都有错误:

0x4 HTML5新增语义

  • header/footer 头尾
  • section/article 区域
  • nav 导航
  • aside 不重要内容
  • em/strong 强调
  • i icon

0x5 HTML元素分类

  • 按默认样式分
    • 块级 block
    • 行内 inline
    • inline-block 表单、下拉框、输入框


* 按内容分

查看官方文档

0x6 HTML元素嵌套

块级元素可以包含行内元素
块级元素不一定能包含块级元素
“行内元素一般不能包含块级元素”

0x7 HTML相关面试

  • Doctype的意义是什么
    • 让浏览器以标准模式渲染
    • 让浏览器知道元素的合法性
  • HTML5有什么变化
    • 新的语义化元素
    • 表单增强
    • 新的 API(离线、音视频、图形、实时通信、本地存储、设备能力)
  • em和i有什么区别
    • em是语义化的标签,表强调
    • i是纯样式的标签,表斜体
    • HTML5中i不推荐使用,一般用作图标
  • 语义化的意义是什么
    • 开发者容易理解
    • 机器容易理解结构(搜索、读屏软件)
    • 有助于SEO
    • semantic microdata
  • 哪些元素可以自闭合
    • 表单元素
    • input
    • 图片 img
    • br hr
    • meta ink
  • HTML和DOM的关系
    • HTML是“死”的
    • DOM由HTML解析而来,是活的
    • JS可以维护DOM
  • Form的作用有哪些
    • 直接提交表单
    • 使用submit/reset按钮
    • 便于浏览器保存表单
    • 第三方库可以整体提取值
    • 第三方库可以进行表单验证

二、CSS基础

Cascading Style Sheet
层叠样式表

0x1 层叠的理解

三张有冲突的样式会重叠为一张

运行结果:

0x2 选择器

  • 用于匹配HTML元素
  • 分类和权重
    • 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。
    • 第一等:代表内联样式,如: style=””,权值为1000。
      第二等:代表ID选择器,如:#content,权值为100。
      第三等:代表类,伪类和属性选择器,如.content,权值为10。
      第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
    • !important优先级最高,元素属性优先级高,相同权重后写的生效
  • 解析方式和性能
    • 浏览器的解析方式是从右到左,为了可以提高解析性能
  • 值得关注的选择器

0x3 非布局样式

  • 字体族
    • 字体优先级
    • 自定义字体

  • 行高
    • 由line box组成,linebox由inlinebox组成
    • line-height的设置可以达到垂直居中的效果,将父元素撑起来
    • 图片是inline元素按照字体基线对齐会出现下端留空的现象

      解决方式:
      1.vertical-align: bottom;
      2.display: block;
  • 背景
    • HSLA色彩模式:色相(H)、饱和度(S)、明度(L)、透明度(A)
    • RGBA/十六进制
    • 背景渐变

  • 雪碧图
    减少浏览器的请求次数,将多个图片放在一个图片中。使用的时候,通过background-position调整显示的位置。
  • 边框
    • 边框实现三角形
      原理就是边框交界处是斜切的。
    • 边框用图片填充

      border.png
  • 滚动
    • overflow: visible/hidden/scroll/auto;

0x4 CSS Hack

  • 不合法但生效的写法
  • 主要用于区分不同浏览器
  • 缺点:难理解难维护易失效
  • 替代方案:特性检测、针对性加class

0x5 CSS面试

  • 选择器的优先级
    • 计算权重确定
    • !important
    • 内联样式
    • 后写的优先级高
  • 雪碧图的作用
    • 减少HTTP请求数提高加载性能
    • 有一些情况下可以减少图片大小
  • 自定义字体的使用场景
    • 宣传/品牌/banner等固定文案
    • 字体图标
  • Base64 的使用
    • 用于减少HTTP请求
    • 适用于小图片
    • Base64的体积约为原图4/3
  • 伪类和伪元素的区别
    • 伪类表状态
    • 伪元素是真的有元素
    • 前者单冒号,后者双冒号
  • 如何美化checkbox
    • label[for]和id
    • 隐藏原生input
    • :checked + label
      案例:

参与评论