css 基础知识 (待完善...)

CSS

 

1.position 属性

    对元素进行定位.

 

    absolute

        相对于 非static类型的position 的 第一个(临近的) 父元素 进行定位.

 

    relative

        相对于 正常文档流的位置进行定位. 可以简单理解为 相对于自己本身 进行偏移量定位.

        例如,"position:relative;left:20;" 会让该元素在left位置增加20px.

        

    fixed

        也是生成绝对定位元素.与absolute不同的是,它是相对于浏览器窗口 进行定位.

        todo : 所谓浏览器窗口 到底指代的 html标签 还是 body标签 ? 或者就是字面的'浏览器窗口'?

 

    static

        默认值.表示元素会出现在正常的文档流中的位置.

        该类型定位会让元素 忽略掉 top , left , right , bottom 以及 z-index 属性.

 

    inherit

        从 直接父级 继承position属性的值.

 

    补充:

        position的默认属性是static.不可继承的.

        css2开始支持position.

        当是absolute/fixed时,无论什么元素都会变成块级的.

        IE8及以下版本 均不支持 inherit值 .(todo , IE9 及以上 支持不?)

 

    JS语法: object.style.position = '';

 

 

2.display 属性

    规定了元素 应该生成的 框的类型.

 

    none

        此元素不会被显示.

 

    block

        元素显示为 块级元素. 元素的前后 都会带有换行符.

 

    inline

        默认值.元素显示为 内联元素. 元素前后 没有换行符.

 

    inline-block

        元素显示为 行内块元素.

 

    list-item

        元素会作为 列表 显示.

 

    run-in

        根据上下文 来决定 元素是以 块级/内联 方式显示.

 

    table

        元素显示为 块级表格(类似于<table>). 元素前后带有换行符.

 

    inline-table

        元素显示为 内联表格(类似于<table>). 元素前后 没有换行符.

 

    table-row-group

        元素显示为 一个/多个 行的分组(类似于<tbody>).

 

    table-header-group

        元素显示为 一个/多个 行的分组(类似于<thead>).

 

    table-footer-group

        元素显示为 一个/多个 行的分组(类似于<tfoot>).

 

    table-row

        元素显示为 一个 表格行(类似于<tr>).

 

    table-column-group

        元素显示为 一个/多个 列的分组(类似于<colgroup>).

 

    table-column

        元素显示为 一个 单元格列(类似于<col>).

 

    table-cell

        元素显示为 一个 表格单元格(类似于<td>或<th>).

 

    table-caption

        元素显示为 一个 表格标题(类似于<caption>).

 

    inherit

        规定从父级元素 继承 display属性.

 

 

    补充:

        IE7及以下 不支持 inline-table, inherit, run-in, 以及所有 table-* 属性.

        从css1开始支持display属性.

        display属性的默认值是inline.不可继承的.

 

    JS语法 : object.style.display = ''

 

 

 

