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 元素的底部位置

  

posted @ 2018-04-02 23:44  初心不负  阅读(178)  评论(0编辑  收藏  举报