zoukankan      html  css  js  c++  java
  • 值得注意的CSS属性

    文本TEXT


    • letter-spacing 字符间距
    • word-spacing 字间距
    • line-height 行高
    • text-decoration 修饰(下划线)
    • text-indent 首行缩进
    • text-shadow 文字阴影
    • vertical-align 元素垂直对齐
    • overflow-wrap 容器内文字溢出容易还是/换行

    定位POSITION

    • position 定位
    • z-index 层叠
    • top/right/left/bottom 配合position使用

    布局LayOut

    • visibility 是否可见(不可见也保留空间)
    • overflow 对溢出内容的处理

    尺寸Dimension

    • width
    • min-width
    • max-width
    • height
    • min-height
    • max-height

    边框border

    • border-radius 边角半径长度
    • border-shadow 边框阴影

    背景background

    • background-attachment 背景图像是否随着页面滚动(是否fixed)
    • background-position 指定背景图像填充的位置
    • background-clip 从什么区域开始向外剪裁图像
    • background-size 背景图像的大小

    颜色color

    • opacity 不透明度

    字体font

    • font-style 字体样式(斜体等)
    • font-weigth 字重(粗细)
    • font-size 字大小
    • font-family 字体库

    列表list

    • list-style-image 标记的图像
    • list-style-position 标记的位置
    • list-style-type 标记样式

    表格table

    • table-layout 表格布局(根据内容拉伸或固定不变)
    • border-collapse 表格的行和单元格的边是合并还是独立
    • border-spacing 表格之间的间距(若表格边是合并的则无效)
    • empty-cells 空单元格是否显示

    内容content

    • content 内容用来和:after:before伪元素一起使用,在对象前或后显示内容。

    使用用户自定义标识名作为组件取值。

    • 自定义标识区分大小写,例如test与TEST是2个不同的值
    • 自定义标识不能使用与CSS属性及属性值相同的名字
    • 正常工作的例子:

      示例代码:

       1 li {
       2     counter-increment: testname;
       3 }
       4 li {
       5     counter-reset: testname2;
       6 }

     用户界面userinterface

    • text-overflow 当内联内容溢出容器时,将溢出部分裁切掉
    • outline-width/color/style/offset 不占据中间的轮廓
    • cursor 不仅有样式选择,还有位置
    • zoom 对象实际尺寸的缩放
    • box-sizing 定义盒模型的宽高是针对content还是border
    • pointer-events 设置属性是否可以触发事件

     变化transform

    • transform 设置或检索对象的转换,可选项很多
    • transform-origin 设置对象以某个原点进行转换
    • transform-style 设置对象是2D还是3D
    • perspective 指定观察者距离z=0界面的距离,为元素及其内容应用透视变换
    • perspective-origin 指定透视点位置
    • backface-visibility 指定元素背面可见,允许显示正面的镜像

    过渡Transition

    • transition-property 需要过渡的属性
    • transition-duration 过渡持续时间
    • transition-timing-function 事件函数
    • transition-delay 过渡延时

    动画Animation


    以上就是CSS包括CSS3基本的重点属性了,但是多列伸缩盒本人没有用到所以暂时没有列出来!

  • 相关阅读:
    github 代理加速
    centos系统语言设置为中文
    红帽 / CentOS安装Jenkins
    查看api有没有更新到位
    永久关闭Windows10或Windows11的系统自动更新
    api传文件连接超时
    docker日常使用
    开发者工具批量替换
    Linux常用工具安装
    office密钥
  • 原文地址:https://www.cnblogs.com/cndotabestdota/p/5703168.html
Copyright © 2011-2022 走看看