zoukankan      html  css  js  c++  java
  • css部分笔记

    css3{选择器;}有!Important作用最强

    加了!important;常见浏览器都通用;不能被覆盖

    元素选择器;

    关系选择器:

    多层级之间的控制:

    属性选择器;

    伪类选择器;

    @pega:网页打印.

    控制定位

    Not(取相反)

    伪对象选择器。

    二属性

    1{

    1前景颜色;颜色透明(opciti( rgba(四个值))  颜色控制(单词)(16进制)(rgb

    2字体(大小【相对长度em与绝对长度px 和百分比1】)(颜色)(字体 @font-face   字体图标)(字重)(斜体)

    }

    三布局:

    Display

    Float

    清除漂浮:clear 清除漂浮

    或者bfc 漂浮脱离文档流

    Position:定位

    position: fixed;

    固定定位

    position: inherit;

    继承父元素定位

    绝对定位不占位置

    Overflow,溢出

    盒模型:

    元素在页面占据位置

    Translate:转换

    none:

    无转换

    matrix(<number>,<number>,<number>,<number>,<number>,<number>):

    以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵

    translate(<length>[, <length>]):

    指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

    translateX(<length>):

    指定对象X轴(水平方向)的平移

    translateY(<length>):

    指定对象Y轴(垂直方向)的平移

    rotate(<angle>):

    指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义

    scale(<number>[, <number>]):

    指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

    scaleX(<number>):

    指定对象X轴的(水平方向)缩放

    scaleY(<number>):

    指定对象Y轴的(垂直方向)缩放

    skew(<angle> [, <angle>]):

    指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

    skewX(<angle>):

    指定对象X轴的(水平方向)扭曲

    skewY(<angle>):

    指定对象Y轴的(垂直方向)扭曲

    transform-origin[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

    默认值50% 50%,效果等同于center center

    适用于:所有块级元素及某些内联元素

    继承性:无

    取值:

    <percentage>

    用百分比指定坐标值。可以为负值。

    <length>

    用长度值指定坐标值。可以为负值。

    left:

    指定原点的横坐标为left

    center①:

    指定原点的横坐标为center

    right:

    指定原点的横坐标为right

    top:

    指定原点的纵坐标为top

    center②:

    指定原点的纵坐标为center

    bottom:

    指定原点的纵坐标为bottom

    边框图片影响内部内容

    居中效果:

    {

    过渡 Transition

    Transition

    复合属性。检索或设置对象变换时的过渡效果

    transition-property

    CSS3

    检索或设置对象中的参与过渡的属性

    transition-duration

    CSS3

    检索或设置对象过渡的持续时间

    transition-timing-function

    CSS3

    检索或设置对象中过渡的类型

    transition-delay

    CSS3

    } .

    动画 Animation

    Properties
    属性

    CSS Version
    版本

    Inherit From Parent
    继承性

    Description
    简介

    animation

    CSS3

    复合属性。检索或设置对象所应用的动画特效

    animation-name

    CSS3

    检索或设置对象所应用的动画名称

    animation-duration

    CSS3

    检索或设置对象动画的持续时间

    animation-timing-function

    CSS3

    检索或设置对象动画的过渡类型

    animation-delay

    CSS3

    检索或设置对象动画延迟的时间

    animation-iteration-count

    CSS3

    检索或设置对象动画的循环次数

    animation-direction

    CSS3

    检索或设置对象动画在循环中是否反向运动

    animation-play-state

    CSS3

    检索或设置对象动画的状态

    animation-fill-mode

    CSS3

    检索或设置对象动画时间之外的状态

    媒体查询:

    `屏幕`

    Media=” screen and (max- 600px)”

    @media

    取值:

    Hack

    浏览器:的兼容性。

    Less:stylesheet/less”  

    页面嵌套:多层级

  • 相关阅读:
    67. Add Binary
    66. Plus One
    64. Minimum Path Sum
    63. Unique Paths II
    How to skip all the wizard pages and go directly to the installation process?
    Inno Setup打包之先卸载再安装
    How to change the header background color of a QTableView
    Openstack object list 一次最多有一万个 object
    Openstack 的 Log 在 /var/log/syslog 里 【Ubuntu】
    Git 分支
  • 原文地址:https://www.cnblogs.com/gg123/p/7067305.html
Copyright © 2011-2022 走看看