3.background 属性

    设置元素的 背景属性.

 

    background-color

        规定要使用的背景色.

        该颜色为纯色,会覆盖 元素的内容,内边距,边框(直到边框的边界为止,即不包括外边距,但是包括边框本身的区域).

        因此,如果边框有部分是透明的(比如虚线边框),那么透明的地方会显示背景颜色.

 

        color_name

            代指颜色名称,如 'red'

 

        hex_number

            代指 十六进制的 颜色值, 如 '#ff0000'

 

        rgn_number

            代指 rgb类型的 颜色值, 如 'rgb(0,255,255)'

 

        transparent

            默认值.表示元素的背景色为透明的.

 

        inherit

            规定从父级继承的 background-color 属性的值.

 

        JS语法 : object.style.backgroundColor = 'rgb(0,255,255)';

 

 

    background-position

        规定背景图像的位置.

 

        该值有三种设置方式:(其中方式二 和方式三 可以混合使用)

 

        方式一 (如果只指定了一个 那么第二个值默认为center)

            top  left   或 top center    或 top right

            center left 或 center center 或 center right

            bottom left 或 bottom center 或 bottom right

 

        方式二 (如果仅指定了一个值 , 那么第二个值默认为 50%)

            x% y%   如: 0% 0%

 

        方式三 (如果仅指定了一个值 , 那么第二个值默认为 50%)

            xpos ypos  如: 0 0 , 单位可以是任何css单位 px em rem等

 

        JS语法 : object.style.backgroundPosition = '0% 10%';

 

 

    background-repeat

        规定 是否/如何 重复背景图像.(其实就是 设置哪种 平铺模式).

 

        repeat

            默认值. 图像在 水平以及垂直方向上重复.

 

        repeat-x

            图像在 水平方向上重复.

 

        repeat-y

            图像在 垂直方向上重复.

 

        no-repeat

            背景图像仅显示一次.

 

        inherit

            从父级元素上继承background-repeat 属性的值.

 

        JS语法 : object.style.backgroundRepeat = 'repeat-x'

 

 

 

    background-attachment

        规定背景图像是 固定的/随着页面其余部分滚动 .

 

        scroll

            默认值. 背景图像随着页面其余部分滚动.

 

        fixed

            背景图像是固定的,不会随着页面其余部分滚动.

 

        inherit

            从父级元素上继承background-attachment属性的值

 

        JS语法 : object.style.backgroundAttachment = 'fixed'

 

 

    background-image

        规定要使用的背景图像.

 

        url('URL')

            指向背景图片的路径.

 

        none

            默认值.不显示背景图像.

 

        inherit

            从父级元素上继承background-image属性的值.

 

        JS语法 : object.style.backgroundImage = 'url("../xxx/xx.jpg")'

 

 

    inherit

        从父级元素上继承background属性的值.

 

 

    background-size

        规定背景图像的尺寸.

 

        length

            设置背景图像的宽高.如果只设置一个值,则第二个值默认为'auto'.

 

        percentage

            百分比形式设置宽高.如果只设置一个值,则第二个值默认为'auto'.

 

        cover

            把背景图片扩展至足够大,使背景图像覆盖背景区域.

            背景图像的某些部分有可能无法显示在指定的背景定位区域内(说白了,就是背景图像可能只能局部显示,多余的部分已经超出背景区域的管辖了).

 

        contain

            把图像扩展至最大尺寸,以使得宽高完全适应内容区域.(智能填充有木有!)

 

        JS语法 : object.style.backgroundSize = '10px auto'

 

 

    background-origin

        规定背景图像的定位区域(即设置以盒模型的哪个部位来定位).

 

        padding-box

            默认值.以内边距来定位背景图片

 

        border-box

            以边框来定位背景图片.

 

        content-box

            以内容框来定位背景图片.

 

        JS语法 : object.style.backgroundOrigin = 'content-box'

 

 

    background-clip

        规定背景的绘制区域.(todo 看效果,网页提供的用例 没有明显效果)

 

        padding-box

            背景被裁剪到内边距框.

 

        border-box

            默认值.背景被裁剪到边框盒.

 

        content-box

            背景被裁剪到内容框.

 

        JS语法 : object.style.backgroundClip = 'padding-box'

 

 

    JS语法 : object.style.background = 'orange url("../xxx.jpg") repeat-y'

 

    补充:

        后三个属性是css3新出的.前者是css1的.

        IE8及以下版本均不支持一个元素多个背景图片.

        IE7及以下版本不支持inherit.IE8需要声明 !DOCTYPE .

        对于background属性本身,可以不指定某个/某几个值(即只设定部分值).

        推荐使用background属性 , 而不是以值 作为属性 分别设置:

            不但可以减少文字的键入 , 还可以保证老版本的浏览器 能有更好的兼容性.

 

    

 

        

4.@keyframes 规则 及 animation属性 (-webkit , -moz ,-o 前缀对 它们都适用)

 

    @keyframes 规定动画规则.

        语法:

            @keyframes animation_name {

                keyframes_selector_1 {

                    css_styles ;

                }

                keyframes_selector_2 {

                    css_styles ;

                }

            }

        其中,

            animation_name : 自定义的动画名称

            keyframes_selector_* : 动画时长百分比(0-100%).

            css_styles : 一个/多个 合法的css样式.

 

        样例:

            @keyframes mymove

            {

                0%   {top:0px; left:0px; background:red;}

                25%  {top:0px; left:100px; background:blue;}

                50%  {top:100px; left:100px; background:yellow;}

                75%  {top:100px; left:0px; background:green;}

                100% {top:0px; left:0px; background:red;}

            }

 

        补充:

            和@keyframes用法一样,兼容不同浏览器的规则如下:

                @-moz-keyframes mymove          /* Firefox */

                @-webkit-keyframes mymove       /* Safari 和 Chrome */

                @-o-keyframes mymove            /* Opera */

 

 

    animation

        动画属性的一个统称.它有六个更细颗粒的动画属性.

 

        animation-name

            绑定到@keyframes规则 上的动画名称.

 

            none    

                默认值.无动画效果.

 

            keyframes_name

                需要绑定到选择器上的keyframes名称.

 

            JS语法 : object.style.animationName = 'mymove'

        

 

        animation-duration

            动画的周期(即耗时).单位为 秒/毫秒. 只的是单次的耗时,和animation-count属性无关.

 

            time

                动画时长.

 

            JS语法 : object.style.animationDuration = '5s'

 

 

        animation-timing-function

            规定动画的速度曲线.

 

            ease

                默认值. 低速 -> 变快 -> 变慢

 

            linear

                匀速.

 

            ease-in

                低速开始.

 

            ease-out

                低速结束.

 

            ease-in-out

                低速开始和结束.

 

            cubic-bezier(n,n,n,n)

                设置速率曲线. n 是0~1之间的值.

 

            JS语法 : object.style.animationTimingFunction = 'linear'

 

 

        animation-delay

            动画开始前的延迟时间.

 

            time

                延迟时间.默认为0.

 

            JS语法 : object.style.animationDelay = '2s'

 

 

        animation-iteration-count

            动画的播放次数.

            

            n

                播放次数.

            

            infinite

                无限循环.

 

            JS语法 : object.style.animationIterationCount = 18 ;

 

 

        animation-direction

            是否轮流反向播放动画.

 

            normal

                默认值. 正常顺序播放.

 

            alternate

                反向播放动画.

 

            JS语法 : object.style.animationDirection = 'alternate'

 

 

    JS语法 : object.style.animation = 'mymove 5s infinite'

 

 

    补充:

        Internet Explorer 9 以及更早的版本不支持 animation 属性。

        Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

        Safari 和 Chrome 支持替代的 -webkit-animation 属性。

        animation-duration属性 一定要设定，否则时长为 0，就不会播放动画了

 

 

 

