常用的行内元素:
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请求次数,提升性能
维护比较差,修改内容需要大量修改