CSS学习笔记2

一个区块元素所占的空间总大小

    x轴：margin-left+border-left+padding-left+width+padding-right+border-ringht+margin-right

    y轴：margin-top+border-top+padding-top+height+padding-bottom+bprder-bottom+margin-bottom

    1.两个相邻元素若都指定了间距，那么间距会进行合并，合并后的值是二者指定的间距中的最大值。

    2.outline、bos-shadow不会占用页面空间，故也不计入盒子模型的计算

    3.float会对间距的合并产生影响

    4.区块若想在父元素中居中，margin: 0 auto; 由浏览器自动计算左右间距——平均分配

    5.为了屏蔽浏览器默认值造成的兼容性问题，页面布局时可以添加  *{margin:0;  padding:0;}

区块元素:竖直方向上排布，相邻元素的margin会合并，padding各自独立。

内联元素：水平方向上排布，一行不够自动排布到下一行。

    margin：水平方向上各自独立，不可并；竖直方向上无效。

    padding：水平方向上各自独立；竖直方向上有效但不占用页面空间（即上下两行的padding可能会重叠）

 margin xmargin ypadding xpadding yblock 不浮动占空间占空间，会合并占空间占空间block 浮动占空间、不合并占空间，不合并占空间占空间inline占空间，不合并无效占空间有效，不占空间（重叠）

元素的定位

1.流/静态定位：默认 / position:static    不能指定位置

2.浮动定位：float:left/right    不能严格指定位置

3.相对定位：position:relative   使用left/top/right/bottom进行定位，仍占用页面空间，以“其自己的静态定位点”为定位原点。

4.绝对定位：position:absolute   使用left/top/right/bottom进行定位，不占用页面空间；以“最近的已定位的祖先元素的padding起点”为定位原点，且随着页面内容的滚动而滚动。

5.固定定位：position:fixed   使用left/top/right/bottom进行定位，不占用页面空间；以“body”为定位原点，且不随着页面的内容的滚动而滚动。

属性名含义可取值版本/兼容性padding-left/right/top/bottom   padding内间距，上右下左的顺序10px；
10px 30px；
10px 30px 50px；
10px 30px 50px 70px； margin-left/right/top/bottom   margin上右下左的顺序  background-color设置元素背景颜色，如果边框是透明色，会通过透明色显现出背景色来  background-image背景图片,凡是使用背景图片的地方都可以用渐变url(xxx.jpg/png)
linear-gradient:线性渐变
radial-gradient：径向渐变
repeating-radial-gradient：重复线性渐变
repeaing-radial-gradient：重复径向渐变 background-repeat repeat：在垂直方向和水平方向重复，为默认值
repeat-x：仅在水平方向重复
repeat-y：仅在垂直方向重复
no-repeat：不平铺，只显示一次 background-position设置背景图片的位置left right bottom top center 
20px(x，水平) 20px（y，垂直） background-attachment背景滚动方式scroll：背景随内容滚动
fixed：背景固定不动 background-clip背景绘制区域border-box:背景被裁减到边框盒，为默认值
padding-box：背景被裁减到页边距框
content-box：背景被裁减到内容框 background-origin规定背景图片的定位区域  background在一个声明中设置所有的背景属性color url（图像url）repeat attachment position,如果不设置某个值，将使用默认值body{
    background:#fff url("11.jpg" repeat fixed center)
}

复杂选择器

提示：使用JQuery可以减少页面中Id和class的出现频率，使用JQuery可以兼容所有下述复杂选择器

