css 笔记一：布局基础

css 笔记一：基础

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

基础阅读

• display的其他属性
• 详解css3弹性盒模型（Flexbox）
• CSS布局奇淫技巧之--各种居中
• 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
• 前端技术-布局解决方案

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布局非常简洁明了，特别是实例篇。

• Flex 布局教程：语法篇
• Flex 布局教程：实例篇

Grid布局

css 性能优化

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

坑

1. display和visibility

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

2. flex布局和height100%

• 父容器display:flex后，子元素的内部元素height:100%无效解决方法
• CSS flexbox child height 100%