半夏微澜ぺ - 博客园

2016年11月23日

摘要： demo：默认是这样的：当我们点击更多按钮后，会以CSS3动画的方式展开剩余所有文字信息，如下动图：下面我们看下关键的CSS代码，这个.active是如何自身无样式的：可以看到，当我们点击按钮后，盒子变高，以及更多元素隐藏，全部都是通过和.active发生关系后发生的，而不是.active自阅读全文

posted @ 2016-11-23 18:09 半夏微澜ぺ阅读(654) 评论(0) 推荐(0)

实现文字下划线 ---模拟text-decoration

摘要： css 的text-decoration可以实现文字下方的下划线，但是距离文字比较近，不是很好看，我们可以使用border-bottom来模拟这个效果（inline元素虽然不可以设置margin-top和margin-bottom，但是可以设置padding值和border）设置border时，阅读全文

posted @ 2016-11-23 17:16 半夏微澜ぺ阅读(539) 评论(0) 推荐(0)

relative和absolute

摘要： relative 相对定位 1. 幻影瞬移 absolute属性也有瞬移技能，不同之处在于：absolute属性以天空或其他外界限制计算瞬移位置；而relative属性由于是凡人肉体，偏移能力有限，只能通过自身所在位置计算瞬移位置。且relative属性的这种瞬间移动之际实际上是一种障眼法，其真身阅读全文

posted @ 2016-11-23 14:14 半夏微澜ぺ阅读(644) 评论(0) 推荐(0)

2016年11月22日

absolute属性与IE6/IE7之间的误会

摘要：三、absolute属性与IE6/IE7之间的误会 absolute属性确实存在不少兼容性的问题，首先absolute属性定位相关(left/top)的些bug（例如IE6的奇偶bug）这里不予以讨论。//zxx:很多人都知道，再说就没意思了。所以，下面所展示的些“误会”都是没有定位属性的(即无l 阅读全文

posted @ 2016-11-22 18:01 半夏微澜ぺ阅读(487) 评论(0) 推荐(0)

实现左右等高布局

摘要： 1 margin-bottom:3000px; padding-bottom:3000px; 此例关键是给每个框设置大的底部内边距，然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素，如果把外包容器的overflow属性设为hidden，列就在最高点被裁切。效果图： 2 displa 阅读全文

posted @ 2016-11-22 17:57 半夏微澜ぺ阅读(591) 评论(0) 推荐(0)

absolute 和float

摘要： position:absolute与float:left是近亲包裹性包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度 float也是典型的inline-block化元阅读全文

posted @ 2016-11-22 16:37 半夏微澜ぺ阅读(1878) 评论(0) 推荐(0)

margin和padidng的使用

摘要：何时应当使用margin：需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。何时应当时用padding：需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子阅读全文

posted @ 2016-11-22 11:09 半夏微澜ぺ阅读(298) 评论(0) 推荐(0)

margin---bug

摘要：常见的浏览器下margin出现的bug IE6中双边距Bug：发生场合：当给父元素内第一个浮动元素设置margin-left（元素float:left）或margin-right（元素float:right）时margin加倍。解决方法：是给浮动元素加上display:inline;CSS属性；或者阅读全文

posted @ 2016-11-22 10:59 半夏微澜ぺ阅读(203) 评论(0) 推荐(0)

margin-负值

摘要：总结：margin负值的影响：当元素（块级元素）没有设置宽度时：margin负值会增加元素的宽度，当设置宽度时，margin负值只会影响元素的位置。就是负的边距好像能减小元素在文档流中的尺寸一样，但事实上，它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，因为阅读全文

posted @ 2016-11-22 10:36 半夏微澜ぺ阅读(529) 评论(0) 推荐(0)

margin-----总结----解析逻辑

摘要： margin的解析逻辑在 margin 中 top、right、bottom、left 的参考线并不一致为一类，而是分为了两类参考线，top 和 left 的参考线属于一类，right 和bottom 的参考线属于另一类。那他们到底各以什么为参考线呢？top 以 containing block 阅读全文

posted @ 2016-11-22 09:54 半夏微澜ぺ阅读(179) 评论(0) 推荐(0)