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

原文地址:https://www.cnblogs.com/cndotabestdota/p/5703168.html