CSS3 基础知识[转载minsong的博客]

CSS3 基础知识
1.边框
    1.1 圆角  border-radius:5px 0 0 5px;
    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平、垂直、模糊、扩展)
             box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影)
    1.3 边框图像 border-image
2.背景
    2.1 background-size background-size:30px 30px;(背景图像宽度，背景图像高度)
    2.2    background-image:linear-gradient(45deg,rgba(0,0,0,0.5) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 75%,transparent 75%,transparent);(线性渐变，和background-size一起用)
    2.3 background-attachment:(fixed|scroll|local)
        fixed： 背景图像相对于窗体固定。
        scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
        local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。
    2.4 background-position:30px 20px;(横坐标，纵坐标；是图片在动)
    2.5 background-origin:(padding-box|border-box|content-box)
        padding-box： 从padding区域（含padding）开始显示背景图像。
        border-box： 从border区域（含border）开始显示背景图像。
        content-box： 从content区域开始显示背景图像。
3.文本
    3.1 文字阴影 text-shadow:5px 5px 4px #000;(水平，垂直，模糊)
    3.2 换行 word-wrap:(normal|break-word)
            normal： 允许内容顶开或溢出指定的容器边界。
            break-word： 内容将在边界内换行。如果需要，单词内部允许断行。
            white-space:(normal|pre|nowrap|pre-wrap|pre-line)
            normal： 默认处理方式。
            pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
            nowrap： 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
            pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
            pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
    3.3 省略号   width:200px;
                overflow:hidden;
                text-overflow:hidden;
                white-space:nowrap;
4.2D变换
    4.1 旋转 transform:rotate(45deg);
    4.2 移动 transform:translate(45px,45px);(水平，垂直)
    4.3 缩放 transform:scale(2,2);(水平，垂直)
    4.4 翻转 transform:skew(20deg,40deg);(沿X轴翻转，沿Y轴翻转)
    4.5 将以上四个组合在一起 matrix(),需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
        暂放
5.过渡
    5.1 transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
        [ transition-property ]： 检索或设置对象中的参与过渡的属性
        [ transition-duration ]： 检索或设置对象过渡的持续时间
        [ transition-timing-function ]： 检索或设置对象中过渡的动画类型 ,值为linear | ease | ease-in | ease-out | ease-in-out |
            linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
            ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
            ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
            ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
            ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
        [ transition-delay ]： 检索或设置对象延迟过渡的时间        
