css 笔记一:布局基础

css 笔记一:基础

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

基础阅读

Table布局

Block布局

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

display:blockdisplay: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隐藏,还是会占据空间。

2. flex布局和height100%

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容