CSS基本知识点梳理 - niuben/niuben.github.io GitHub Wiki

每个元素所占区域是由content、padding、border、margin四个部分组成；

每个元素按照它自身类型从上而下从左到右的布局；

块状元素：单独占据一行，随后其他块状元素会在下面一行显示；
行内元素：不单独占据一行，其高度是由内容决定；
display属性控制元素类型，主要值为block、inline、inline-block、none等

选择器分类：ID、class、*、标签、伪类、子类，并列

!important > id > class > 标签 > *

使用块状元素从上而下一行一行显示；

使用float可以使元素局部脱离文档流，使块状元素不比单独占据一行，使行内元素可以设置高度和宽度； 被float的元素对其后面元素具有一定影响，后面块状元素会占据被浮动的元素所在行；
被float的元素，如果没有被设置宽度，内容将决定宽度；
被float元素，不占据文档流水平空间，但是会占据文档流的垂直空间；
浮动能够实现多列布局；

层级主要由position实现，主要值为absolute、relative、fixed、static
absolute会将元素彻底脱离文档流，不会对后面元素有影响；该元素会成为其子元素的定位原点；
relative属性不会对文档流有影响；只是它会成为其子元素的定位原点；
fixed也会将元素彻底脱离文档里，和absolute属性区别是它是以浏览器窗口为定位原点；
static表示没有定位；

column列属性：column-gap、column-fill、column-count、column-width、column-rule、column-span

flex属性：display：flex、flex-direction、flex-wrap、flex-flow、justify-content、align-item、align-content
flex子元素属性：order、flex-grow、flex-shrink、flex-basis、flex、 align-self

####雪碧图 将很多小图合在一张大图上，然后通过background-position定位图片位置；

####滑动图 主要可以实现背景图片对宽度大小自适应；原理是左边或者右边有很长一个背景图片，然后用右边或者左边的图片想拼接；

• 关系：element>element element+element element~element
• 属性：[attribute][attribute~=value] [attribute|=value] [attribute^=value] [attribute$=value] [attribute*=value] #####伪类：
• 子元素：:first-of-type :only-of-type :last-of-type :only-child :nth-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-of-last-type(n) :first-child :last-child :empty
• 超链接：:link :hover :active :visited :focus :target
• 表单：:enabled :disabled :checked
• 文本：:first-letter :first-line ::selection
• 其他： :root :not

表达式 @madia [not|only] [and ]* | [and ]* expression ([:]?) screen print tv handheld all width height device-width device-height orientation aspect-ratio resolution #####例子 @media srceen and (min-width: 800px) and max-width: 1600px

@font-face { font-family: name, src: ,[,]*;;} [format(string)] format: eot ttf/otf woff svg #####例子 @font-face { font-family: "Mac Rom" src: url("./macrom.eot") format(eot), url("./macrom.ttf") format(ttf) }

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-fill-mode

• @keyframes name { keyframes-selector { cssstyle }, keyframes-selector { cssstyle }}
• keyframes-selector: 百分比0%-100% 或者 from-to

• translate rotate scale skew
• transform-origin: x-axis y-axis z-axis
• transform-style: flat preserve-3d

• transition-property: none|all|property
• transition-duration: 5s
• transition-time-function: linear ease ease-in ease-out ease-in-out cubic-bezier
• transition-delay: 1s

• perspective: numble|none
• perspective-origin: x-axis y-axis

• backface-visibility: none|visible

• text-shadow：h-shadow v-shadow blur color 如：text-shadow: 1px 1px 1px #F00;
• box-shadow：h-shadow v-shadow blur spread color inset

• text-justify:
• text-overflow: clip|esllipse|none
• text-wrap:
• word-wrap: normal|break-word
• word-break: normal|break-all|keap-all
• white-space: normal|nowrap|pre|pre-wrap|pre-line

mask-image:

background-clip: border-box|padding-box|content-box background-origin: border-box|padding-box|content-box
background-size: width height|cover|contain

background: linear-gradient(direction, color-stop1, color-stop2, ...);

background: radial-gradient(center, shape size, start-color, ..., last-color);

box-sizing: content-box|border-box|inherit