5.transition 属性

    元素过渡属性的统称.分为四个细颗粒度的过渡属性.

 

    transition-property

        过渡效果的css名称.(当指定的css属性的值改变了,过渡效果开始启动)

 

        none

            没有属性会获得过渡效果.

 

        all

            默认值.所有属性获得过渡效果.

 

        property

            定义 应用过渡效果的css属性名称列表. 列表以逗号","作为分隔符.

 

        JS语法 : object.style.transitionProperty = 'width,height';

 

 

    transition-duration

        完成过渡效果需要花费的时间.

 

        time

            默认值为0,意味着不会发生过渡效果.单位可以是秒或者毫秒.

 

        JS语法 : object.style.transitionDuration = '10s';

 

 

    transition-timing-function

        该函数定义了 过渡效果的 速度曲线.

        

        (具体值的意义 参考 animation-timing-function)

        linear , ease (默认值), ease-in , ease-out , ease-in-out , cubic-bezier(n,n,n,n)

 

        JS语法 : object.style.transitionTimingFunction = 'ease'

 

 

    transition-delay

        过渡效果 开始前的 延迟时间.单位为秒或毫秒.

 

        time

            延迟时间,默认为0s.

 

        JS语法 : object.style.transitionDelay = '3000 ms'

 

 

    补充:

        transition-duration属性 一定要设置,否则过渡时长为0,不会有过渡效果.

        过渡效果一般发生在 鼠标指针浮动到元素身上时候发生.

        Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

        Safari 支持替代的 -webkit-transition 属性。

        Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

    

 

6.transform 属性

    元素 在 2d/3d层面 的转换. 其中x,y,z皆为数值.

 

    none

        默认值. 不进行转换.

 

    matrix(n,n,n,n,n,n)

        2d转换. 使用六个值的矩阵. (md..矩阵咋算 ..)

 

    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

        3d转换. 使用十六个值的 4*4矩阵.

 

    translate(x,y)

        2d转换.

 

    translate3d(x,y,z)

        3d转换.

 

    translateX(x)

        x轴上的转换.

 

    translateY(y)

        y轴上的转换.

 

    translateZ(z)

        3d转换.z轴上的转换

 

    scale(x,y)

        2d缩放转换.

 

    scale3d(x,y,z)

        3d缩放转换.

 

    scaleX(x)

        x轴上的缩放转换.

 

    scaleY(y)

        y轴上的缩放转换.

 

    scaleZ(z)

        z轴上的3d缩放转换.

 

    rotate(angle)

        2d旋转. angle为旋转角度.

 

    rotate3d(x,y,z,angle)

        3d旋转.

 

    rotateX(x)

        绕x轴进行3d转换.

 

    rotateY(y)

        绕y轴进行3d转换.

 

    rotateZ(z)

        绕z轴进行3d转换.

 

    skew(x_angle,y_angle)

        x轴以及y轴进行倾斜转换.

 

    skewX(x)

        x轴进行倾斜转换.

 

    skewY(y)

        y轴进行倾斜转换.

 

    perspective(n)

        为3d转换元素定义透视视图(todo 什么鬼?没试出来..)

 

    JS语法 : object.style.transform="rotate(7deg)"

 

    补充:

        Internet Explorer 10、Firefox、Opera 支持 transform 属性。

        Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

        Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

        Opera 只支持 2D 转换。

 

 

 

