css基础知识点

1.css值
2.文本
3.背景
4.边框
5.布局
6.选择器
7.动画
8.媒体查询
10.优先级

1.css值

长度:
- 绝对长度单位:cm(厘米),mm(毫米),Q(四分之一毫米),in(英寸),px(像素)
- 相对长度单位:em(父元素的字体大小),rem(根元素的字体大小),lh( 元素的line-height),vw(视窗宽度的1%),vh(视窗高度的1%),vmin(视窗较小尺寸的1%),vmax(视窗较大尺寸的1%)
- 百分比:相对于父元素值设置的
- 数字
颜色:
- 颜色关键词:如 red
- 十六进制RGB值:如 #02798b
- RGB :RGB值是一个函数—RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值.如 rgb(2, 121, 139)
- RGBA :RGBA颜色——它们的工作方式与RGB颜色完全相同，因此您可以使用任何RGB值，但是有第四个值表示颜色的alpha通道，它控制不透明度。如果将这个值设置为0，它将使颜色完全透明，而设置为1将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。如 rgba(2, 121, 139, .3)
- HSL:hsl() 函数接受色调、饱和度和亮度值作为参数
- HSLA:hsla() 函数接受色调、饱和度、亮度值和透明度作为参数

2.文本

color: 定义字体颜色
font-family: 定义字体种类(网页安全字体(操作系统):Arial,Courier New,Georgia,Times New Roman,Trebuchet MS,Verdana 默认字体(浏览器):serif,sans-serif,monospace,cursive,fantasy)
font-size:定义字体大小
font-style: 用来打开和关闭文本 italic (斜体)
- normal: 将文本设置为普通字体 (将存在的斜体关闭)
- italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
- oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
font-weight: 设置文字的粗体大小。
- normal, bold: 普通或者加粗的字体粗细
- lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。
- 100–900: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。
text-transform: 允许你设置要转换的字体
- none: 防止任何转型。
- uppercase: 将所有文本转为大写。
- lowercase: 将所有文本转为小写。
- capitalize: 转换所有单词让其首字母大写
- full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。
text-decoration: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。)
- none: 取消已经存在的任何文本装饰。
- underline: 文本下划线.
- overline: 文本上划线
- line-through: 穿过文本的线
text-shadow(文字阴影): 4px 4px 5px red;
- 阴影与原始文本的水平偏移
- 阴影与原始文本的垂直偏移
- 模糊半径
- 阴影的基础颜色
text-align: 用来控制文本如何和它所在的内容盒子对齐
- left: 左对齐文本。
- right: 右对齐文本。
- center: 居中文字。
- justify: 文字向两侧对齐，对最后一行无效。
- justify-all:和justify一致，但是强制使最后一行两端对齐。
line-height 属性设置文本每行之间的高
letter-spacing:设置你的文本中的字母与字母之间的间距
word-spacing:设置你的文本中的单词与单词之间的间距
text-indent: 指定文本内容的第一行前面应该留出多少的水平空间
text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。
- clip: 空字符串值 (’’)
- ellipsis:省略号 (’…’)
- <string>:用来表示被截断的文本
white-space: 定义如何处理元素内部的空白和换行。
- normal:连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
- nowrap: 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
- pre:连续的空白符会被保留。在遇到换行符或者
  元素时才会换行。
- pre-wrap:连续的空白符会被保留。在遇到换行符或者
  元素，或者需要为了填充line盒子时才会换行。
- pre-line:连续的空白符会被合并。在遇到换行符或者
  元素，或者需要为了填充line盒子时会换行。
- break-spaces:与 pre-wrap的行为相同，除了：(1).任何保留的空白序列总是占用空间，包括在行尾。(2).每个保留的空格字符后都存在换行机会，包括空格字符之间。(3).这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。
word-break: 指定是否能在单词内部换行。
- normal:使用默认的断行规则。
- break-all:对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
- keep-all:CJK 文本不断行。 Non-CJK 文本表现同 normal。
direction: 定义文本的方向
- ltr:默认属性。可设置文本和其他元素的默认方向是从左到右。
- rtl:可设置文本和其他元素的默认方向是从右到左。
text-orientation: 定义行内文本的方向。
overflow-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。
- normal:表示在正常的单词结束处换行。
- break-word:表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。
writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。
font-stretch:在给定字体的可选拉伸版本中切换。
- normal:指定默认字体
- semi-condensed, condensed, extra-condensed, ultra-condensed:小于默认字体，其中ultra-condensed是缩的最小的字体
- semi-expanded, expanded, extra-expanded, ultra-expanded:大于默认字体的值
font(简写属性):font-style font-variant font-weight font-stretch font-size/line-height font-family.

3.背景