6.动画
    6.1 animation : [[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]
        [ animation-name ]： 检索或设置对象所应用的动画名称
            配合@keyframes使用 @key-frames animation-name{}
        [ animation-duration ]： 检索或设置对象动画的持续时间
        [ animation-timing-function ]： 检索或设置对象动画的过渡类型
            linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
            ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
            ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
            ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
            ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
        [ animation-delay ]： 检索或设置对象动画延迟的时间
        [ animation-iteration-count ]： 检索或设置对象动画的循环次数
            infinite： 无限循环
            <number>： 指定对象动画的具体循环次数
        [ animation-direction ]： 检索或设置对象动画在循环中是否反向运动
            normal： 正常方向
            alternate： 正常与反向交替
         .one {
            animation:animations 2s ease-out;
        }
        @-webkit-keyframes animations{
            0%{-webkit-transform:translate(0);opacity:0;}
            50%{-webkit-transform:translate(30px);opacity:1;}
            70%{-webkit-transform:translate(35px);opacity:1;}
            100%{-webkit-transform:translate(60px);opacity:0;}
        }
7.媒体查询
    7.1 media
         1.页面小于960px时的写法
            @media screen and (max-width:960px){
                body{
                    background:red;
                }
            }
         2.页面等于960px时的写法
             @media screen and (max-device-width:960px){
                body{
                    background:blue;
                }
            }
         3.页面大于960px时的写法
            @media screen and (min-width:960px){
                body{
                    background:green;
                }
            }
         4.页面大于960px小于1200px的写法
             @media screen and (min-width:960px) and (max-width:1200px){
                body{
                    background:yellow;
                }
            }
         5. media 所有参数的解释
            width:浏览器可视宽度。
            height:浏览器可视高度。
            device-width:设备屏幕的宽度。
            device-height:设备屏幕的高度。
            orientation:检测设备目前处于横向还是纵向状态。
            orientation:检测设备目前处于横向还是纵向状态。
            device-aspect-ratio:检测设备的宽度和高度的比例。
            color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
            color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
            monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
            resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
            grid：检测输出的设备是网格的还是位图设备。
        6.响应式设计的核心CSS技术Media(媒体查询器)的用法
            1.使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
                width = device-width：宽度等于当前设备的宽度
                initial-scale：初始的缩放比例（默认设置为1.0）  
                minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）    
                maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   
                user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
             2.IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
                 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
                  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
             3.设置IE渲染方式默认为最高
                 下面这段代码来让IE的文档模式永远都是最新的：
                <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
                这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。
8.函数计算
    8.1 counter() 是一个函数，主要配合content一起使用，使用counter()来调用定义好的计数器标识符。
        如：
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>           li{list-style:none;counter-increment:antzone;}            li:before{content:counter(antzone)".";}
    8.2 attr() 和content一起使用
        attr(title),括号里是引用的属性，但经常引用自定义属性
        p:after{content:attr(title);}
    8.3 calc() 任何长度值都可以使用calc()函数进行计算,支持+，-，*，/，mod运算
        p{
            width:-moz-calc(100% - 50px);
            width:-webkit-calc(100% - 50px);
            width:calc(100% - 50px);
         }
9.伪对象选择符
    9.1 :first-letter 设置对象内的第一个字符的样式，作用于块级元素，常配合font-size和float使用得到首字下沉效果
        p:first-letter {font-size:30px;}
    9.2 :first-line 设置对象内的第一行，作用于块级元素
        p:first-line {color:#000;}
    9.3 :before 设置在对象前发生的内容,和content一起使用
        p:before {content:"";}
    9.4 :after 设置在对象前发生的内容,和content一起使用
        p:after {content:"";}
    9.5 :selection 设置样式被选择时的样式
        p:-moz-selection{color:red;}
        p:selection {color:red;}
10.长度单位 px em rem
    px:px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
    em:em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
       任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
       在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
       1. em的值并不是固定的；
       2. em会继承父级元素的字体大小。
    rem:使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
        p {font-size:14px; font-size:.875rem;}

CSS3 基础知识

热度 4已有 428 次阅读2015-12-11 11:33 |个人分类:CSS3|系统分类:HTML5/CSS3| CSS3 基础知识, 媒体查询, 长度单位px em rem

CSS3 基础知识
1.边框
    1.1 圆角  border-radius:5px 0 0 5px;
    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平、垂直、模糊、扩展)
             box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影)
    1.3 边框图像 border-image
2.背景
    2.1 background-size background-size:30px 30px;(背景图像宽度，背景图像高度)
    2.2    background-image:linear-gradient(45deg,rgba(0,0,0,0.5) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 75%,transparent 75%,transparent);(线性渐变，和background-size一起用)
    2.3 background-attachment:(fixed|scroll|local)
        fixed： 背景图像相对于窗体固定。
        scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
        local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。
    2.4 background-position:30px 20px;(横坐标，纵坐标；是图片在动)
    2.5 background-origin:(padding-box|border-box|content-box)
        padding-box： 从padding区域（含padding）开始显示背景图像。
        border-box： 从border区域（含border）开始显示背景图像。
        content-box： 从content区域开始显示背景图像。
3.文本
    3.1 文字阴影 text-shadow:5px 5px 4px #000;(水平，垂直，模糊)
    3.2 换行 word-wrap:(normal|break-word)
            normal： 允许内容顶开或溢出指定的容器边界。
            break-word： 内容将在边界内换行。如果需要，单词内部允许断行。
            white-space:(normal|pre|nowrap|pre-wrap|pre-line)
            normal： 默认处理方式。
            pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
            nowrap： 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
            pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
            pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
    3.3 省略号   width:200px;
                overflow:hidden;
                text-overflow:hidden;
                white-space:nowrap;
4.2D变换
    4.1 旋转 transform:rotate(45deg);
    4.2 移动 transform:translate(45px,45px);(水平，垂直)
    4.3 缩放 transform:scale(2,2);(水平，垂直)
    4.4 翻转 transform:skew(20deg,40deg);(沿X轴翻转，沿Y轴翻转)
    4.5 将以上四个组合在一起 matrix(),需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
        暂放
