CSS-样式篇

2文本：

　　1文本缩进：text-indent：理论上只有块级元素才可以设置(百分比是相对于父元素的宽度，负值的话要设置内边距进行抵消，防止超过浏览器边界)，行内元素可以通过内边距和外边距来达到同样的效果

　　2水平对齐：text-align 文字的对齐方式

　　3字间隔：word-spacing改变字之间的间距，

　　4文本修饰：text-decoration：underline 给元素添加下划线；overline 给元素添加上划线；line-through文本中间；blink文本闪烁；none去除下划线

　　5处理空白符：white-space告知浏览器如何处理当中的空白符

　　6文本方向：direction影响文本的书写方向，表中列布局的方向，内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置

　　7color：文字颜色，line-height：设置行高，

　　8text-shadow：文本阴影(指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色)

　　9box-shadow：盒子阴影(指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色)

　　10border-shadow：边框阴影(阴影的水平距离，阴影的垂直距离，阴影的模糊程度)

　　11text-overflow：文本内容超过盒子的宽度，ellipsis被裁减出现三个点；clip出现裁减(难看)

　　12word-wrap：长文本换行，主要指的单词 ；word-break：规定非中日韩文本的换行规则；text-wrap：定义文本换行

3字体

　　1font-family：定义文本的字体系列  就是黑体，楷体等

　　2font-style：字体的风格 正常显示，还是倾斜

　　3font-weight：字体加粗 100-900九个登记

　　4font-size：字体大小

4表格

　　1border：边框属性

　　2border-collapse：表格显示为单线条边框

　　3border-spacing：设置单元格之间的间距，就是单个的td不再是靠在一起

5框模型

　　1内外边距的百分比是相对于其父元素的width进行设置的，

　　2边框与背景：元素的边框在背景之上

　　3边框样式：border-style，其实就是实线，虚线，点线，双线等；

　　4边框的厚度：border-width，前提是你设置了边框的样式，如果边框都不存在，怎么会有厚度呢。

　　5边框的颜色：border-color，圆角边框：border-radius，边框图片：border-image(图片的位置，图像边界内向偏移，图像边界的宽度，边框外部绘制 border-image-area 的量，是否平铺)

　　6透明边框：border-color：transparent

　　7外边距合并：当两个外边距相遇，会发现重合，高度等于较大的哪一个。当一个元素包裹在另一个元素里面，如果不设置边框和内边距，也会发生重合

6定位：定义元素框相对于其正常出现的位置

　　1一切皆为框：块级元素显示为一个内容，即边框；行内元素内容显示在行中，通过display可以设置。

　　2在块级元素开头定义文本，会生成一个无名框。

　　3定位机制：普通流，浮动，绝对定位；

　　　　3.1：position-static静态定位；relative相对定位，相对于他以前的位置，但是它还会保持文档流中的位置；absolute相对定位，脱离文档流，相对于父级元素已经定位来说，不管原来是什么框，元素定位以后都会生成一个块级框；fixed固定定位，相当于absolute，只不过父级元素是窗口本身。

　　　　3.2 overflow：定义当元素内容超过元素框发生的事情--visible内容不会修剪，呈现在元素框之外；hidden内容会被修剪，超过的内容看不见；scroll内容会被修剪，超出的内容会通过滚动条的形式出现；auto如果内容被修剪，则出现滚动条，不修剪就不会出现；

　　　　3.3z-index设置元素的堆叠顺序，并且只能在定位的元素上面生效。

7渐变：可以让你在两个或多个指定的颜色之间显示平稳的过渡

　　1线性渐变：linear-gradient(参数一：可以指定渐变的方向，甚至可以是角度(颜色从定义的角度依次出现后面定义的颜色)；后面的参数就是多个颜色)，为了添加透明度，我们使用 rgba() 函数来定义颜色结点 

　　2径向渐变：radial-gradient(center, shape size, start-color, ..., last-color)渐变的位置，渐变的形状，渐变的大小(有四个值)，依次出现的颜色 不同的颜色后面可以携带百分比，表示颜色不均匀分布。

82D转换 无在乎移动，旋转，缩放，倾斜 在设置元素的基点位置

　　1translate()：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动，相对于以前的位置； 移动

　　2rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转，围着中心点旋转 旋转

　　3scale()：该元素增加或减少的大小，scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度 并且边框也会跟随改变，这方法有啥用？缩放

　　4skew(skewX,skewY)； 倾斜

　　5matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能

　　6转换属性：transform ：值为上面的几个方法，然后上面几个方法也有自己的参数。

　　7转换属性：transform-origin：设置旋转元素的基点位置    使用此属性必须先使用 transform 属性

93D转换 

　　1rotateX() rotateZ() rotateY()：围绕其在一个给定度数X轴，Z轴，Y轴旋转的元素 rotate3d(x,y,z,angle)        

　　2scaleX scaleY scaleZ ：定义 3D 缩放转换，通过给定一个 X轴，Z轴，Y轴的值  scale3d(x,y,z,angle)   

　　3translateX translateY translateZ ：定义 3D 转化，仅使用用于 X 轴的值  translate3d

　　4perspective(n) ：定义 3D 转换元素的透视视图

　　5matrix3d：定义 3D 转换，使用 16 个值的 4x4 矩阵

　　6转换属性：transform ：向元素应用2D或者3D转换；transform-origin ：定义元素的基点；transform-style：规定被嵌套元素如何在 3D 空间中显示；perspective：规定 3D 元素的透视效果；perspective-origin：规定 3D 元素的底部位置

　　

转载于:https://www.cnblogs.com/panrui1994/p/8695955.html