background: background-image background-repeat background-attachment background-position/background-size (background-origin|background-clip) background-color
background-attachment:决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。
- fixed:此关键字表示背景相对于视口固定。
- local:此关键字表示背景相对于元素的内容固定。
- scroll:此关键字表示背景相对于元素本身固定，而不是随着它的内容滚动
background-clip:设置元素的背景（背景图片或颜色）是否延伸到边框下面。
- border-box:背景延伸至边框外沿（但是在边框下层）。
- padding-box:背景延伸至内边距（padding）外沿。不会绘制到边框处。
- content-box:背景被裁剪至内容区（content box）外沿。
- text :背景被裁剪成文字的前景色。
background-color:设置元素的背景色
background-image:为一个元素设置一个或者多个背景图像
background-origin:规定了指定背景图片background-image 属性的原点位置的背景相对区域.
- border-box:背景图片的摆放以border区域为参考
- padding-box:背景图片的摆放以padding区域为参考
- content-box:背景图片的摆放以content区域为参考
background-position:为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。
background-repeat:定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
- repeat(repeat-x,repeat-y):图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.
- space:图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素的相应的边上, 同时空白会均匀地分布在图像之间.
- round:随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像.
- no-repeat:图像不会被重复
background-size:设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
- auto:以背景图片的比例缩放背景图片。
- cover:缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- contain: 缩放背景图片以完全装入背景区，可能背景区部分空白
- <length>:指定背景图片大小，不能为负值
- <percentage>:背景图片相对背景区的百分比,背景区由background-origin设置

4.边框

border: [border-width ||border-style ||border-color |inherit]
- border-width:属性可以设置盒子模型的边框宽度。
  - thin:细边线
  - medium:中等边线
  - thick:宽边线
  - <length>:指定宽度值
- border-style :设定元素所有边框的样式
  - none:不显示边框。
  - hidden:不显示边框。
  - dotted:显示为一系列圆点。
  - dashed:显示为一系列短的方形虚线。
  - solid:显示为一条实线。
  - double:显示为一条双实线
  - groove:显示为有雕刻效果的边框
  - ridge:显示为有浮雕效果的边框
  - inset:显示为有陷入效果的边框
  - outset:显示为有突出效果的边框
- border-color:设置元素四个边框颜色
border-image:image-source image-height image-width image-repeat(允许在元素的边框上绘制图像)
border-radius:设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆

5.布局

弹性盒子:display:flex
- flex-flow:flex-direction flex-wrap
  - flex-direction:指定主轴的方向(row,row-reverse,column,column-reverse )
  - flex-wrap:指定 flex 元素单行显示还是多行显示(nowrap,wrap,wrap-reverse)
- align-items:控制 flex 项在交叉轴上的位置(默认stretch)
- justify-content:控制 flex 项在主轴上的位置(默认flex-start)
  - start:从行首开始排列
  - flex-start:从行首开始排列
  - flex-end:从行尾开始排列
  - center:伸缩元素向每行中点排列
  - left:伸缩元素一个挨一个在对齐容器得左边缘
  - right:元素以容器右边缘为基准
  - space-between:在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
  - space-around:在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
  - space-evenly:flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距,，主轴结束位置到最后一个flex项的间距，都完全一样。
  - stretch:如果项目的组合大小小于对齐容器的大小，则任何自动大小的项目其大小都相同（不按比例增加），同时仍遵守最大高度/最大宽度（或等效功能）施加的约束，以便组合大小精确填充沿主轴的对齐容器。
- flex:flex-grow flex-shrink flex-basis
  - flex-grow:定义弹性盒子项的拉伸因子
  - flex-shrink:指定了 flex 元素的收缩规则
  - flex-basis:指定了 flex 元素在主轴方向上的初始大小
    - <‘width’>:默认为 auto
    - content:基于 flex 的元素的内容自动调整大小
- order:规定了弹性容器中的可伸缩项目在布局时的顺序
网格: display:grid
- grid-template:grid-template-rows grid-template-columns grid-template-areas
  - grid-template-rows:该属性是基于网格行的维度
    - none:这个关键字表示不明确的网格
    - <length>:非负值的长度大小
    - <percentage>:非负值且相对于网格容器的 <百分比>
    - <flex>:非负值，用单位 fr 来定义网格轨道大小的弹性系数
    - max-content:是一个用来表示以网格项的最大的内容来占据网格轨道的关键字
    - min-content:是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字
    - minmax(min, max):是一个来定义大小范围的属性，大于等于min值，并且小于等于max值
    - auto:如果该网格轨道为最大时，该属性等同于 <max-content> ，为最小时，则等同于 <min-content> 。
    - fit-content( [ <length> | <percentage> ] ):相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算(即 minmax(auto, max-content))
    - repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ):表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复行的表达式。
  - grid-template-columns:
  - grid-template-areas:网格区域在CSS中的特定命名
    - none:网格容器没有定义任何的网格区块
    - <string>+:每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元会生成一列。多个同名的，跨越相邻行或列的单元称为网格区块。非矩形的网格区块是无效的
- grid-row:grid-row-start / grid-row-end
- grid-column:grid-column-start / grid-column-end
- grid-area:grid-row-start / grid-column-start / grid-row-end / grid-column-end
- grid-gap:row-gap column-gap(设置网格行与列之间的间隙)
浮动
- float:指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性
  - left:表明元素必须浮动在其所在的块容器左侧的关键字
  - right:表明元素必须浮动在其所在的块容器右侧的关键字
  - none:表明元素不进行浮动的关键字
  - inline-start:表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧
  - inline-end:表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。
