旅行的风筝

1、连续英文撑爆容器 解决办法CSS3 :word-wrap: break-wrap;

选择器1、:target选择器结构性伪类选择器 当指定的锚被点击后，选择到id与之对应的元素，并应用样式。必须要在点击后才能生效。#box1:target { display: none;}<a href="#box1">Click me</a><p id="box1">此处省略一万字</p><p id="box2">此处省略一万字</p>//当a标签被点击的时候，被target

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。兼容性Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-trans

关键帧Keyframes,用来指定动画效果的几个中间状态。 语法为：@Keyframes colorchange { 0% { color: red; } 50% { color: blue; } 100% { color: green; }}使用animation调用动画a:hover {

多列布局columns: <column-width> || <column-count>;//前者为每一列的宽度，后者为总列数columns: 100px 3; //表示3栏显示，每栏宽度100px;兼容性问题，需要添加浏览器前缀-webkit-columns: 100px 3; //表示3栏显示，每栏宽度100px;-moz-columns: 100px 3; //表示3栏显示，每

CSS3增加了新的盒子模型属性，用于定义盒子模型的尺寸解析方式。box-sizing: content-box | border-box | inheritcontent-box表示元素的height和width为元素内边距+内容。 border-box则表示元素的height和width为元素的外边距+内边距+内容。 inherit则表示继承父元素的盒子模型模式

Flex：Flexible Box,直译为灵活的盒子模型，意译为弹性布局，弹性者，可变性强、能屈能伸之谓也。使用方法: //块级元素 display:flex; //行内元素 display:inline-flex; //在以Webkit为内核的浏览器中，应该加上前缀-webkit。如Safari、Chrome，360极速等 .box{

这也是弹性布局的一种，原理相同，只是针对不同的浏览器支持语法display: -webkit-box;//safari、chrome、Operadisplay: -moz-box; //ffdisplay: box;// W3C标准属性box-orient定义主轴方向box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

弹性布局虽然好用，但兼容性并不讨好，除了浏览器实现有差异外,PC与移动端也有差异。display: flex 与 display: box都用于弹性布局。display: box是2009年的命名，display: flex是2012之后的命名。但display: flex不能完全的向后兼容，有些浏览器不支持。display: flexPC端：Chrome和Firefox支持度都很好，IE不支持。

1、使用border原理如下图的盒子模型，各个部分的位置分配。有理由相信，padding，border,margin都由四部分组成，也都可以用来画三角。但是为什么这里使用border呢？因为border可以可以单独设置很多样式，颜色呀，大小啊。 需要注意的是三角形箭头的方向与boder位置相反。 如画一个向上的箭头width: 0;height: 0;border-left: 240px

什么是媒体    所谓媒体也就是媒介，在CSS中代指各种设备。他们有很多类型(media type)，如下： 类型 描述 all 所有设备 braille 盲文 embossed 盲文打印 handheld 手持设备 print 文档打印或打印预览模式 projection 项目演示，比如幻灯 screen 彩色电脑屏幕 spe

过渡属性transition,通过一些简单的事件就可以出发。当事件发生时元素的外观或者位置等发生变化时，就会触发过渡效果，以动画的形式过程性的改变。 可以通过以下几个步骤实现但不仅限于：在默认的样式中声明初始状态声明元素的过渡状态在默认样式中添加过渡函数过渡属性是符合属性：transition-property：指定过渡状态的CSS属性 transition-duration：过渡所需

常见写法如下：1、浏览器的优先渲染模式<meta http-equiv="X-UA-Compatible" content="IE=7"> 以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。<meta http-equiv="X-UA-Compatible" content="IE=8"> 以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。<

1、marginblock元素有效margin: 0 auto;2.positionposition: absolute;left: 50%;margin-left: 50px; //宽度的一半3.text-align对inline、inline-block元素有效.parent { text-align: center;}比如li水平排列居中ul{ text-align: c

使用伪类制作导航菜单分割线/*使用伪元素制作导航列表项分隔线*/.nav li:before { content:''; background-color:#000; width:1px; height:20px; position:absolute; //父元素 left:0px; top:15px; background-imag

cursor 属性规定要显示的光标的类型（形状）。可能的值值描述url需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。default默认光标（通常是一个箭头）auto默认。浏览器设置的光标。c

1、background-originbackground-origin: border-box | padding-box | content-box;注：1、背景图像的background-attachment为fixed时，此属性无效。 2、背景图像的background-repeat不为no-repeat时无效兼容性ie9+,ff4+,opera,chrome,Safari 5+支持2、b

声明：本文大部分内容属于摘录，引用原文地址如下： 视窗单位 vs 百分比单位视窗(Viewport)单位视窗(Viewport)单位是相对单位，意味着它们没有客观的尺寸。它们的大小是由视窗(Viewport)大小决定的。下面是四个与视窗(Viewport)有关的单位。 我将集中讨论前两个单位，因为它们更可能被使用。在很多情况下，视口单位(vh和vw)和百分比单位在它们可以实现的功能方面是重

Stacky footers 可以译为粘性页脚，粘在底部的意思。可以理解为固定页脚，将页脚固定在底部。示意图： 需求：1、在内容未撑满页面时，footer固定在底部 2、在内容超出页面时，footer随着页面的变大而往下移动，也保持在页面底部。实现的思想：     1、header、body、footer都是页面的一部分，page.height = header.height

声明：本文大部分内容属于摘录，引用原文地址如下： CSS3的calc()使用正文占位

transform：变换 transform包含四种几本的变换：平移、旋转、缩放、倾斜。但这个属性在浏览器上的兼容性有区别。 浏览器支持: IE Firefox Chrome Safari Opera 都支持 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-trans

CSS3 box-sizing 属性box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素可能的值：值描述content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box

CSS3 opacity 属性：描述了元素的不透明级别。opacity:value | inherit;//规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。//IE8及之前的应该用替代属性filter:Alpha(opacity=50）;//此处为百分比0-100；翻译filter：滤波器；opacity：不透明度;

letter-spacing属性：用于增加或者减少字符间的空白（字符间距）；该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。可能的值值描述normal默认。规定字符间没有额外的空间。相当于0length

兼容

1.CSS规定的定位机制有三种，分别是标准文档流，浮动及绝对定位。2.W3C标准：由万维网联盟定制的一系列标准，包括：（1）结构化标准语言（HTML和XML）（2）表现标准语言（CSS）（3）行为标准语言（DOM和CMAScript）结构，样式，行为分离3， 标准文档流：特点：从上到下，从左到右，输出文档内容。 由块级元素和行级元素组成。**块级元素，从

1、border-radius 制作圆角值可以使用em，ex，pt，px，百分比等像素单位height: 20px;border-radius: 10px; //这就包含了上左，上右，下左，下右。与下面四个等价border-top-left-radius: 10px;border-top-right-radius: 10pxborder-bottom-right-radius: 10px;b

使用box-shadow为盒子添加阴影。box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];box-shadow: x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];投影方式有两种：inset内部投影，outset外部投影，默认值。box-shadow: 0px 0px 0px 10px

在CSS3中，我们可以为边框设置背景图片border-image:url(../src/image) 7 12 7 12 repeat;//图片切割的宽度，遵循逆时针准则，不需要带单位，允许分别设置，也可以简写border-image:url(../src/image) 7 12 repeat;//图片延伸方式 repeat/round/stretch 更多请参考

1、RGBARGBA颜色是Red,Green,Black,Alpha的简写，自然界中的颜色都是用这三种颜色混合而成的，Alpha设置透明度。color: rgba(R,G,B,A);R、G、B的取值范围为0-255或者0-100% A的取值范围为0-1color: rgba(255,255,255,0.5); //表示半透明白色2、渐变色彩CSS3 Gradient分为线性渐变（linear)

1、vertical-align设置的行内元素所在行的对齐基线，对行内元素和行内块状元素均有效vertical-align: middle;2、line-height设置子元素的行高和父元素的高度相同，与vertical-align配合使用3、position设置子元素相对于父元素为绝对定位,再设置元素的margin为负position: absolute；left: 50%;top: 50%；