摘要： font-size: 在父元素的font-size基础上计算。line-height: 在自身的font-size基础上计算。width: 在父元素内容区宽度基础上计算。height: 在父元素内容区高度基础上计算。margin: 当前元素是静态定位时在父元素内容区宽度（垂直方向也是基于宽度）上计算... 阅读全文

摘要： html结构： 75% css部分：.parent {/* 设置相对定位配合进度展示块的绝对定位 */position: relative;/* 设置浮动，让宽度收缩，包裹图片，不然太宽，会出现进度展示块的宽度大于图片的宽度 */float: left;}... 阅读全文

摘要： 实现方法：用空的内联块，宽度高度都设置成0，其中一边的边框设置成可见，其它三边边框设置成透明，再配合边框宽度，可见的边框就呈现成三角形。 模拟代码：css部分： html部分： 效果图： 补充: 用margin-bottom来调整底部偏移偶尔会出现底部的尖角被削掉一点儿，变成棱台形状，换成paddi 阅读全文

摘要： html结构： 左上 上 右上 左 中 右 左下 下 右下 css样式：.box { display: -webkit-box;/* 旧版，声明弹性盒子 */ -webkit-box-orient: vertical;/* 旧版，主轴... 阅读全文

摘要： 结构说明：左右两部分宽度固定，中间的部分填充剩余所有宽度。常用场景：最左边摆放一张图片，中间摆放说明性文字，右边摆放相关操作的小图标。之前的做法虽然有实现但是不完美。思路如下（简单描述为左中结构）：首先考虑中间的要拉伸铺满剩下的宽度，必须宽度设置成百分比100%，用box-sizing设置为bord... 阅读全文

摘要： 问题背景：移动端编程里面的左右按钮布局，没有用表布局，而用了浮动（为了让2个各占一半宽度的按钮排列在一行），由于浮动元素脱离了原本的文档流，导致父元素（块元素）所占高度为0，当父元素的display属性设置成内联块inline-block时，惊奇的发现它能占用浮动元素的高度了，但是用了一段时间之后发... 阅读全文