zoukankan      html  css  js  c++  java
  • 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 元素的底部位置

      

    不忘初心,不负梦想
  • 相关阅读:
    《Python核心编程》第二版第209页第八章练习 续二 Python核心编程答案自己做的
    第三章.md
    沙箱逃逸.md
    setjmp.md
    HTML5 and JavaScript Projects
    递归裴波那契数列
    Smashing HTML5
    Sams.Teach.Yourself.CPP.in.One.Hour.a.Day.7th.Edition
    c++ 静态成员
    Getting Started with Metro Style Apps
  • 原文地址:https://www.cnblogs.com/panrui1994/p/8695955.html
Copyright © 2011-2022 走看看