css基础2

2016.12.8

1、相对单位

         px：屏幕分别率中最小的单位，与屏幕的分别率有关

         em：字体的高度，与字体有关

         ex：小写字母x的高度，与字体有关

2、盒子模型：

         border（width、color、style）、magin、padding

可以单独设置某个方向上的border、margin、padding

3、内容盒子（标准的css指的是：除了border、margin的内容）

         Height、width

         Line-hight：行间距

         Max-hight、min-height、max-width、min-width：设置最大最小的宽高、使用户的体验更好

4、overflow

         Hidden：超出部分隐藏

         Visible：可见

         Scroll：滚轮

         Auto：必要时会添加滚条

         Inherit：

5、链接link的伪类：

Link：设置链接的整体样式

         Hover:当鼠标移动到链接上的样式

         Visited：链接被访问过的样式

         Active:当链接被激活时的样式

6、background：

         Background-color：

         Background-image：

         Background-attachment：（fixed、scroll）

         Background-repeat：（repeat、repeat-x、repeat-y、no-repeat）

7、列表：

         List-style-type：列表的标记符号

         List-style-image：指定图片当做标记符号

         List-style-position：（outside、inside）

         Marker-offset：标记符号与文本的距离

8、表格

         Border-collapse：（collapse、separate）表格的两个单元格的边框接触时，是否压缩

         Border-spacing：边框的间距

         Caption-side：（top/bottom/left/right）标题的位置

         Empty-cells：（show、hide）当单元格的内容为空时是否显示边框

         Table-layout：（auto、fixed、inherit）设置表格单元的宽度

9、轮廓：

         参考boder，但是其不占用文档流空间，不会影响到元素的布局

         Outline-width：

         Outline-style：

         Outline-color：

10、伪元素：

         :focus：当一个元素获得焦点后

         :active：当一个元素被激活时

         :before、after：在一个元素前后加上内容

         例子：p:after{

         Content:”fff”}

11、display：

         Block：块级元素

         Inline：行级元素

         Inline-block：行内元素，但是可以设置高宽

         None：元素不可见，在文档流中不会占据任何空间

12、visibility

         Visible：

         Hidden：隐藏元素，但是还是占据着空间

13、@import

         用来模块化样式表，导入其他页面的样式表，必须出现在样式表的开始处

14、！important

设置优先级、用@import导入的样式的优先级小于本页的，所以用！important来使外部的样式起作用。

15、position

         Static：与正常流相同、默认

         Relative：相对于当前位置

         Absolute：相对于父类的位置

         Fixed：相对于浏览器的位置，且不随着滚轮滚动的发生变化

16、z-index

         当两个元素重叠时，默认是后来的元素位于先前的之上

17、float：

当float的元素没有设置大小时，它会默认占据整个服元素的宽度，会使流动的元素换行。

18、clear

         清除浮动

         Left/right/both/none（允许两侧有浮动元素）

19、css3选择器

         P[name^=”a”]：选择标签为p特性有name且name的值以字母a开头

         P[name$=”a”]：以a结尾

         P[name=*=”a”]：只要含有字母a

         :root：根选择器，为html元素

         P:nth-child(n)：任何p元素的父元素的第n个p元素

         P:nth-last-child(n)：倒数第n个

         P:nth-of-type(n):与p元素同级，第n个p元素

         P:nth-last-of-type(n):倒数

         P:last-child:父类元素的最后一个子元素为p

         P:first-of-type:任何同级的第一个p元素

         P:last-of-type:最后一个

         P:only-child：作为父元素的唯一子元素的p元素

         P:only-of-type:唯一的p兄弟元素，可以有其他类型的兄弟元素

         P:empty:任何没有子元素的p（包括文本子元素）

         Input:disabled:禁止使用的input标签

         Input:enabled:能够使用的input标签

         Input:checked:一个被选中的复选框

20、hsl(色调值、饱和度、亮度)

         色调值：介于0~300之间（例如0=红色、120=绿色、240=蓝色）

         饱和度：（0%为灰色、100%为全包和）

         亮度：（0%为黑色、50%为正常、100%为白色）

        

21、border-radius

         为使浏览器支持最大化，应该如下：

         -webkit-border-radius:12px;

         border-radius:12px

 

22、多列布局模块

         将一个元素的内容分为多个列

1、  使用column-count：n分块数

2、  使用column-width：n px分宽度

 

23、媒体查询

         例子：

         @mediasreen and(max-width:900px){

                   //css样式

}

解释：如果这是一个屏幕显示媒体，并且屏幕宽度不大于900像素，则应用该css样式

 

24、字体

 

25、2D变形

         Translate(x,y)：元素向上/下、左右移动，（不改变元素在文档流中的位置，以下相同）

         TranslateX(x)：元素左右移动

         translate(y)：元素上下移动

         rotate(ndeg)：旋转

         scale(n):缩放

         scaleX(n)：x缩放

         scaleY(n)：y轴缩放

 

26、3D变形

         使用了perspective()以及3D变形函数的3D变体