• 值得注意的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基本的重点属性了,但是多列伸缩盒本人没有用到所以暂时没有列出来!

  • 相关阅读:
    Bootstrap 网页乱码
    西游记人物
    球从100米高度自由落下,每次落地后反跳回原高度的一半;再落下,求它在第10次落地时,共经过多少米?第10次反弹多高?
    利用条件运算符的嵌套来完成此题:学习成绩> =90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示。
    s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字。例如2+22+222+2222+22222(此时共有5个数相加),几个数相加由用户控制。
    实现判断字符串的开头和结尾
    值类型和引用类型
    随机生成4位验证码
    实现 从1-36中随机产生6个不重复的中奖号码
    冒泡排序
  • 原文地址:https://www.cnblogs.com/cndotabestdota/p/5703168.html
Copyright © 2020-2023  润新知