css 笔记一：布局基础

2016-12-09 本文已影响158人 brandonxiang

css 笔记一：基础

css应该是非常基础的东西，大家都现在都过分关注一些前端的前沿技术，却忽视了一些基础功能。即使是样式布局方面也有很多前端工具。像sass，和

参考display:inline、block、inline-block的区别，block相关的都是将元素显示为块级元素。

display:block和display:inline-block;即是另起一行，区别在于高度，行高以及顶和底边距是否控制。

display:block就是将元素显示为块级元素
display:inline就是将元素显示为行内元素
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格

display:inline是将对象呈递为内联对象。把对象并排安排在一行当中。

弹性盒子的优势在于它实现多个dom之间的按比例的相对布局。缺点在于它的兼容性问题。IE的兼容性尤为突出。正因为这个，却和移动端产品一拍即合。坚决了很多移动端不同手机之间的布局兼容性问题。

阮一峰老师的Flex布局非常简洁明了，特别是实例篇。

减少使用绝对定位的变化，有效减少重绘重排
为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，

display:none是不删除元素的情况下隐藏，不占用空间。visibility: hidden只是把dom隐藏，还是会占据空间。