- clear:指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面(关键字同上)
定位
- 静态定位(position: static):每个元素获取的默认值,它只是意味着“将元素放入它在文档布局流中的正常位置,此时 top, right, bottom, left 和 z-index 属性无效
- 相对定位(position: relative):元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置
- 绝对定位(position: absolute):不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置
- 固定定位(position: fixed):不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素位置
- 粘性定位(position: sticky;top:10px):粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位

6.选择器

选择器

基本选择器
- 元素选择器 :elementname(元素名称)
- 类选择器 :.classname(类名)
- ID 选择器 :#idname(ID 名)
- 通配选择器(性能最低的一个CSS选择器)
  - ns|* :会匹配ns命名空间下的所有元素
  - *|* :会匹配所有命名空间下的所有元素
  - |* :会匹配所有没有命名空间的元素
- 属性选择器 :[属性=值]
组合选择器
- 相邻兄弟选择器 :A + B
- 普通兄弟选择器 :A ~ B
- 子选择器 :A > B
- 后代选择器 :A B
伪类: 允许基于未包含在文档树中的状态信息来选择元素
- :active:匹配被用户激活的元素
- :checked:表示任何处于选中状态的radio,checkbox,select元素中的option
- :focus:表示获得焦点的元素
- :nth-child(an+b):首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合
- :nth-last-child(an+b):从兄弟节点中从后往前匹配处于某些位置的元素
- :not(): 匹配不符合一组选择器的元素,不能包含另外一个否定选择器
- :in-range:代表一个元素，其当前值处于属性min 和max 限定的范围之内
- :out-of-range:表示一个元素，其当前值处于属性 min 和 max 限定的范围外
- :disabled:表示任何被禁用的元素
- :enabled:表示任何被启用的元素
- :hover:用于用户使用指示设备虚指一个元素（没有激活它）的情况
- :link :用来选中元素当中的链接。它将会选中所有尚未访问的链接
- :visited:表示用户已访问过的链接
- :required:表示任意拥有required属性的 <input> 或 <textarea> 元素
- :valid:表示内容验证正确的<input> 或其他 <form> 元素
- :invalid:表示任意内容未通过验证的 <input> 或其他 <form> 元素
- :target:代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配
- :has():代表一个元素，其给定的选择器参数（相对于该元素的 :scope）至少匹配一个元素。
- :read-only:表示元素不可被用户编辑的状态（如锁定的文本输入框）
- :read-write:代表一个元素（例如可输入文本的 input元素）可以被用户编辑
伪元素:表示所有未被包含在HTML的实体
- ::before:创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素
- ::after:用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素
- ::placeholder:可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。

7.动画

动画

animation:animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state animation-name
- animation-duration:指定一个动画周期的时长,默认值为0s，表示无动画
  - <time>:一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效
- animation-timing-function(linear|ease|ease-in|ease-in-out|ease-out|step-start|step-end):定义CSS动画在每一动画周期中执行的节奏
  - <timingfunction>:每个 <timing-function>代表了应用于动画的timing function，定义于animation-property.
- animation-delay:定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。0s是该属性的默认值
- animation-iteration-count: 定义动画在结束前运行的次数
  - infinite:无限循环播放动画
  - <number>动画播放的次数
- animation-direction:指示动画是否反向播放
  - normal:每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
  - alternate:动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向
  - reverse:反向运行动画，每周期结束动画由尾到头运行。
  - alternate-reverse:反向交替，反向开始交替,动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
  - animation-fill-mode:设置CSS动画在执行之前和之后如何将样式应用于其目标
    - none:当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值
    - forwards:目标将保留由执行期间遇到的最后一个关键帧计算值
    - backwards:动画将在应用于目标时立即应用第一个关键帧中定义的值
    - both:动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性
- animation-play-state:定义一个动画是否运行或者暂停
  - running:当前动画正在运行。
  - paused:当前动画以被停止。
- animation-name:指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列

8.媒体查询

媒体查询

媒体特征:
- (min/max-)color:指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。
- (min/max-)color-index:指定了输出设备中颜色查询表中的条目数量
- (min/max-)aspect-ratio:描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数与垂直像素数的比例。
- (min/max-)device-aspect-ratio:描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数
- (min/max-)device-height:描述了输出设备的高度
- (min/max-)device-width:描述了输出设备的宽度
- grid:判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0
- (min/max-)height:描述了输出设备渲染区域
- (min/max-)width:输出设备渲染区域的宽度
- orientation:指定了设备处于横屏模式还是竖屏模式。
- (min/max-)resolution:指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示
逻辑操作符
and:用于合并多个媒体属性或合并媒体属性与媒体类型
逗号分隔列表:媒体查询中使用逗号分隔效果等同于or逻辑操作符
not:应用于整个媒体查询，在媒体查询为假时返回真
only:防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式