凡事预则立，不预则废

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行

参考资料：http://www.positioniseverything.net/easyclearing.html先看看clear属性的取值：none、right、float、both、inherit以及各个取值的含义noneNo constraint on the box's position with respect to floats.leftRequires

元素的定位和尺寸，与其包含块有关，而元素会为它的子孙元素创建包含块，所以包含块的意义很重要，包括宽度高度自动值的计算，浮动元素的定位，绝对元素的定位，不了解包含块，就掌握不好后面的理论。下面特定写了一点例子来演示，当元素的position为absolute，而其包含块是一个行内元素的时候，如何确定其包含块的位置，html和css如下： T

1.position的取值有static、relative、fixed、absolute，现在分别讲述他们的效果。2.static：是position的默认值，该值不会被positioned，一旦为其他值，都会被positioned。3.relative：如果仅仅设置position的属性为relative，而不设置top、left、bottom、right属性，那么relative和st

在项目中需要实现这样一个布局，子元素相对于父元素绝对定位，其中子元素的高度是确定的，希望父元素能够自适应子元素的高度，实现两个div的底沿对齐。html: Document .p{ background: yellow; border: 1px solid green; position: relative; } .c{ position

1.BEM的CSS selector命名规则说起来就一句，就是在class中加入组件的前缀2.suit的class selector命名规则https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md比BEM 具体，可操作性也很强. u-utilityName Component ComponentName-desc

在网页中，可以使用自己定义的字体，这个功能早在ie4中就被支持了，我们来看看如何使用漂亮的字体使页面漂亮起来。 step1：去网站上找漂亮的字体包，推荐这几个免费网站，dafont,google-fonts. step2:由于不同浏览器需要的字体包的格式不一样，大概有ttf,eot,woff,svg这几种格式，那么如何找到同一种字体的多种不同格式的文件呢，你需要这个font squirrel。

http://www.zcool.com.cn/article/ZNjI3NDQ=.html

1. 动画基础动画其实就是快速播放连续的图片，这些图片

锦上添花

https://pjchender.blogspot.com.au/2015/04/css-3vh-vw.html

图片的自适应缩放如何写js的响应式flex

css content attribute can only apply to psudohttp://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/https://www.qianduan.net/before-and-before-the-difference-between/

转自：http://jackie-anxis.com/2016/11/29/CSS@7%E8%83%8C%E6%99%AF/

div { > span { @pad: 10px; width:calc(~'100% - @{pad}'); }}div { > span { width:calc(~'100% - 10px'); }}

今天突然发现，写了一个hover，放在手机上竟然没有效果。。

这个东东搞懂了的话，感觉布局的原理就会理解得

插件自动换肤可以j

CSS 框模型概述元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。提示：背景应用于由内容和内边距、边框组成的区域。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为

1.使用inline block可以用来布局，但是必须记住以下三点：·如果vertical-align会影响到inline-block，需将vertical-align的值设为top·如果div之间有空格的话，那么2.使用媒体查询器来自动适应浏览器

1. display是css中用于布局的最重要的元素，主要有两个值block和inline，block用于块级元素，inline元素用于行内元素。  2.常见的块级元素有div、p、form、header、footer、，行内元素有span  3.设置块级元素的width可以防止内容撑破元素，margin的左右为auto，就可以使块级元素的内容居中，左右均分（如图1）。缺点是当调整浏览器窗

1.在以前的css布局中，元素在页面中实际大小是有width+border+padding  确定得。如图1所示，两个div的大小一致，但在页面实际看来却不同图1    以前的页面开发者，为了解决这个问题，会把width变小一点，用来调整整个div在页面中所占的实际大小，现在有了一个属性box-sizing:border-box;这样的话border和padding属性都不会增加元

1.float用于图片环绕文字的方式，如图1所示 ，图片的样式为 img{    float: right;    }图12.该图片由于太大，遮住了div

在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：下面分别介绍这些标签的用法：影像地图（Image Map）标签的使用格式：标记中设置参数usemap="#图的名称" ismap，以表示对图像地图（图的名称）的引用；-->

1.在切完片之后，如图.1图12 然后如图2，选择存储为gif，杂色无，选择“存储”.3.选择“其他”4.

1.超链接的样式，可以通过伪类选择器进行设置。A:linkA:visitedA:hoverA:activePS:注意hover必须置于link和visited之后才有效，而active必须置于hover之后才有效。并且伪类对大小写不敏感。:Hover和:ACTive都是正确的写法2.通过位置进行选择:first-child（在jquer中有:first    :

昨天和今天，查了一些有关css的资料，看得乱七八糟，毫无头绪。真心觉得cssbi

好文章推荐地址：http://www.nowamagic.net/academy/detail/481101051.浏览器分为两大部分：shell+内核

1.mouse事件mouseover 和mouseentermouseout和mouseleave

CSS控制内容两边对齐 (2013-05-16 15:55:37)转载▼标签： css 样式分类： css样式CSS控制内容两边对齐text-align:justify;text-justify:inter-ideograph;1.中文字两端对齐：text-align:justify; 

BorswerMode and DocumentMode are special,which used for IE.the

少时诵诗书

http://front-ender.me/architecture/style-modular.html