复杂选择器示例含义版本/兼容性选1  选2div ul{...}子代选择器1选1>选2div >ul{...}直接子代选择器 选1+选2div+span{...}相邻兄弟选择器：选择紧挨的下一个兄弟元素（选中0/1个）2/ie6+选1~选2div~span{...}通用兄弟选择器；匹配选择器1的兄弟元素中匹配选择器2的元素3
注意：div后的span兄弟元素才会选定[属性名][href]{}选择具有指定html属性的元素2[属性名=属性值][type="text"]匹配具有指定属性且属性值为指定值2[属性名~=属性值][class~=strong]匹配具有指定的属性且属性值中包含指定的完整单词（不是单词不行）3[属性名*=属性值][class*=str]匹配具有指定的属性且属性值中包含指定的字母组合（不必是完整的单词）3[属性名^=属性值][class^=str]匹配具有指定的属性且属性值以指定的字母开头3[属性名$=属性值][class$=str]匹配具有指定的属性且属性值以指定的字母结尾3[属性名|=属性值][class|=miant]匹配具有指定的属性且属性值以指定的单词开头（要么只有它，要么其后有减号-）3:target:target
div:target{...}目标伪类选择器；选定[当前锚点的]目标元素IE8不兼容:enabled:enabled[{...}匹配当前启用的表单元素 :disabled:disabled{...}匹配当前禁用的表单元素 :checked:checked{...}匹配当前选定的表单元素 :first-childspan:first-child{}
div:first-child{}匹配父元素中的第一个子元素（必须是标签，纯文本不算） :last-childp:last-child匹配作为父元素中最后一个子元素出现的元素 :only-childp:only-child匹配作为父元素中唯一子元素出现的元素 :emptydiv:empty{displa:none}匹配没有子元素的元素且没有任何文本内容的元素 :not 否定选择器；匹配不被选择器1选定的元素 ::selection 匹配一段文字中选择的部分 说明：     :xxx伪类选择器     ::伪元素选择器2016/8/11 14:03:51

通用兄弟选择器

通用兄弟选择器匹配某元素后面的所有兄弟元素

    使用符号（~）作为结合符，即element1~element2

    两种元素必须拥有相同的父元素，但是element2不必直接紧随element1

相邻兄弟选择器

相邻兄弟选择器匹配指定元素的相邻兄弟元素

    如果需要连接紧接在另一个元素后的元素，而且两者有相同的父元素，可以使用相邻兄弟元素

    使用加号（+）作为结合符

属性选择器

属性选择器能够将元素附带的属性用于选择器中，从而对带有指定属性的元素设置样式

[title]{

    colore:red;

}

    选择带有tiitle属性的所有元素

目标伪类

    ：target，突出显示活动的html锚，用于选取当前活动的目标元素 

    语法为   E:target   选择匹配E的所有元素，且匹配元素被url指向

元素状态伪类

    :enabled,匹配每个已启用的元素（大多用在表单元素上）

    :disabled,匹配每个被禁用的元素（大多用在表单元素上）

    :checked,匹配每个已被选中input元素（只用于单选按钮和复选框）

2016/8/11 21:55:28

否定伪类

    :not(selector),匹配非指定元素/选择器的每个元素

内容生成选择器

    xhtml规定：页面内容交给标签来处理;页面表现交给css来处理，但css3有些“内容生成”选择器不单单可以呈现样式，还可以向页面中添加内容。

    选择器1:before{

        content:"纯文本/图像/计数器"

}

 选择器1:after{

        content:"纯文本/图像/计数器"

}

content必须配合:brfore/:after选择器来使用

计数器的使用：

    body{

        counter-reset:计数器名  初始值  [计数器2名  初始值]...;

}

    p;before{

        content:'《'counter(计数器名)‘》’;

        counter-increment: 计数器名 （步增值）；

}

与内容多列显示的css样式

    column-count:竖直方向上列的数量

    column-gap:内容列与列间距

    column-style:集合属性  width style color

    注意浏览器的兼容性：

        IE11直接使用上述属性

        Firefox 添加-moz-前缀

        Chrome/Safari/Opera 添加-webkit-前缀

1.变形/转换相关的CSS属性

    transform: none/2d-3d-func；

    transform:func1()  func()2  func3();

    transform-origin:left/center/right  top/center/bottom;  指定变形的原点

    注意：所有的变形效果都不会释放或改变原始占用的空间！——与相对定位有点类似。注意Safari的兼容性问题。

        （1）常见的2D变形函数：

                translate(x)/translate(x,y)  位移函数

                translateX(x)/translateY(y)

                scale(x)/scale(x,y)  缩放函数，参数是一个表示百分比的小数，如1表100%、0.5表50%、2表200%

                scaleX(x)/scaleY(y)

                rotate(deg)  旋转变形   参数是个角度值

                skew(x)/skew(x,y)  倾斜，参数是角度值

                skewX(x)/skewY(y)

        （2）常见的3D变形函数：

                rotateX(deg)/rotateY(deg)/rotateZ(deg)

                translateZ()  Z轴位移

                scaleZ()

2016/8/13 18:05:02

什么是过渡

        使得CSS的属性值在一段时间内平滑的过渡

            比如，鼠标悬停后，背景色在1s之内，由白色平滑的过渡为红色

            指定4个要素

        1.制定过渡属性，如background、color等  transition-property:transform;

        2.指定过渡所需时间   transition-duration:1500ms;

        3.指定过渡函数，即过渡的速度、方式等  transition-timing-function:ease-in-out;

        4.指定过渡延迟时间，表示开始执行的时间  transition-delay:0;

触发过渡——通过用户的行为触发， 如点击、悬浮等

2.过渡效果

    ①transition-property:none   |   all   |  p1p2;  针对属性

    ②transition-duration:100ms  |  3s; 持续时间

    ③transition-timing-function:linear（相同速度开始至结束的过渡效果） | ease（慢速开始，然后变快，然后慢速结束的过渡效果） | ease-in（以慢速开始的过渡效果） | ease-out（以慢速结束的过渡效果）| ease-in-out（以慢速开始和结束的过渡效果）

    ④transition-delay:100ms |3s;延迟时间

    ⑤transition：property   duration  timing-function   delay;

2016/8/12 10:46:44

3.动画

补间动画：只需要指定动画变化过程中的“关键帧”，两个关键帧中间的过渡帧由系统来自动填充若干个补间帧。

    animation属性可以制作类似flash动画

    通过关键帧控制动画的每一步

<style>/*定义一个关键帧集合*/

    @keyframe myAnim1{

        from{/*起始关键帧*/}

        40%{/*一个关键帧*/}

        to{/*结束关键帧*/}

    }

    div{

    animation:myAnim1 3s;

    }

</style>

动画示例

1.声明动画

    创建一个已命名的动画

    使用@keyfremes声明动画的关键帧

2.为元素调用动画

    对元素使用animation属性调用动画

    设置动画的播放时间、播放次数等

@keyframes的语法

        @keyframes name{

        from|0%{

            CSS样式

        }

        percent{

            CSS样式

        }

        to|100%{

            CSS样式

        }

}

与动画调用相关的CSS属性

    animation-name:  动画的名称，即某个@keyframes后声明的动画名。

    animation-duration:  动画的持续时间

    animation-tinming-function:  动画播放速度函数  linear / ease-in / ease-out / ease-in-out

    animation-delay:  播放的延迟时间

    animation-iteration-count: 动画播放次数，如 1,3,10，infinite（无限循环）

    animation-direction: 动画播放方向   normal（第二次播放时从第一帧重新开始）；alternate(第偶数次播放时从最后一帧开始播放)

    animation：集合属性，按顺序指定  name   duration  timing-function  delay  count  direction

    animation-fill-mode

            backwards:动画尚未开始时即处于第一帧的状态

            forwards:动画完后保持最后一帧的状态

            both：上述二者的效果都要

    animation-play-state属性

        规定动画正在运行还是暂停，常用于结合JavaScript代码使用，实现在播放过程中暂停动画

                paused：动画暂停

                running：动画播放

说明：过渡（transform）可以看做一种特殊的动画（animation）——只有开始和结束两个关键帧

4.CSS Hack

        由于浏览器对于CSS属性有不同的理解或支持程度不同，为了屏蔽这种浏览器方面的不同实现统一的显示效果，或者专门利用这样的不同的线上效果，可以在编写CSS时，针对特定的浏览器或者特定的版本给以特别的代码。

    css Hack的实现方式：

1.IE条件语句：只在IE9有效

    <!--[if IE]>小于ie10的浏览器会看到此句<![endif]-->

    <!--[if IE 6]>只有ie6浏览器会看到此句<![endif]-->

    <!--[if lt IE8]>小于ie8的浏览器会看到此句<![endif]-->

    <!--[if lte IE8]>小于ie8的浏览器会看到此句<![endif]-->

        上述语句

2.选择器前缀

    <style>

        .content{}   所有浏览器都能理解的选择器

        *html  .content{}     只有ie6能理解的选择器

        *+html  .content{}   只有ie7能理解的选择器

    </style>

3.属性前缀

       <style>

        .content{

            -webkit-animation: anim1 3s;

            -moz-animation:anim1 3s;

            -o-animation:anim1  3s;

            background:red;   /*所有的浏览器都能识别*/

            *background:green;  /*ie6/ie7能识别*/

            -background：blue；    /*ie6/ie7能识别*/

            +background:yellow;   /*ie能识别*/

            bakground:yellow\9\0;    /*ie9+能识别*/

            background:pink !important;  /*ie6无法识别*/

        }

</style>

5.页面访问速度优化

        0.硬件/网络优化

        1.数据库优化

        2.服务器优化

        3.前端优化

css优化方案

    优化原则：尽量减少http请求数量；尽可能减少每次请求的数据大小

    优化方法：

    ①css Sprites：背景图滑动门，把很多的小背景图拼接为一副大图——百度“css Sorites在线”可以找到很多这样的工具

    ②把css放到页面顶部，多用<link href="x.css"/>代替@import url(x.css)

    ③避免使用CSS表达式    

    ④避免空的src和href

    ⑤巧用浏览器缓存，将CSS尽可能少的放在html外部、

    ⑥首页中尽量不用外部CSS

    ⑦不要在html中缩放图像

    ⑧对javaScript文件和css文件进行压缩，可使用类似YUI Compressor等工具