系统讲解CSS应用

详解CSS应用

一、HTML基础强化

0x1 理解HTML

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

0x2 表单

<input type="radio" name="radio1" id="radio1-2" />
<label for="radio1-2">选项二</label>
//关联的关键是ID

//关联的关键是ID

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

<button type="button">普通按钮</button>
<button type="submit">提交按钮一</button>
<input type="submit" value="提交按钮二"/>
<button type="reset">重置按钮</button>

<button type="submit">提交按钮一</button>

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

0x3 HTML版本

HTML4/4.01 (SGML)
XHTML(XML)
HTML5

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

<div class="test">合法</div>
<DIV class="test">标签名大写</DIV>
<div ID="test">属性名大写</div>
<input type="checkbox" checked />
<p>标签不结束1
<div style=color:red>属性不带引号</div>

<DIV class="test">标签名大写</DIV>

<div ID="test">属性名大写</div>

<p>标签不结束1

0x4 HTML5新增语义

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

0x5 HTML元素分类

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

<div>DIV元素</div> //块级
<p><span>内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p> //行内
<p><select><option>下拉框</option></select> //inline-block <span>你猜左边是什么元素</span></p>

<div>DIV元素</div> //块级

<p><span>内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p> //行内

<p><select><option>下拉框</option></select> //inline-block <span>你猜左边是什么元素</span></p>

* 按内容分

查看官方文档

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 层叠的理解

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

body{
      padding: 10px;
      font-size: 14px;
      background:red; 
}
body.body{
     font-size: 20px;
     background: red;
}
#body{
    background: blue;
}

<body class="body" id="body">
    Hello CSS!
</body>

body{

padding: 10px;

font-size: 14px;

background:red;

}

body.body{

font-size: 20px;

background: red;

}

#body{

background: blue;

}

Hello CSS!

</body>

运行结果：

0x2 选择器

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

0x3 非布局样式

字体族

字体优先级
自定义字体

  @font-face {
        font-family: "IF";
        src: url("./IndieFlower.ttf");
    }
    .custom-font{
        font-family: IF;
    }
  <div class="custom-font">你好 Hello World</div>

@font-face {

font-family: "IF";

src: url("./IndieFlower.ttf");

}

.custom-font{

font-family: IF;

}

<div class="custom-font">你好 Hello World</div>

行高
- 由line box组成，linebox由inlinebox组成
- line-height的设置可以达到垂直居中的效果，将父元素撑起来
- 图片是inline元素按照字体基线对齐会出现下端留空的现象
  
  解决方式：
  1.vertical-align: bottom;
  2.display: block;
背景
- HSLA色彩模式:色相(H)、饱和度(S)、明度(L)、透明度(A)
- RGBA/十六进制
- 背景渐变

background: -webkit-linear-gradient(left, red, green); //从左到右 
background: linear-gradient(to right, red, green); 
background: linear-gradient(180deg, red, green); //角度
linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%);

background: -webkit-linear-gradient(left, red, green); //从左到右

background: linear-gradient(to right, red, green);

background: linear-gradient(180deg, red, green); //角度

linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%);

雪碧图
减少浏览器的请求次数，将多个图片放在一个图片中。使用的时候，通过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
案例：

.checkbox{

    }
    .checkbox input{
        display: none;
    }
    .checkbox input + label{
        background:url(./checkbox1.png) left center no-repeat;
        background-size:20px 20px;
        padding-left:20px;
    }
    .checkbox input:checked + label{
        background-image:url(./checkbox2.png);
    }
<div class="checkbox">
    <input type="checkbox" id="handsome"/>
    <label for="handsome">我很帅</label>
</div>

.checkbox{

}

.checkbox input{

display: none;

}

.checkbox input + label{

background:url(./checkbox1.png) left center no-repeat;

background-size:20px 20px;

padding-left:20px;

}

.checkbox input:checked + label{

background-image:url(./checkbox2.png);

}

</div>