css3新增的伪类
1 | [class ^=val] 属性值以val开头的class节点元素 |
link 和 @import 的区别
- 诞生的关系不同
link
是xhtml提供的标签,不仅可以加载css文件,还可以定义RSS,rel连接属性等等。 @import
css提供的语法规则,只能导入样式表的作用,
- 加载顺序不同
加载页面时,link
标签引入的css文件被同时加载. @import
引入的css将在页面加载完成后执行加载。
- 兼容性区别
@import
是css2.1才有的语法,只能在ie5以上才能识别;link
标签作为xhtml的元素,不存在兼容问题
- 可操作Dom区别
可以通过js 动态操作dom , 插入link
标签来改变样式;由于dom方法是基于文档的,无法使用js操控@import
的方式插入样式
权重区别
引入的样式权重大于
@import
引入的样式
CSS 权重优先级顺序简单表示为:
!important
> 行内样式
> ID
> 类、伪类、属性
> 标签名
> 继承
> 通配符
最大 > 1000 > 100 > 10 > 1 > 0
@import
的性能优于link
,因为@import
在页面加载完后才执行,所以在页面加载的同时不会去并行加载这个css文件,适合加载未来需要的文件。
link
在页面加载的同时就会同时加载,浏览器对并行下载有限制,适合 马上就需要加载的文件,并且要放置页面头部。
display
, float
, position
之间的关系
当display:none的时候,就会忽略掉float和position的值,因为此时元素已经消失在渲染树中,元素不产生框
否则,当position为absolute或fixed的时候,元素就是绝对定位,此时float的值为none。
否则,当float不是none的时候,此时元素是浮动元素。
否则,如果元素是根元素,,其它情况下display的值为指定值。
总结来说,绝对定位,浮动,根元素都需要调整display
而且,当元素设置了position:absolute或fixed,,或float不为none的时候,隐式的会将元素的display转为inline-block,即使指定了display除none之外的其它值的时候也是如此,而且也会将z-index增大为1.
如何创建块级格式化上下文,BFC有什么用?
如果创建:
根元素
浮动元素 (float不为
none
)绝对定位元素 (position取值为
absolute
或fixed
)元素display取值为
inline-block
,inline-flex
,flex
,table-caption
,table-cell
之一overflow 除
visible
以外的元素
作用:
可以包含浮动元素
不被浮动元素覆盖
阻止父子元素
margin
值的折叠
css的盒子模型
有两种盒子模型,IE盒子模型
, W3C盒子模型
.
盒子模型: content
内容 , padding
内边距 , margin
外边距 , border
边框 组成
区别在于 : IE盒子模型: 高 或 宽 = content + padding + border
去除inline-block元素间的缝隙
inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距(html中元素间空格,回车,html注释都会造成缝隙)
使用margin负值,不过对于12像素大小的上下文,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素
使用无闭合标签,(但是为了兼容ie6/7,最后一个列表的结束标签需要加上)
font-size:0
letter-spacing为负值,但是有些有浏览器最小间距1像素,在小就会还原了
word-spacing为负值
移除空格
png,gif,jpeg的区别及如何选
gif
8位像素,256色
无损压缩
支持简单动画
支持boolean透明
适合简单动画
体积小
jpeg
颜色限于256
有损压缩
可控制压缩质量
不支持透明
适合颜色丰富的照片
体积小
打开速度快
png
有png8和truecolor png
png8类似gif颜色上限256,体积大,支持alpha透明度,无动画
适合图标,背景,按钮
压缩效率比bmp高,比jpeg低
无损压缩
jpeg / png / gif
jpeg属于有损压缩,每次保存都会产生数据损失,不适合多次编辑保存,压缩过高图像会失真,模糊
png一般体积比同尺寸90%压缩率的jpeg大的多,但是人眼看起来差不多,适合小图标,透明背景,在IE6不支持,但是可以用js的hack
gif 色域不广,只有256中颜色,不适合做太复杂的动画,正在被goole的webm格式取代
参考文献:https://www.zhihu.com/question/20028452
参考文献:http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
参考文献:https://juejin.im/entry/58c60601da2f605dc5a90282?from=groupmessage&isappinstalled=0