纯CSS实现段落标题的矩形阴影

今早在手机上读新闻时发现一个效果,感觉这应该是纯CSS实现的,弄到电脑浏览器一看果然是。点击查看原页面 看源码后自己实现一遍。 分解截图,这效果可分为三部分。文字背景,阴影三角形,虚线下划线。 第一步创建文字背景 <style> .wrapper{display:inline-block;width:100%} .title{background:#3be;padding:5px 15px;color: #fff;max-width: 100%;line-height: 18px;height: 18px;float: left;} </style> <div class="wrapper"

CSS绘制三角形箭头

原理 日常使用 CSS 边框,通常宽度值都很小,四条边框颜色也一致,所以很难看出边框有什么特殊之处。如果对边框设置夸张宽度。 #box{ width:0;height:0; border-style: solid; border-width: 18px; border-color: #f65314 #00a1f1 #7cbb00 #ffbb00; } 如果再将 width 和 height 设为0 上下左右四个三角形。 每个三角形代表一个边框,设置三个边框颜色为透明,只留上边框 #box{ width:0;height:0; border-style: solid; border-width: 18px;

理解BFC(Block Formatting Contexts)

BFC(Block Formatting Contexts)和包含块在 CSS 里都属于比较抽象的基础知识。重在理解而非应用。 什么是 BFC 在文档流中所有元素按照一套渲染规则进行定位最终表现在浏览器等媒介中。W3C把这个过程称为视觉格式化。 BFC(Block formatting context)直译为"块级格式化上下文" 在块格式化上下文中,块元素生成的框会从包含块的顶部开始,一个接一个地,垂直向下地摆放。两个兄弟框之间的垂直距离由margin属性来决定,在同一个块格式化上下文中,相邻的块级框之间的垂直外边距会出现折叠。 在块格式化上下文中,每个框的左外边距边要紧贴其 包含块 的左边。即使在有浮动的情景下也是如此,除非框创建了一个新的块格式化上下文(在这种情况下该框可能会为了避开浮动框而变窄)。 这两段话的细节 相邻框垂直方向的距离由 margin 决定。同一个 BFC 的两个相邻框的垂直 margin

CSS包含块Containing Block

包含块在《CSS权威指南》里就几句话介绍,W3C 里也说的很简单。但它是个很重要的基础知识。 为什么理解包含块很重要! 使用 CSS 的 position布局,涉及到 top,right,bottom,left 这些定位属性时,你能十分自信的确定他们相对什么位置偏移吗。在未学习前我一直粗暴的认为包含块就是父元素,它们应该相对父元素偏移。 但是一个元素实际产生的范围框可以有四个。 content edge内容区域产生的内容框。 padding edge内边距边界产生的内边距框。padding为0时和内容框重合 border edge 边框产生的范围框。border-width为0时和内边距框重合 margin edge 外边距边界产生的外边巨框。margin为0时和边框重合 假设图中的元素 position 属性为 relative 。现在它有个尺寸 30px*

float浮动布局与清除浮动

学习CSS回顾,前面总结了 position 定位布局和 inline-block 布局。都是在看过很多国内外相关文章后结合自己的理解整理而成。本文整理 float 相关知识。 开始 经常在其他网站的CSS文件注释里看到/*clear shit*/ 认识float 看W3C对float的定义: A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float