美文网首页
css样式 复习笔记

css样式 复习笔记

作者: weil107 | 来源:发表于2019-11-18 15:24 被阅读0次
    -webkit-line-clamp + overflow 显示对应行数的内容
    all 将除却unicode-bidi和direction之外的所有属性重置至其初始值
    
    animation:
    animation-name none 动画名称
    animation-duration 0s 动画是否反向播放
    animation-timing-function ease 动画速度方法
    animation-delay 0s 动画执行前的时间长度 负值表示会从样式的第N秒立即开始
    animation-iteration-count 1 动画迭代次数【重复次数】
    animation-fill-mode none 设置动画执行前执行后的样式
    animation-play-state running 动画播放状态
    
    background
    background-attachment 设置背景图片固定或者区块滚动而滚动
    background-clip 设置元素的背景是否延伸到边框下 【border-box | padding-box | content-box 】
    
    block-size 块级元素
    box-shadow 阴影
    box-sizing css盒子模型
    break-before 生成盒模型之前
    
    caret-color 插入光标的颜色
    clip-path 创建一个只有元素的部分区域可以显示的剪切区域,区域内的部分显示,区域外的部分隐藏
    cursor 光标属性
    
    display 元素的现实类型分为外部显示类型及内部显示类型
    
    empty-cells 定义如何渲染客户端的表格
    
    flex-direction 指定内部元素是如何在flex容器中布局的,定义了主轴的方向
    flex-flow 是flex-direction和flex-wrap的简写
    flex-grow 定义弹性盒子的拉伸因子
    flex-shrink 定义了flex元素的收缩规则
    flex-wrap 定义了flex是单行显示还是多行显示
    font-kerning 设置字体的间距
    font-size-adjust 定义字体大小对应   font-size * 系数 = 字体大小
    font-stretch 定义一个正常或者经过伸缩变形的字体外观
    
    grid-gap 用于设置网格行与列之间的间隙 是row-gap和column-gap的简写形式
    grid 网格显示属性
    grid-template 定义网格中的行列与分区
    grid-template-areas 网格区域在grid areas中的特定命名
    grid-template-columns 基于网格列的维度定义网格的名称和网格轨道的尺寸大小
    grid-template-rows 基于网格行的维度定义网格对的名称和网格鬼带的尺寸大小
    
    left 定义了定位元素的外左边距边界与包含块边界之间的偏移,非定位元素设置此属性无效
    letter-spacing 明确了文字的间距距离
    line-break 用来处理如何断开带有标点符号的中文,日文或者韩文文本的行 
    line-height 用于设置多行文本之间的行间距
    list-style 列表样式
    
    margin-block 距离元素边距偏移
    mask 允许使用者通过部分或者完全隐藏一个元素的可见区域
    mask-repeat 定义了遮罩文件是否显示多个副本
    
    object-fit 指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框
    object-postion 规定了可替换元素的内容,在其内容框中的位置
    opacity 指定了一个元素的透明度
    order 在弹性容器中的可伸缩项目在布局时的顺序
    orientation 描述符控制由@viewport定义文档的方向,通过设备的倾斜摆动 情况来决定文档显示的方向
    outline-style 设置一个元素轮廓的样式
    overflow 定义一个元素的内容太大而无法适应块级格式化上下文时候应该做什么
    
    pad 和计数样式一起使用时,可以用来限定计数样式的最小长度
    padding 设置一个元素的内边距
    padding-block 距离元素内边距的距离
    page-break-after 调整当前元素之后的分页符
    page-break-before 调整当前元素之前的分页符
    page-break-inside 调整当前元素内的分页符
    perspective 指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果
    perspective-origin 指定了观察者的位置,用于perspective属性的消失点
    place-content 是align-content和justify-contnet的简写,使用者两个属性的值可以用于任何情况的布局
    
    resize 允许你控制一个元素的可调整大小性
    right 定义了元素的外右边距边界与其包含右边界之间的偏移,非定位元素设定此属性无效。
    rotate 属性允许你单独设置transform的旋转属性。
    row-gap 用于设置行元素之间的间隙大小
    
    scale 独立指定css颜色transform缩放的比例
    scroll-behavior 为一个滚动框指定滚动行为
    scroll-margin 与margin相似
    scroll-margin-block
    scroll-margin-block-end
    scroll-margin-block-start
    scroll-margin-block-bottom
    scroll-margin-block-inline
    scroll-color 设置滚动条轨道和拇指的颜色
    scroll-width 设置滚动条出现时的厚度
    shape-image-threshold 设置图片模型门槛?
    shape-margin 
    shape-outside 定义了一个可以非矩形的形状,相邻的内联内容应该围绕该形状进行包装
    
    tab-size 表示了制表符长度
    tab-layout 定义了用于布局表格单元格,行和列的算法
    text-decoration 设置文本的上划线、下划线、删除线
    text-decoration-color 设置文本装饰线的颜色
    text-decoration-line   设置文本装饰线的类型
    text-decoration-style 设置文本装饰线的样式
    text-emphasis 设置文本上标元素
    text-emphasis-color 设置文本上标元素颜色
    text-emphasis-position 设置文本上标元素位置
    text-emphasis-style 设置文本上标元素样式
    text-index 设置文本内容缩进量
    text-justify 定义的是当文档的text-align属性被设置为:justify时的齐行方法
    text-orientation 
    text-overflow 在容器极限处进行截断后用其他字符代替
    text-rendering 定于浏览器渲染引擎在渲染字体的时候 在 速度、清晰度、几何精度等方面进行权衡
    text-shadow 给文本字体设置对应的阴影,多个的时候用‘,’隔开
    text-transform 将文本转换为大写或者小写 或者限制转换
    

    伪类元素

    :link 未访问
    :visited 已访问
    :hover  鼠标悬停
    :active 活动中
    ::after 作为当前选中元素的最后一个元素,配合content为元素添加装饰内容
    ::backdrop 在任何处于全屏模式下的元素即刻渲染的盒子 safari浏览器不支持
    ::before 作为当前选中元素的第一个元素,配合content为元素添加装饰内容
    :checked 选中的元素
    
    :default 默认元素的样式
    :disabled 表示被禁用的元素
    
    :empty 表示没有子类元素
    :enabled 表示启用的元素
    
    :first 打印文档的时候第一页的样式
    :first-child 表示兄弟元素中的第一个元素
    ::first-letter 选中元素的第一行的第一个字母
    ::first-line 选中块级元素的第一行
    :first-of-type 表示一组兄弟元素中其类型的第一个元素
    :focus 表示获取焦点的元素 用户点击或者触摸元素或通过键盘的tab触发对应的样式
    
    :in-range 代表一个input元素,其当前值处于属性min和max限定的范围内
    :indeterminate 表示状态不确定的表单元素
    :invalid 表示任意未通过验证的input元素或者其他元素
    
    :lang 基于元素语言来匹配页面元素
    :last-child 代表父类元素的最后一个子元素
    :last-of-type 表示在他父类元素子元素列表中,最后一个给定类型的元素
    :left 相对打印文档的右侧 
    
    ::marker css伪类元素 选择列表的前置标记,一般包含着重符号或数字
    :not() 非对应的元素
    :nth-child() 找到所有当前元素的兄弟元素,按照位置的先后顺序排序
    :nth-last-child() 找到所有当前元素的兄弟元素从后往前匹配对应的元素位置
    :nth-last-of-type() 找到所有当前相同类型元素的兄弟元素从后往前匹配对应的元素位置
    :nth-of-type() 找到所有当前相同类型元素的兄弟元素从后往前匹配对应的元素位置
    
    :only-child 匹配没有任何兄弟元素的元素
    :only-of-type 代表了任意一个元素,这个元素没有其他相同;类型的兄弟元素
    :optional 表示任意没有required属性的元素使用它
    :out-of-range 表示一个input元素,其元素处于属性min和max限定的范围外
    
    :read-only 只读属性对应样式
    :read-write 代表可写属性样式 火狐(-moz-read-write)
    :required 表示任意拥有required属性的input或者textarea元素使用它
    :right 与@page一起配套使用,表示打印文档的所有右页
    :root 匹配文档树的根元素,表示html元素
    
    :scope 将匹配html
    ::selection 文档被用户选中高亮的部分
    :slotted 用于选定被放在html模板中的元素
    
    :target 代表一个唯一的页面元素,其ID与当前URL片段匹配
    

    其他属性

    attr()用于获取选择到的元素的某一个html属性,并用于样式,可以用于伪元素,属性值采用伪元素所依赖的元素
    calc() 计算方法
    linear-gradient() 渐变函数

    matrix() 由指定的6个值组成的2D变换矩阵
    matrix3d() 由指定的16个值组成的3D变换矩阵
    max() 最大值
    min() 最小值
    minmax() 最小最大值

    repeating-linear-gradient() 创建一个由重复线性渐变组成的image
    repeating-radial-gradient() 创建一个由原点辐射的重复渐变组成的image
    rgb() 颜色可以使用红-绿-蓝模式的两种方式进行定义
    rgba() 颜色可以使用红-绿-蓝-阿尔法模式定义
    rotate() 定义了一种将元素围绕一个定点旋转而不变形的转换
    rotate3d() 定义一个变换,它将元素围绕固定轴移动而不使其变形,运动量由指定的角度定义,正顺时针,负逆时针
    rotateX() 围绕横轴坐标旋转
    rotateY() 围绕纵轴坐标旋转
    rotateZ() 围绕Z轴坐标旋转

    scale() 用于修改元素的大小
    scale3d() 用于修改元素的3d大小
    scaleX() css函数将每个元素点的横轴坐标修改为一个常数因子,缩放是同性的,并且元素的角度不变
    scaleY() css函数将每个元素点的纵轴坐标修改为一个常数因子,缩放是同性的,并且元素的角度不变
    scaleZ() css函数将每个元素点的Z轴坐标修改为一个常数因子,缩放是同性的,并且元素的角度不变
    skew() 定义了一个元素在二维平面上的倾斜转换
    skewX() 将元素倾斜到二维平面上的水平方向
    skewY() 将元素倾斜到二维平面上的垂直方向

    filter属性:

    blur() 高斯模糊效果
    brightness() 亮度显示效果
    contrast() 调整图片对比度
    drop-shadow() 给图片绘制一个阴影效果
    grayscale() 图像转换成灰度图像
    hue-rotate() 给图像应用色旋转
    invert() 反转输入图像
    opacity() 转化图像的透明度
    saturate() 转化图像的饱和度
    sepia() 将图像转换为深褐色

    color属性:

    hsl() 色相-饱和度-透明度 模式
    hsla() 色相-饱和度-透明度-阿尔法 模式

    规则属性

    @charset 声明对应的字符串编码 @charset "utf-8";
    @counter-style 定义计数器规则
    @font-face 为网页指定对应的字体
    @import 引入CSS样式文件
    @media 可以根据一个或者多个媒体查询的结果应用样式表的一部分
    @namespace 空间命名
    @page 用于打印在文档时修改的某些CSS样式
    

    清除浮动

    清除父类元素浮动

    .clearfloat{
        zoom: 1;
    }
    .clearfloat:after{
        display: block;
        content: '';
        clear: both;
        height: 0;
        visibility: hidden;
    }
    

    相关文章

      网友评论

          本文标题:css样式 复习笔记

          本文链接:https://www.haomeiwen.com/subject/fkbvbctx.html