伪元素 first-letter
摘要：::after, ::before, ::backdrop, ::first-letter,::first-line, ::selection（css3）是伪元素， :active, :focus, :checked等等被称为伪类 要想::first-letter(:first-letter)伪元素
阅读全文
posted @
2016-11-25 18:04
半夏微澜ぺ
阅读(399)
推荐(0)
html语义化 -------<fieldset>和<legend>
摘要：为什么HTML代码要语义化，除了代码可读性好以外，SEO有帮助外，最主要的还是对一些屏幕阅读设备或者其他辅助阅读设备友好， 可以让用户在条件受限的条件下依然可以正常使用我们的产品，比方说鼠标坏了，又或者说视力有障碍的用户等等。 fieldset,legend元素在CSS布局中的应用 效果如下（实时）
阅读全文
posted @
2016-11-25 16:35
半夏微澜ぺ
阅读(1605)
推荐(0)
实现文字字数不等对其
摘要： ：空格 占据宽度受字体的影响  透明；占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。  透明；占据的宽度正好是1个中文宽度，而且基本上不受字体影响。 中文字符： 中文都是等宽的，因此可以使用  和  实现两个 三个 四个字符的对齐（还可
阅读全文
posted @
2016-11-25 16:13
半夏微澜ぺ
阅读(255)
推荐(0)
手机与浏览器
摘要：iPhone默认浏览器为Safari;Android默认浏览器webkit内核；诺基亚Symbian S60智能机默认浏览器为OSS(OpenSourceSoftware)浏览器；诺基亚window phone7手机浏览器默认是IE9浏览器。 以上所有手机都可以安装最新的手机Opera浏览器。Chr
阅读全文
posted @
2016-11-25 10:28
半夏微澜ぺ
阅读(210)
推荐(0)
基于active状态类名的web交互开发
摘要：demo： 默认是这样的： 当我们点击更多按钮后，会以CSS3动画的方式展开剩余所有文字信息，如下动图： 下面我们看下关键的CSS代码，这个.active是如何自身无样式的： 可以看到，当我们点击按钮后，盒子变高，以及更多元素隐藏，全部都是通过和.active发生关系后发生的，而不是.active自
阅读全文
posted @
2016-11-23 18:09
半夏微澜ぺ
阅读(659)
推荐(0)
实现文字下划线 ---模拟text-decoration
摘要：css 的text-decoration可以实现文字下方的下划线，但是距离文字比较近，不是很好看，我们可以使用border-bottom来模拟这个效果 （inline元素虽然不可以设置margin-top和margin-bottom，但是可以设置padding值和border） 设置border时，
阅读全文
posted @
2016-11-23 17:16
半夏微澜ぺ
阅读(540)
推荐(0)
relative和absolute
摘要：relative 相对定位 1. 幻影瞬移 absolute属性也有瞬移技能，不同之处在于：absolute属性以天空或其他外界限制计算瞬移位置；而relative属性由于是凡人肉体，偏移能力有限，只能通过自身所在位置计算瞬移位置。 且relative属性的这种瞬间移动之际实际上是一种障眼法，其真身
阅读全文
posted @
2016-11-23 14:14
半夏微澜ぺ
阅读(646)
推荐(0)
absolute属性与IE6/IE7之间的误会
摘要：三、absolute属性与IE6/IE7之间的误会 absolute属性确实存在不少兼容性的问题，首先absolute属性定位相关(left/top)的些bug（例如IE6的奇偶bug）这里不予以讨论。//zxx:很多人都知道，再说就没意思了。 所以，下面所展示的些“误会”都是没有定位属性的(即无l
阅读全文
posted @
2016-11-22 18:01
半夏微澜ぺ
阅读(487)
推荐(0)
实现左右等高布局
摘要：1 margin-bottom:3000px; padding-bottom:3000px; 此例关键是给每个框设置大的底部内边距，然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素，如果把外包容器的overflow属性设为hidden，列就在最高点被裁切。 效果图： 2 displa
阅读全文
posted @
2016-11-22 17:57
半夏微澜ぺ
阅读(592)
推荐(0)
absolute 和float
摘要：position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度 float也是典型的inline-block化元
阅读全文
posted @
2016-11-22 16:37
半夏微澜ぺ
阅读(1879)
推荐(0)
margin和padidng的使用
摘要：何时应当使用margin：需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。 何时应当时用padding：需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子
阅读全文
posted @
2016-11-22 11:09
半夏微澜ぺ
阅读(302)
推荐(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
半夏微澜ぺ
阅读(205)
推荐(0)
margin-负值
摘要：总结：margin负值的影响： 当元素（块级元素）没有设置宽度时：margin负值会增加元素的宽度，当设置宽度时，margin负值只会影响元素的位置。 就是负的边距好像能减小元素在文档流中的尺寸一样，但事实上，它的尺寸大小并没变，只是文档流在计算元素位置的时候，会 认为负边距把元素的尺寸减小了，因为
阅读全文
posted @
2016-11-22 10:36
半夏微澜ぺ
阅读(534)
推荐(0)
margin-----总结----解析逻辑
摘要：margin的解析逻辑 在 margin 中 top、right、bottom、left 的参考线并不一致为一类，而是分为了两类参考线，top 和 left 的参考线属于一类，right 和bottom 的参考线属于另一类。 那他们到底各以什么为参考线呢？top 以 containing block
阅读全文
posted @
2016-11-22 09:54
半夏微澜ぺ
阅读(180)
推荐(0)
margin -------总结（block inline 可置换元素）
摘要：margin在块元素、内联元素中的区别 block元素（块元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准
阅读全文
posted @
2016-11-21 18:33
半夏微澜ぺ
阅读(286)
推荐(0)
background-clip与background-origin
摘要：规定背景的绘制区域 浏览器支持 IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。 注释：Internet Explorer 8 以及更早的版本不支持 background-clip 属性。IE9+、Firefox、Opera、Chr
阅读全文
posted @
2016-11-17 18:07
半夏微澜ぺ
阅读(294)
推荐(0)
page-break-before和page-break-after
摘要：page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。 每个打印属性都可以设定4种设定值：auto、always、left和right。 其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page b
阅读全文
posted @
2016-11-17 17:02
半夏微澜ぺ
阅读(581)
推荐(0)
CSS counter计数器(content目录序号自动递增)详解
摘要：一、CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用，而content属性貌似专门用在before/after伪元素上的。于是，就有了，“计数器↔伪元素↔content属性”的铁三角关系。 二、CSS计数器成员 举例班级中成员依次报名 其中有这么几个关键点：1. 班级命
阅读全文
posted @
2016-11-17 15:58
半夏微澜ぺ
阅读(6830)
推荐(1)
移动端网页巧用 margin和padding 的百分比实现自适应
摘要：一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的! W3C的规范： ((absolute relative)定位中 left/
阅读全文
posted @
2016-11-17 10:48
半夏微澜ぺ
阅读(1249)
推荐(0)
apple-touch-startup-image 制作iphone web应用程序的启动画面
摘要：为ipad制作web应用程序的启动画面时发现个问题，只能显示竖屏图，横屏图出不来，如下： 首先页面头部里要加入（这个是APP启动画面图片，如果不设置，启动画面就是白屏，图片像素就是手机全屏的像素） 重点在下面： 两张图片必须符合宽高标准才能正常显示： startup_portrait.png 768
阅读全文
posted @
2016-11-16 10:28
半夏微澜ぺ
阅读(2275)
推荐(0)
浙公网安备 33010602011771号