随笔分类 -  css

BFC特性下多栏自适应布局
摘要：BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spe 阅读全文
posted @ 2018-05-13 15:29 自律西红柿 阅读(388) 评论(0) 推荐(0)
移动端实现边框0.5像素
摘要：为了在移动端实现0.5像素的实线，以下是个人实践结果 1.通过background-image的渐变效果linear-gradient实现： 效果图： 2.通过border-image的边框背景图实现 效果图： 阅读全文
posted @ 2016-09-23 16:59 自律西红柿 阅读(1212) 评论(0) 推荐(0)
三（奇数）等分两者中间有间隔，两端没间隔
摘要：1.三等分 采用box-sizing:border-box;然后分别给他们赋值你想要的百分比，左边和上边加上border或者padding，本实例采用的是padding，因为样式1，样式二总共分为两层所有用百分比更加合适，最后给他们的父元素添加个margin-left:-间隔大小；让左右两边的间隔不 阅读全文
posted @ 2016-03-02 15:30 自律西红柿 阅读(427) 评论(0) 推荐(0)
[转]retina屏下支持0.5px边框的情况
摘要：2014-12-31更新：截至到IOS8.1，safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了！ 2014-7-25更新：1. 修正dpr = 1.5 机器下四角边框的缩放比例；2. 修正右边框（rBor）的transform-origin为100 阅读全文
posted @ 2016-02-16 11:45 自律西红柿 阅读(356) 评论(0) 推荐(0)
Webkit 文字和背景效果
摘要：-webkit-background-clip：padding-box | border-box | content-box | text，指定对象的背景图像向外裁剪的区域。对应的脚本特性为backgroundClippadding-box从padding区域（不含padding）开始向外裁剪背景。... 阅读全文
posted @ 2015-09-14 13:41 自律西红柿 阅读(928) 评论(0) 推荐(0)
浅谈Margin和Padding值设置成百分数的布局
摘要：转自：问说网http://www.uedsc.com/discussion-margin-and-padding-values.htmlMargin和Padding是我们在网页设计经常使用到的CSS样式，他们分别是间距和填充，一个作用于盒子外面，一个作用于盒子里面，默认的情况下，这些属性的值都会被计... 阅读全文
posted @ 2015-09-11 13:25 自律西红柿 阅读(1587) 评论(0) 推荐(1)
CSS 百分比 margin & padding
摘要：前段时间我同事对于margin和padding应用百分比值似乎有些误解，觉得可能是个普遍问题，所以觉得有必要拿出来单独写一下。margin和padding都可以使用百分比值的，但有一点可能和通常的想法不同，就是margin-top | margin-bottom | padding-top | pa... 阅读全文
posted @ 2015-09-11 12:31 自律西红柿 阅读(478) 评论(0) 推荐(1)
CSS3 justify 文本两端对齐
摘要：浏览器参照基准：Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and Later两端对齐方案基于 text-align:justify 及 text-align-last:j... 阅读全文
posted @ 2015-09-11 10:57 自律西红柿 阅读(2958) 评论(0) 推荐(0)
hasLayout && Block Formatting Contexts
摘要：转自：http://www.smallni.com/haslayout-block-formatting-contexts/因为本人脑子不好使，自己打印出了一张hasLayout和Block Formatting Contexts（以下简称BFC）的触发表贴在办公桌上（也可以称作创建了BFC），每天... 阅读全文
posted @ 2015-06-23 18:17 自律西红柿 阅读(335) 评论(0) 推荐(0)
[转]如何解决外边距margin叠加的问题探讨
摘要：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠，那么如何使元素上下margin不折叠呢？下面的方法或许对大家有所帮助一、首先你要知道什么情况下会触发：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠1.两个或多个说明其数量必须是大于一个，又说明，折叠是元素与元素... 阅读全文
posted @ 2015-06-23 18:13 自律西红柿 阅读(353) 评论(0) 推荐(0)
[转]那些年我们一起清除过的浮动
摘要：浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深... 阅读全文
posted @ 2015-06-23 17:28 自律西红柿 阅读(317) 评论(0) 推荐(1)
CSS background 属性
摘要：CSS 参考手册实例如何在一个声明中设置所有背景属性：body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; }亲自试一试浏览器支持IEFirefoxChromeSafariOpera支持支持支持支持支持所有浏览器都支... 阅读全文
posted @ 2015-05-17 15:58 自律西红柿 阅读(337) 评论(0) 推荐(0)
CSS font 复合属性的顺序
摘要：CSS 参考手册实例在一个声明中设置所有字体属性：p.ex1 { font:italic arial,sans-serif; }p.ex2 { font:italic bold 12px/20px arial,sans-serif; }亲自试一试浏览器支持IEFirefoxChromeS... 阅读全文
posted @ 2015-05-17 13:57 自律西红柿 阅读(5784) 评论(0) 推荐(0)
[转]走向视网膜（Retina）的Web时代
摘要：转载出处：http://www.w3cplus.com/css/towards-retina-web.html维基百科将Retina译为“视网膜”。"Retina"一词，原意是“视网膜”的意思，指显示屏的分辨率极高，使得肉眼无法分辨单个像素。苹果的“iPhone4”和"new iPad"以及“Mac... 阅读全文
posted @ 2015-05-13 09:13 自律西红柿 阅读(496) 评论(0) 推荐(0)