5.过渡
    5.1 transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
        [ transition-property ]： 检索或设置对象中的参与过渡的属性
        [ transition-duration ]： 检索或设置对象过渡的持续时间
        [ transition-timing-function ]： 检索或设置对象中过渡的动画类型 ,值为linear | ease | ease-in | ease-out | ease-in-out |
            linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
            ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
            ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
            ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
            ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
        [ transition-delay ]： 检索或设置对象延迟过渡的时间        
6.动画
    6.1 animation : [[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]
        [ animation-name ]： 检索或设置对象所应用的动画名称
            配合@keyframes使用 @key-frames animation-name{}
        [ animation-duration ]： 检索或设置对象动画的持续时间
        [ animation-timing-function ]： 检索或设置对象动画的过渡类型
            linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
            ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
            ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
            ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
            ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
        [ animation-delay ]： 检索或设置对象动画延迟的时间
        [ animation-iteration-count ]： 检索或设置对象动画的循环次数
            infinite： 无限循环
            <number>： 指定对象动画的具体循环次数
        [ animation-direction ]： 检索或设置对象动画在循环中是否反向运动
            normal： 正常方向
            alternate： 正常与反向交替
         .one {
            animation:animations 2s ease-out;
        }
        @-webkit-keyframes animations{
            0%{-webkit-transform:translate(0);opacity:0;}
            50%{-webkit-transform:translate(30px);opacity:1;}
            70%{-webkit-transform:translate(35px);opacity:1;}
            100%{-webkit-transform:translate(60px);opacity:0;}
        }
7.媒体查询
    7.1 media
         1.页面小于960px时的写法
            @media screen and (max-width:960px){
                body{
                    background:red;
                }
            }
         2.页面等于960px时的写法
             @media screen and (max-device-width:960px){
                body{
                    background:blue;
                }
            }
         3.页面大于960px时的写法
            @media screen and (min-width:960px){
                body{
                    background:green;
                }
            }
         4.页面大于960px小于1200px的写法
             @media screen and (min-width:960px) and (max-width:1200px){
                body{
                    background:yellow;
                }
            }
         5. media 所有参数的解释
            width:浏览器可视宽度。
            height:浏览器可视高度。
            device-width:设备屏幕的宽度。
            device-height:设备屏幕的高度。
            orientation:检测设备目前处于横向还是纵向状态。
            orientation:检测设备目前处于横向还是纵向状态。
            device-aspect-ratio:检测设备的宽度和高度的比例。
            color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
            color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
            monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
            resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
            grid：检测输出的设备是网格的还是位图设备。
        6.响应式设计的核心CSS技术Media(媒体查询器)的用法
            1.使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
                width = device-width：宽度等于当前设备的宽度
                initial-scale：初始的缩放比例（默认设置为1.0）  
                minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）    
                maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   
                user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
             2.IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
                 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
                  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
             3.设置IE渲染方式默认为最高
                 下面这段代码来让IE的文档模式永远都是最新的：
                <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
                这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。
8.函数计算
    8.1 counter() 是一个函数，主要配合content一起使用，使用counter()来调用定义好的计数器标识符。
        如：
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>           li{list-style:none;counter-increment:antzone;}            li:before{content:counter(antzone)".";}
    8.2 attr() 和content一起使用
        attr(title),括号里是引用的属性，但经常引用自定义属性
        p:after{content:attr(title);}
    8.3 calc() 任何长度值都可以使用calc()函数进行计算,支持+，-，*，/，mod运算
        p{
            width:-moz-calc(100% - 50px);
            width:-webkit-calc(100% - 50px);
            width:calc(100% - 50px);
         }
9.伪对象选择符
    9.1 :first-letter 设置对象内的第一个字符的样式，作用于块级元素，常配合font-size和float使用得到首字下沉效果
        p:first-letter {font-size:30px;}
    9.2 :first-line 设置对象内的第一行，作用于块级元素
        p:first-line {color:#000;}
    9.3 :before 设置在对象前发生的内容,和content一起使用
        p:before {content:"";}
    9.4 :after 设置在对象前发生的内容,和content一起使用
        p:after {content:"";}
    9.5 :selection 设置样式被选择时的样式
        p:-moz-selection{color:red;}
        p:selection {color:red;}
10.长度单位 px em rem
    px:px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
    em:em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
       任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
       在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
       1. em的值并不是固定的；
       2. em会继承父级元素的字体大小。
    rem:使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
        p {font-size:14px; font-size:.875rem;}