css属性

css 基础属性大全 适合初学者，汇总了字体属性、文本属性、图像属性、盒子属性、浮动、flex的知识，一起来看。

css属性

• 字体属性
  • font-sytle
    • 值：normal(无）、italic（斜体）、oblique（倾斜）。
  • font-size
    • 值：字体大小，通常使用像素（px）、em、rem、百分比（%）等单位。
  • font-wedght
    • 值：normal、bold、bolder、lighter，或数字值（如100、200、...、900）。
  • font-height
    • 值：数字值、单位（像素、em、百分比）。
  • font-family
    • 值：字体名称（例如，"Arial"、"Helvetica"）、通用字体系列（例如，sans-serif、serif）、具有备选字体的字体栈（例如，"Arial, Helvetica, sans-serif"）
  • font-variant
    • 值：normal(无）、small-caps（小写字母替换为小型大写字母。
  • color
    • 值：颜色值，可以使用颜色名称、十六进制、RGB、RGBA 等。
• 文本属性
  • 1. text-align
    • 用于设置文本的水平对齐方式，可以取值为 left、center、right 等。
  • 2. text-decoration
    • 值：none、underline、overline、line-through、blink 等。
    • 用于添加或删除文本的装饰效果，如下划线、删除线等。
  • 3. text-transform
    • 值：none、uppercase、lowercase、capitalize。
    • 用于控制文本的大小写转换，如大写、小写、首字母大写等。
  • 4. letter-spacing
    • 值：数字值、单位（像素、em）
    • 用于设置字符之间的间距，控制字母之间的间隔。
  • 5. word-spacing
    • 值：数字值、单位（像素、em）
    • 用于设置单词之间的间距，控制单词之间的间隔。
  • 6. white-space
    • 值：normal、nowrap、pre、pre-wrap、pre-line 等。
    • 用于控制空白字符的处理方式，如处理空格和换行符的方式。
  • 7. text-indent
    • 值：数字值、单位（像素、em）。
    • 用于设置文本段落的首行缩进。
  • 8. text-overflow
    • 值：clip、ellipsis。
    • 用于定义当文本溢出容器时的处理方式，如显示省略号。
  • 9. direction
    • 值：ltr（从左到右）或 rtl（从右到左）。
    • 用于控制文本的书写方向，特别是对于多语言和双向文本。
  • 10. line-height
    • 值： 正数、百分比、单位（像素、em、rem）或无单位数值
    • 定义了文本行的高度，它决定了行内元素（如文本）在垂直方向上的布局
• 图像属性
  • background-color: 设置背景颜色，可以使用颜色名称、十六进制颜色码或RGB值。
  • background-image: 设置背景图片的URL。例如：background-image: url('image.jpg');
  • background-repeat: 指定背景图片的重复方式。
    • 值可以是
      • repeat：默认值，背景图片在水平和垂直方向上重复。
      • repeat-x：背景图片在水平方向上重复
      • repeat-y：背景图片在垂直方向上重复
      • no-repeat：背景图片不重复，只显示一次
  • background-position: 设置背景图片的位置。
    • 值
      • left
      • center
      • right
  • background-size: 设置背景图片的大小。
    • 值可以是像素值、百分比值、关键词
      • contain
      • cover：让背景图片尽量覆盖整个元素
  • background-attachment: 控制背景图片是否固定或随着页面滚动。
    • 值
      • scroll背景图片随着页面滚动
      • fixed背景图片固定不动，不随页面滚动。
      • local背景图片随着元素内容滚动
  • background-origin: 定义背景图片的定位区域，通常与background-clip一起使用。
    • padding-box 背景从内边距框开始，延伸到边框框
    • border-box 背景从边框框开始，延伸到边框外边
    • content-box 背景仅填充内容框
  • background-blend-mode: 指定背景图片与元素内容的混合模式。
    • 例如：background-blend-mode: multiply;
  • background-gradient: 设置渐变背景。这是一个复杂的属性，允许你创建渐变效果的背景。
• 盒子属性
  • width 和 height:
    • width
      • 设置元素的宽度。
    • height
      • 设置元素的高度。
  • padding
    • 用于设置元素的内边距，即元素内容与边框之间的空间。
  • margin
    • 用于设置元素的外边距，即元素与其周围元素之间的空间。
  • border-radius
    • 用于设置元素的圆角边框。
      • 四值
        • 左上、右上、右下、左下
      • 三值
        • 左上、（右上、右下）、左下
      • 二值
        • （左上、左下）、（右上、右下）
      • 一值
        • 全值
  • border-style
    • 1. none
      • : 没有边框，元素周围没有边框线。
    • 2. solid
      • : 实线边框，元素周围有一条实线。
    • 3. dotted
      • : 点线边框，元素周围有一条点线。
    • 4. dashed
      • : 虚线边框，元素周围有一条虚线。
    • 5. double
      • : 双线边框，元素周围有两条边框线。
    • 6. groove
      • : 3D凹槽边框，元素周围有一条3D效果的凹槽线。
    • 7. ridge
      • : 3D凸起边框，元素周围有一条3D效果的凸起线。
    • 8. inset
      • : 内阴影边框，元素周围有一条内阴影线。
    • 9. outset
      • : 外阴影边框，元素周围有一条外阴影线。
  • border
    • 用于设置元素的边框样式，包括边框宽度、边框样式和边框颜色。
      • 1. 2px
        • - 边框宽度：设置边框的宽度为2像素。
      • 2. solid
        • - 边框样式：设置边框的样式为实线。
      • 3. red
        • - 边框颜色：设置边框的颜色为红色。
  • overflow
    • 用于控制元素内容溢出时的处理方式，可以是 visible（默认，内容可见）、 hidden（隐藏溢出内容）、 scroll（显示滚动条）或 auto（自动显示滚动条）等。
  • display
    • 用于设置元素的显示方式，可以是 block（块级元素）、 inline（内联元素）、 inline-block（内联块元素）等。
  • box-sizing
    • 控制元素的盒子模型的计算方式，可以是 content-box（默认，宽度和高度不包括边框和内边距）或 border-box（宽度和高度包括边框和内边距）。
  • position
    • 用于设置元素的定位方式，可以是 static（默认，普通定位）、 relative（相对定位）、 absolute（绝对定位）或 fixed（固定定位）等。
  • top、right、left、botton
    • 用于定位绝对定位元素的位置。
• 浮动
  • 浮动值
    • left
      • ：元素向左浮动，其他内容会在其右侧排列。
    • right
      • ：元素向右浮动，其他内容会在其左侧排列。
    • none
      • （默认）：元素不浮动，按照正常文档流排列。
  • 清楚浮动
    • 为了解决浮动元素可能导致的高度塌陷问题，通常需要使用clear属性来清除浮动。
    • clear属性有值可以是left、right、both、none等，用于确定在浮动元素的左侧、右侧或两侧都不允许其他元素浮动。
  • 父元素塌陷问题
    • 当父元素包含浮动元素时，可能会导致父元素的高度塌陷，无法正常包裹浮动元素。此时，可以使用clear属性或使用overflow: hidden;（或其他值）来清除浮动。
  • 浮动的应用
    • 创建多列布局。
    • 制作图文混排效果，如文字环绕图片。
    • 创建导航菜单、悬浮元素等。
  • 注意事项
    • 浮动元素脱离了正常文档流，可能需要使用适当的清除浮动方法，以防止布局问题。
    • 清除浮动时，要确保清除的元素在浮动元素之后，以避免不必要的布局问题。
• flex
  • display: 设置为flex或inline-flex以启用Flexbox布局。
    • flex
      • : 此元素变为块级Flex容器。
    • inline-flex
      • : 此元素变为行内Flex容器。
  • flex-direction: 设置主轴的方向。
    • row
      • : 从左到右。
    • row-reverse
      • : 从右到左。
    • column
      • : 从上到下。
    • column-reverse
      • : 从下到上。
  • justify-content: 控制主轴上的元素对齐方式。
    • flex-start
      • : 起点对齐。
    • flex-end
      • : 终点对齐。
    • center
      • : 居中对齐。
    • space-between
      • : 两端对齐。
    • space-around
      • : 环绕对齐。
  • align-items: 控制交叉轴上的元素对齐方式。
    • flex-start
      • : 起点对齐。
    • flex-end
      • : 终点对齐。
    • center
      • : 居中对齐。
    • baseline
      • : 基线对齐。
    • stretch
      • : 拉伸以填充容器。
  • flex-wrap: 控制Flex容器是否换行。
    • nowrap
      • : 不换行。
    • wrap
      • : 换行。
    • wrap-reverse
      • : 反向换行。
  • flex: 简写属性，用于设置flex-grow, flex-shrink, 和 flex-basis。
  • align-self: 用于覆盖容器的 align-items 属性，控制单个项目
    • auto
      • : 继承父元素的align-items或align-self
    • flex-start
      • : 交叉轴的起点对齐。
    • flex-end
      • : 交叉轴的终点对齐。
    • center
      • : 交叉轴居中对齐。
    • baseline
      • : 项目的基线对齐。
    • stretch
      • : 如果没有设置高度或宽度，项目将拉伸以占据额外的
  • align-content: 当Flex容器有多行时，此属性用于对齐这些行。
    • flex-start
      • : 多行堆叠在交叉轴的起点。
    • flex-end
      • : 多行堆叠在交叉轴的终点。
    • center
      • : 多行在交叉轴上居中。
    • space-between
      • : 多行平均分布在交叉轴上。
    • space-around
      • : 每行在交叉轴上有相等的空间。
    • stretch
      • : 拉伸行以占据剩余的空间。
  • flex-grow: 定义一个Flex项目的增长因子。
    • 可以是任何非负数字。
  • flex-shrink: 定义一个Flex项目缩小的比率。
    • 可以是任何非负数字。
  • flex-basis: 定义Flex项目的基础大小。
    • 可以是任何合法的长度单位，比如 px, %, em, 等。
  • order: 定义Flex项目的顺序。
    • 可以是任何整数。