css3新增属性

_多行不e必自闭
456 阅读5分钟

  1. 伪元素选择器（只记了比较重要的）

    • before和after

      在元素内部的开始位置和结束位置创建一个行级元素，且必须要结合content属性使用

    伪类与伪元素区别：伪类是用于选择DOM树之外的信息（实际上定义了的），或是不能用简单选择器进行表示的信息，包含那些匹配指定状态的元素(:hover和:active),也包含那些满足一定逻辑条件的DOM树中的元素(:target)。

    而伪元素是dom树没有定义的虚拟内容，它选择的是元素的指定内容比如::before表示选择元素内容的之前内容；::selection表示选择元素被选中的内容。

  2. 文本、字体

    • text-shadow 文本阴影
    • text-overflow 超出文本显示省略号

  3. 颜色

    • rgba: rgb为颜色值，a为透明度(用rgba的好处是当父元素设置透明的时候，子元素不会跟着一块变透明)
    div{
            background: #f00;
            opacity: 0.6;/* 如果这样设置透明度的话，div里面的子元素文字也会跟着透明*/
        }

  4. 边框

    • border-radius 圆角

    • box-shadow 边框阴影，和文本阴影类似

      第一个参数，水平偏移量，正值就往右，负值就往左 第二个参数，垂直偏移量，正值就往下，负值往上 第三个参数，阴影模糊程度，值越大字越模糊，值为0就是清晰 第四个参数，阴影外延值，值越大，就越往外延伸 第五个参数，阴影颜色

      第六个参数，阴影方向，默认是由里向外，inset表示由外向里

    • border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;

  5. 背景

    • background-image，可以为一个元素添加多张图片，最初添加的图片在最上层

    • background-size 调整背景图片的大小

    • background-origin 规定背景图片的定位区域

      background-origin: content-box / padding-box / border-box ;

    • background-clip 规定背景的绘制区域

      background-clip: content-box / padding-box / border-box ;

  6. 过渡

    transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
例如：
/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition：all,.5s

  7. 动画

    animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
例如：
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;

  8. transform

    transform:适用于2D或3D转换的元素 transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)

  9. 渐变

  10. Filter（滤镜）：相当于给图片加上美颜中的滤镜

  11. 弹性布局flex

    • 行级元素也可以使用弹性布局

    • 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

    • 属性：

      flex-direction:定义主轴的方向
flex-wrap:一条轴线排列不下时，是否换行，默认不换行
flex-flow:flex-direction和flex-wrap的简写形式，默认row nowarp
justify-content
align-items:默认值为拉伸stretch，另外baseline为项目的第一行文字的基线对齐
align-content:定义了多根主轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

    • 项目的属性（即弹性布局容器中的元素的属性）：

      order:定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow:定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。
flex-shrink:定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis:定义了在分配多余空间之前，项目占据的主轴空间,浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
align-self:许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性

.item {
  order: <integer>;
}

  12. 栅格布局grid

    • 当元素设置了网格布局，float、clear、vertical-align属性无效
    • 后来出了flexbox，解决了很多布局问题，但是它仅仅是一维布局，而不是复杂的二维布局
    • 使用Grid布局非常简单，你只需要给容器（container）定义：display:grid，并设置列（grid-template-columns）和 行（grid-template-rows）的大小，然后用grid-column和grid-row定义容器子元素（grid-item项目）的位置。这使得你非常容易通过媒体查询重新排列你的项目。想象一下，当你定义整个页面的布局时，你只需要几行CSS就可以完成页面重排以便适应各种屏幕宽度，这得有多么神奇！

  13. 多列布局：适用于新闻排版

  14. 重新定义盒模型box-sizing:根据box-sizing的值来规定盒子模型所包含的内容。例如box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！

  15. 媒体查询

avatar
文章
阅读
粉丝