charling - 博客园

2014年4月

摘要： calc()语法： elem{ width：calc( 50% -2px ); } 取值说明： calc是计算的缩写，上句含义是：计算elem父元素的50%再减2px，并将结果赋值给elem的width属性calc()能做什么： calc()可以通过动态的计算来得到元素的宽度或者高度。例如：width:calc(50% - 2px)。当为元素设置了2px的边框时，通过这样的计算就可以避免因超出而折行。可以使用 + - * / 等运算符来进行计算注意：表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是... 阅读全文

posted @ 2014-04-01 09:13 charling 阅读(374) 评论(0) 推荐(0) 编辑

css3整理--media

摘要： media语法：上面的media语句表示的是：当屏幕宽度小于或等于600px,调用small.css样式表来渲染Web页面。含义： screen：指的是一种媒体类型；还可以选择all、print、TV等。 and：关键词，与其相似的还有not,only。 max-width: 600px：媒体特征，指当媒体小于600px时调用该样式引入方法： 1、link引入： 2、@import引入 @import url("css/reset.css") screen; 3、@media引入： @media screen{ 选择器{ 属性：属性值； ... 阅读全文

posted @ 2014-04-01 08:47 charling 阅读(181) 评论(0) 推荐(0) 编辑

2014年3月

css3整理--box-sizing

摘要： box-sizing语法： box-sizing ： content-box || border-box || inherit 参数取值： content-box：此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。 border-box:此值让元素维持IE传统的Box Mod... 阅读全文

posted @ 2014-03-31 08:59 charling 阅读(1643) 评论(0) 推荐(0) 编辑

css3整理--background-image

摘要： background-image语法： background-image: url1,url2,...,urlN; 通过“，”分隔N张背景图片，background的所有其它属性需要配合该属性进行设置，如下： background-repeat: repeat1,repeat2,...,repeatN; background-position: position1,position2,...,positionN; background-size: size1,size2,...,sizeN; backrgound-attachment: attachment1,attachment... 阅读全文

posted @ 2014-03-31 08:49 charling 阅读(1299) 评论(0) 推荐(0) 编辑

css3整理--background-origin

摘要： background-origin语法： background-origin: padding-box || border-box || content-box 参数取值： padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片； border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片； content-box(content):此值决定background... 阅读全文

posted @ 2014-03-28 09:18 charling 阅读(194) 评论(0) 推荐(0) 编辑

css3整理--background-clip

摘要： background-clip语法： background-clip ： border-box || padding-box || content-box 参数取值： border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉； padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉； context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；阅读全文

posted @ 2014-03-28 09:15 charling 阅读(176) 评论(0) 推荐(0) 编辑

css3整理--background-size

摘要： background-size语法： /*Ｍozilla*/ -moz-background-size: auto || || || cover || contain /*Webkit*/ -webkit-background-size: auto || || || cover || contain /*Presto*/ -o-background-size: auto || || || cover || contain /*W3c标准*/ background-size: auto || || || cover || contain 参数： auto：默认值... 阅读全文

posted @ 2014-03-28 09:08 charling 阅读(377) 评论(0) 推荐(0) 编辑

css3整理--Animation

摘要： animation语法： 1、动画的定义 @keyframes IDENT { from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者全部写成百分比的形式： @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properties:Properties value; } 100% ... 阅读全文

posted @ 2014-03-27 09:20 charling 阅读(191) 评论(0) 推荐(0) 编辑

css3整理--transition

摘要： transition语法： transition ： [ || || || [, [ || || || ]]* 第一个参数：transition-property，执行变换的属性（当属性发生变化时，不直接进行变化，而是以动画的形式逐渐变化）取值包括： none：没有属性变化 all：（默认值）所有属性都变化 indent：指定的属性第二个参数：transition-duration，执行变换需要的时间取值： 0... 阅读全文

posted @ 2014-03-26 09:24 charling 阅读(254) 评论(0) 推荐(0) 编辑

css3整理--transform

摘要： transform语法： transform ： none | [ ]* none为默认值，表示不进行变换 n个transform-function表示进行n种不同的变换。包括：rotate | scale | skew | translate |matrix;（每种变换中间用逗号分开） transform:rotate(30deg) // 沿中心顺时针旋转30度 transform:translate(100px,20px) // 沿X轴向右移动100px，沿Y轴向下移动20px，同transform:translateX(100px)；transform:trans... 阅读全文

posted @ 2014-03-25 08:55 charling 阅读(190) 评论(0) 推荐(0) 编辑

公告