CSS学习总结

前端学习总结之CSS，包括css基础知识、css3新增内容、Sass预处理器、flex布局、grid布局等。

CSS

弹性盒模型

组成

content， border，padding， margin

标准盒模型

IE盒模型

CSS选择器

基本选择器

元素选择器、id选择器(#)、class选择器(.)、通用选择器(*)、分组选择器(h1, h2, p)、后代选择器(空格)、子元素选择器(>)、相邻兄弟选择器(+)、通用兄弟选择器(~)

伪类选择器、伪元素选择器

伪类选择器：(:)

伪元素选择器：(::)

属性选择器: []

权值计算

CSS基本属性

背景：background-color/background-image/background-repeat/background-attachment/background-position

颜色

RGB: rgb(red, green, blue)

HEX: #rrggbb

HSL: hsla(hue, saturation, lightness)

不透明度：opacity

边框: border-style/border-width/border-color/border-radius/border

文本：color/text-align/text-decoration/text-transform/text-indent/text-shadow

字体: font-family/font-size/font-weight/font-style/font-variant

定位：position: static/relative/fixed/absolute.sticky

Display: none/block/inline-block/inline/list-item/run-in/compact/marker/table/inline-table/table-row-group/table-header-group/table-footer-group/table-row/table-column-group/table-column/table-cell/table-caption/inherit

浮动

float

清除浮动

clear属性

clearfix Hack

溢出：overflow: visible/hidden/scroll/auto

轮廓: outline-style/outline-color/outline-width/outline-offset/outline

链接

a:link

a:visited

a:hover

a:active

列表：list-style-type/list-style-image/list-style-position

表格：border/border-colapse/border-spacing/caption-side/empty-cells/table-layout

单位

绝对长度：cm, mm, in, px, pt, pc

相对长度: em, ex, ch, rem, vw, vh, vmin, vmax, %

CSS响应式设计

格式化上下文

BFC

IFC

优化

图像精灵

CSS3

新增选择器

使用选择器在页面插入内容

新增文字、字体相关样式

盒相关样式

新增背景、边框相关样式

变形处理

动画

过渡

@media：媒体查询

Sass/Less/Styls

变量

嵌套规则

混合器

选择器继承

Flex/Grid布局

Flex

flex container

flex-direction

flex-wrap

flex-flow

justify-content

algin-items

align-content

flex item

order

flex-grow

flex-shrink

flex-basis

flex

align-self

Grid

grid container

display

grid-template-columns/ grid-template-rows

grid-row-gap/ grid-column-gap/ grid-gap

grid-template-areas

grid-auto-flow

justify-items/align-items/place-items

justify-content/align-content/place-content

grid-auto-columns/grid-auto-rows

grid-template/grid

grid item

grid-column-start/grid-column-end/grid-row-start/grid-row-end

grid-column/grid-row

grid-area

justify-self/align-self/place-self

经典布局

圣杯布局

双飞翼布局

左右两侧布局

上中下