inline formatting context

CSS 内联格式化上下文与层叠上下文 line-box 每一行是由一个或多个行内元素(HTML标签元素或匿名内联元素文本内容)组成,专业术语称为行盒(line-box). 而 line-box 的高度由 不是由单一元素决定。 line-box 说明: <p> Good design will be better. <span class="a" »

margin重叠和 BFC

有些东西回过头来再看,都会有不同的理解,当然这是因为当初没有理解清楚,哈哈。 对于上下 margin 重叠: 先给出解决方案: 在开发的时候尽量用同一方向的margin,比如都设置为top或者bottom 为元素设置浮动、inline-block或者absolute 来消除 margin 重叠。 BFC 不是使得 margin 不重叠的方法,毕竟 overflow 也会触发 BFC, 但是子元素依然重叠, 只是设置了 overflow »

CSSOM handler

每次都记不住CSS BOM的API,太多了,所以总结几个常用的即可。默认不考虑IE9以下的浏览器。 渲染模式 compatmode(一般用于浏览器兼容) **document.compatMode**用来判断当前浏览器采用的渲染方式(兼容模式)。渲染即解释html,css,js之类的代码,从而给网页添加样式 兼容模式:只影响宽度和高度,但会影响浏览器和网页的大小,如clientwidth,scrollwidth,不涉及就不用考虑。 - BackCompat:标准兼容模式关闭。BackCompat »

HOW CSS Works

本文将理清出于css选择器 、选择器的优先级、效率 更多是关于 DOM树,CSS是怎么工作的。 https://developer.mozilla.org/en-US/Learn/CSS/IntroductiontoCSS/HowCSSworks HOW css works http://www.w3cplus.com/css/css-selector-performance http://blog. »

border Awesome CSS

在前端开发中,经常面临一些特殊图形的需求。 那么每次都用图片就会很麻烦,所以能使用代码完成的就用代码完成。 此文先总结 border CSS Background and Borders: https://developer.mozilla.org/en-US/docs/Web/CSS/CSSBackgroundand_Borders 使用border background gradient 配合 ,很好玩,有出乎意料的结果 »

normal-flow & BFC & float

http://www.ituring.com.cn/article/198258 文档流与定位问题 https://www.w3.org/TR/CSS2/visuren.html#normal-flow W3C normal-flow官方文档 文档流 所谓的文档流实际上是一种民间说法,正常称谓应该指的是常规流(normal flow)。从直观上理解正常流指的是元素按照其在HTML 中的位置顺序决定排布的过程, »

Centered layout and more

居中布局与扩展学习 关键词: horizontal centering vertical centering centered layout 本文主要解决在不定宽不定高的情况下完成block element水平居中和垂直居中。 [TOC] 水平居中 inline-block & text-align <style> .child { display:inline-block } .parent { text-align:center; } </style& »

Flex 指南

Flex布局学习与实践 标签: css question 1: 行内的inline-flex 块级元素 与 行内元素 使用的flex 的差异 写前缀时,注意顺序 与css 执行顺序 关系 达成目标:用flex 实现各种经典布局 称为CSS布局模块?? 本文用来了解display各个属性值的用法,但主要内容是探索flex的使用。 完成各种方法实现不同布局。 内联元素 与 块状元素 »

cssom view module

W3C出炉了CSS Object Model View草案。CSSOM视图模块(CSSOM View Module)定义了一些 API,Web 开发人员使用这些 API 可以进行检查,也可以以编程方式更改文档及其内容的视觉属性,包括布局框定位、视区宽度和元素滚动。 简单来说,CSSOM全称CSS对象模型,涉及两部分内容,第一部分和操作样式表相关,第二部分和元素尺寸相关。 window view properties innerWidth »

伪元素和伪类

伪类与伪元素需要区别的地方是: before & after :before   ::before   :after   ::after 通过MDN里的描述::before 是css2里的,称伪类。::before shi css3 里的,称伪元素。 [css]/* CSS3 syntax */ element::before { style properties } /* CSS2 obsolete »

clip

一、使用clip控制图片显示区域 二、雪碧图 实现原理 ,主要是定位方式 : background-position    ; 以及使用clip 实现定位 。,还有其他的定位方式 :如margin等等。 首先好久没更新博客啦,学到一个点就写上来。http://www.1000zhu.com/ 网站里有个hover的动画,很好看,使用clip来裁剪图片的。下面就是对clip的详解以及扩展。 定义和用法: clip 属性剪裁绝对定位元素。 当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" »

sprints & background properity

本文在于详解background属性,再到background-position在 sprites中的实际使用。纠正:是sprites,不是sprite background: 主要参看这几个链接就好了。 http://www.w3cplus.com/css/a-primer-to-background-positioning-in-css.html (中文版) http://blogs.adobe.com/dreamweaver/2015/03/a-primer-to-background-positioning-in-css.html (英文版) »