CSS3学习

选择器

属性选择器

[att*=val]   *包含[att^=val]  ^开头字符[att$=val]   $结尾   (注意‘\’转义字符)

灵活运用属性选择器，例如在超链接地址的末尾为“/”,htm,html的时候显示web网页文字，在超链接地址的末尾位jpg,jpeg的时候显示“jpeg”图像文件文字

常用的伪类选择器是使用在a元素上的几种选择器

所谓的伪类选择器，是指并不是针对真正元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，使用方法：选择器：伪元素{属性：值}

css中主要的四个伪元素选择器：first-line first-letter before(在某个元素之前插入一些内容)after

结构性伪类选择器 root  not empty target

 如果使用了root，body只给内容添加CSS样式

 如果没用root，body样式作用于body整个区域

before{

content:

}

content属性中通过attr(属性名)这种形式来指定attr属性值，可以将某个属性的属性值显示出来，例如页面上img元素显示一个图像文件，attr属性的作用是用来指定当图像不能正常显示所替代的文字

content属性，不仅可以追加数字编号还可以追加字母

h1:before{content:counter(mycounter);}  //可以实现对标题追加连续编号

h1{counter-increment:mycounter}

h1{counter-increment:mycounter;counter-reset:subcounter;}//编号嵌套

target可以用于a标签跳转本页区域的样式的改变

选择器：first-child, last-child ,nth-child() ,nth-last-child ()   ()里面可以使表达式或者odd，even

但是nth-child 选择器在计算子元素是第奇数个元素还是第偶数个元素的时候是连同父元素中所有的子元素一起计算的（标签元素相互交错时就不好用）

因此出现了nth-of-type,nth-last-of type来解决

only-child 当某个父元素中只有一个子元素时才使用的样式

UI元素状态伪类选择器 E:havor     E:active   E:focus  E: enable E:disable ......

通用兄弟选择器<子元素>-<子元素之后的同级兄弟元素>{/////}

2D转换方法

translate()移动 rotate()旋转 scale()缩放 skew() 倾斜matrix() 

3D转换方法

rotateX()  rotateY()

举例

transform:translate(200px,100px)；-webkit-transform:translate(200px,100px);//safari chome-ms-transform:translate(200px,100px);//IE 360浏览器使用IE内核-o-transform:translate(200px,100px);//opera-moz-transfoem:translate(200px,100px);//firefox

transform后面可以加多种变形，用空格隔开

transform-origin 修改变形的基准点

transition 过渡动画

transition-property 过渡名称

transition-duration 过渡效果花费的时间

transition-timing-function 过渡效果的时间曲线

transform-delay 过渡效果延迟开始时间

animation 动画

transition功能实现动画的缺点是只能指定属性的开始值，终点值，然后在这两个属性值之间实现平滑过度，不能实现更复杂的动画

animation实现动画效果，允许通过关键帧的指定来实现复杂动画

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

阴影

text-shadow:length横 length纵 length模糊 color

box-shadow:length横 length纵 length模糊 color

阴影可以指定多个

服务器端字体

@font-face{

font-family:webfont;

src:url("...ttf/otf")format("truetype")

font-weight:normal;

}

div{

font-family:webfont;

}

先找客户端字体如果找不到用服务器端字体

@font-face{

font-family:myarial;

src:local("arialll"),url("...otf");

}

div{

font-family:myarial;

}

font-size-adjust属性可以实现因字体不同导致大小不同而进行调整

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

display:inline-block

  给inline元素附上盒子模型

  盒属于block类型，但是在显示时它具有inline类型盒特点（可用于分列显示）

display:inline-table

  可以使文字处于table左右两侧

div{

display:list-item

list-style-type:circle;

} //可以使块元素前拥有像li的小点

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

盒子模型：

box-sizing:border-box;//当前的宽度，高度，填充物包含在盒子中

box-sizing:content-box;//当前的宽度，高度，填充物不包含在盒子中

背景与边框相关样式：

  指定背景的显示范围

background-clip:border-box;//包含边框和外边距

background-clip:padding-box;//不包含边框包含外边距

background-clip:content-box;//都不包含

background-origin属性指定背景图从哪里开始绘制

  设置多个背景图片

background-image:url(),url();

background-repeat:repeat-x,no repeat;

background-position:100% 100% center center;

当div区域中的文字高度处于不断变化的状态时，使用css2样式表添加边框图像的操作相对而言比较麻烦，

在css3中考虑到该情况，添加了允许边框图像自动拉伸的属性border-image

九宫格，背景图某块被拉伸

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

多列:对文本或区域进行布局(瀑布流)

column-count/column-gap/column-rule

盒子模型与多栏布局的区别：使用多栏布局时各栏宽度必须相等，在指定的每栏宽度时，也只能为所有栏指定一个统一的高度，栏与栏之间的宽度不可能不一样，另外使用多栏布局时也不能具体指定什么栏中显示什么内容，因此适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页结构

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

ie老版本兼容css3和html5

1.可以下载html5.js

2.在css中加behavior:url(ie-css3.htc)

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

弹性盒子模型

flex-direction:row|row-reverse|column|column-reverse 设置主轴方向，确定弹性子元素排列方式

flex-wrap:当弹性子元素超出弹性容器范围是否换行

flex-flow：flex-direction和flex-wrap属性的快捷方式，复合属性

justify-content：主轴上的对齐方式

align-items：侧轴上的对齐方式

align-content：侧轴上有空白时，侧轴对齐方式

设置容器display：flex可以激活弹性属性

网站 codepen.io实现兼容性问题初步处理

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

响应式图片

常见的实现方式：

用srcset和sizes加载不同图片

用picture，source标签media加载不同的图片

用source type指定多种格式

polyfill-picturefill(js)兼容浏览器

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

杂

指定背景的尺寸 background-size

border-radius时border:none 可以用

quotes属性来指定使用什么嵌套文字符号（在符号串两边添加嵌套文字符号）

display run-in类型与compact类型

如果元素后面还有block类型的元素，run-in类型的元素被包含在block类型的元素内部，而compact是在左边

resize允许用户拖动的方式修改元素尺寸（overflow好用）

initial 属性值取消对元素的样式指定

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

颜色rgba() hsl() hsla()

alpha 可单独针对元素背景色和文字颜色等来指定透明度

opacity  只能指定整个元素的透明度

outline 用来在元素周围绘制一条轮廓线 outline-offset