系统讲解CSS应用
详解CSS应用
一、HTML基础强化
0x1 理解HTML
HTML是一个“文档”,描述文档的结构,有区块和大纲。
点此查看相关开源项目
0x2 表单
1 2 3 4 |
<input type="radio" name="radio1" id="radio1-2" /> <label for="radio1-2">选项二</label> //关联的关键是ID |
这里的选项二可以点击文字达到点击单选框的效果。
1 2 3 4 5 |
<button type="button">普通按钮</button> <button type="submit">提交按钮一</button> <input type="submit" value="提交按钮二"/> <button type="reset">重置按钮</button> |
submit/reset必须要有form才有效果。
0x3 HTML版本
HTML4/4.01 (SGML)
XHTML(XML)
HTML5
在XHTML中要求很严格,下面的都有错误:
1 2 3 4 5 6 7 |
<div class="test">合法</div> <DIV class="test">标签名大写</DIV> <div ID="test">属性名大写</div> <input type="checkbox" checked /> <p>标签不结束1 <div style=color:red>属性不带引号</div> |
0x4 HTML5新增语义
- header/footer 头尾
- section/article 区域
- nav 导航
- aside 不重要内容
- em/strong 强调
- i icon
0x5 HTML元素分类
- 按默认样式分
- 块级 block
- 行内 inline
- inline-block 表单、下拉框、输入框
1 2 3 4 |
<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 层叠的理解
三张有冲突的样式会重叠为一张
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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> |
运行结果:
0x2 选择器
- 用于匹配HTML元素
- 分类和权重
- 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。
- 第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如div p,权值为1。 - !important优先级最高,元素属性优先级高,相同权重后写的生效
- 解析方式和性能
- 浏览器的解析方式是从右到左,为了可以提高解析性能
- 值得关注的选择器
0x3 非布局样式
- 字体族
- 字体优先级
- 自定义字体
123456789@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/十六进制
- 背景渐变
1 2 3 4 5 |
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;
- 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
案例:
12345678910111213141516171819.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>