7.伪类

    其实,它是css选择器的一部分.抽离出来记录下.

 

    :before

        在该元素前面插入内容

 

    :after  

        在该元素后面插入内容

 

    :link   

        选择所有未被访问过的链接

 

    :visited    

        选择所有已被访问过的链接

 

    :active

        选择活动链接/元素

 

    :hover

        鼠标悬停状态的元素

 

    :focus

        选择 获得了焦点的元素

 

    :first-letter

        选择该元素的首个字母.

 

    :first-line

        选择该元素的第一行

 

    :first-child

        选择 所有符合 属于父元素的第一个该类型的子元素

 

    :lang(language)

        选择 带有指定字符开头的lang属性值 的每个元素

 

    :first-of-type

        选择 所有符合 属于父元素的 第一个 该类型的子元素

 

    :last-of-type

        选择 所有符合 属于父元素的 最后一个 该类型的子元素

 

    :only-of-type

        选择 所有符合 '属于父元素的该类型 有且仅有一个该类型子元素' 的该类型元素.

 

    :only-child

        选择 所有符合 '属于父元素的  有且仅有 一个子元素' 的 该类型元素.

 

    :nth-child(n)

        选择 所有符合 属于父元素的 第n个 该类型的子元素

 

    :nth-last-child(n)

        选择 所有符合 属于父元素的 倒数第n个 该类型的子元素

 

    :nth-of-type(n)

        选择 所有符合 属于父元素的 第n个 该类型的子元素

 

    :nth-last-of-type(n)

        选择 所有符合 属于父元素的 倒数第n个 该类型的子元素

 

    :last-child

        选择 所有符合 属于父元素的 最后一个 该类型的子元素

 

    :root

        选择文档的根元素. (那么对于html来讲,应该就是html了)

 

    :empty

        选取所有 不含子元素的 元素

 

    :target

        选取当前活动的元素. 实际上 和 active 是不同的.(todo 查下不同点)

        (测试 能感受到 :

            target 针对的是 目标活动元素

                --该目标元素处于活动的原因可能是其他元素影响的,

                比如实现锚点定位 后 活动的不是锚点本身,而是 锚点所指向的目标元素 ,

            active针对的是 该元素本身是否活动)

 

    :enabled

        选取每个 处于启用状态的该元素

 

    :disabled

        选取所有 处于禁用状态的该元素

 

    :checked

        匹配所有 处于勾选状态的该元素

 

    :not(selector)

        匹配所有 除了指定类型元素 的元素

 

    ::selection

        选择被用户选取的元素部分

 

 

 

8.content 属性 (todo css文档和html文档中 该属性的值不一样 mmp ...)

    配合 :before 或 :after 使用. 来插入生成内容.

 

    string

        文本内容

 

    url

        资源存储位置,文本内容就是该资源.

 

    attr(X)

        该元素 某个指定属性的值 作为伪类元素所修饰的元素的插入内容.

 

    open-quote

        双引号 中 前面(即第一个)引号

 

    close-quote

        双引号 中 后面(即第二个)引号

 

    no-open-quote (不知道是什么鬼)

    no-close-quote (不知道是什么鬼)

 

    counter(..args)

    counter-increment

    counter-reset

        用法详见 http://www.w3school.com.cn/tiy/t.asp?f=csse_gen_counter-reset

 

    JS语法 : object.style.content = 'url(deep.wave)'

 

 

 

9.定位属性

 

 

 

 

 

 

 

10.文本属性

    color

        文本颜色

 

    direction

        文本书写方向

 

    letter-spacing

 

 

    line-height

 

 

    text-align

 

 

    text-decoration

 

 

    text-indent

 

 

    text-shadow

 

 

    text-transform

 

 

    white-space

 

 

    word-spacing

 

 

    text-justify

 

 

    text-outline

 

 

    text-overflow

 

 

    text-wrap

 

 

    word-break

 

 

    word-wrap

 

 

 

    unicode-bidi

 

 

 

 

 

 

11. 字体

 

 

 

 

.清除浮动

 

 

 

 

 

 

.垂直居中

 

 

 

 

 

 

 

.css单位

    css单位有两种 : 尺寸单位 和 颜色单位.

 

    尺寸单位:

        px

            一个像素点的大小.

 

        em

            (todo .. 重点补充)

 

        %

            百分比

 

        以及 in,cm,mm,ex,pc,pt .

 

 

    颜色单位:

        rgb(x,x,x)

            rgb值.

 

        rgb(x%,x%,x%)

            rgb百分比值.

 

        #rrggbb

            十六进制 值.

 

        实际上 还有很多比如

            rgba , 相比rgb增加了一个透明度选项.rgba(r,g,b,alpha)

            hsl(色调,饱和度,亮度), hsla(色调,饱和度,亮度,透明度). 其中色调0~360,饱和度和亮度为百分比,透明度为0~1.

 

 

.flex -- 手机

 

 

 

 

 

 

.calc , vh