常用的行内元素：
span ，img， input，
块级元素
h1, h2,…h6, div, p,
空元素
br，hr

行内：无法设置宽高，根据内容调节，
块级：独占一行，宽高可以设置
行内块级元素： 不独占一行，可以设置宽高

link 和@import 的区别

link 是标签的形式
@import 是导入的形式

link的优先级高于@import ，兼容性好与import

title 和h1的区别

title 属于网站的标题，告诉搜索引擎关于这个网站的主题
h1 属于网站的内容，告诉引擎主要的内容

区别： title 显示在网站标题上
h1显示在网页内容上

title 比h1 重要》 SEO上

b 和 strong

b实体标签，加粗文字
strong： 逻辑区别，加强字符语气

• b加粗样式，没含义，strong用于强调重要性
• b尽量少用， 符合 css3的规范

i和em区别

i 用来做文字倾斜
em：逻辑标签，用来强调内容

• i 是倾斜标签

• em 强调文字

• i用于字体图标， em 用于文字术语（医药，圣物）

title 和Alt

一、

title 是鼠标移动上去
alt 图片无法加载显示
二、
seo上，需要加入alt属性描述图片， 因为seo无法抓取图片内容

png 和jpg 区别

• png：无压缩，体积较大，适合做小图标
• jpg： 压缩算法， 有点失真，比png 体积小，适合中大图片
• gif： 动图
• webp： 同时有损和无损，相同的图片，体积更小

盒子模型

标准盒模型

• margin，border，padding， content

IE盒模型

• margin， content（border + padding + content）

转换：
box-sizing： border-box /* IE版本
box-sizing: content-box /* 标准盒模型

line-height 和 height

• line-height 是每一行的高， 总的高度等于行数 * 高度
• height 是一个固定值，死的值

css 选择符有哪些？ 哪些可以继承

• 统配 *
• id #
• 类 .
• 标签 div
• 相邻选择器 +
• 后代 选择器 ui li （后代排除 ul li + li）
• 子元素 >
• 属性选择器 a[herf]

哪些可以继承

• font-size， color， line-height，text-align
  不能继承
• border， padding， margin

Css 优先级

!import > 内联样式 > id > class > 标签 > 统配

权重计算

内联 权重1000
id 100
类 10
标签 1
统配 0

三角形如何画

• 设置border 为透明transparent即可

display 有哪些值

none, block, inline-block , inline
block 块元素，
inline 行元素
inline-block 行内块元素
table 表格

BFC 作用规范

页面上一个隔离的容器， 容器里的子元素不会影响到外面的元素

• 格式化上下文，一个元素具有BFC，内部元素不会影响到外部元素

触发条件

float 非 none
overflow 非 visible
display为： inline-block， table-cell
position 为 absoulte， fixed

清浮动

BFC
增加一个clear：both （淘汰）
虚拟标签：:after {
content: “”;
display:block;
clear:both;
}

position 有哪些值

fixed ：固定， 响对浏览器窗口定位
absoulte： 绝对定位，相对于第一个relative的父元素， 脱离文档流
relative： 相对定位，对于自身定位， 不脱离文档流

reset.css

重置css样式，太冗余
使用Normalize.css 兼容性更好，性能更好

css sprite 有什么优缺点

多个图标合并成小图片

优点：

减少http请求次数，提升性能
维护比较差，修改内容需要大量修改