css 笔记一:基础
css应该是非常基础的东西,大家都现在都过分关注一些前端的前沿技术,却忽视了一些基础功能。即使是样式布局方面也有很多前端工具。像sass,和
基础阅读
Table布局
Block布局
参考display:inline、block、inline-block的区别,block相关的都是将元素显示为块级元素。
display:block
和display:inline-block;
即是另起一行,区别在于高度,行高以及顶和底边距是否控制。
display:block就是将元素显示为块级元素
display:inline就是将元素显示为行内元素
display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格
display:inline
是将对象呈递为内联对象。把对象并排安排在一行当中。
Flex布局
弹性盒子的优势在于它实现多个dom之间的按比例的相对布局。缺点在于它的兼容性问题。IE的兼容性尤为突出。正因为这个,却和移动端产品一拍即合。坚决了很多移动端不同手机之间的布局兼容性问题。
教程
阮一峰老师的Flex布局非常简洁明了,特别是实例篇。
Grid布局
css 性能优化
- 减少使用绝对定位的变化,有效减少重绘重排
- 为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);,
坑
1. display和visibility
display:none
是不删除元素的情况下隐藏,不占用空间。visibility: hidden
只是把dom隐藏,还是会占据空间。