导图社区 CSS 知识点之层叠样式表
层叠样式表是学习前端的三大基础知识，用来修饰网页的样式效果，该思维导图包含开发常用的知识点，值得收藏。
超文本标记语言（HTML），作为网页的结构语言，是前端学习的第一步。这个思维导图包括大部分的HTML知识点。
JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 JavaScript 非常容易学。 这个思维导图包括 JavaScript 从入门到进阶的知识点。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
属性
文字类样式
font-style
字体样式
italic 倾斜
bold 加粗
normal 无效果
font-weight
字体粗细
font-size
字体大小
font-family
字体
font: style weight size family 缩写 size 和 family 为必填项
font-face
自定义字体
颜色样式
color
英文单词
十六进制
rgb
opacity
透明度
文本样式
text-align
文本对齐方式
left 居左
center 居中
right 居右
text-decoration
文本修饰线
overline
上划线
line-through
删除线
underline
下划线
none
无效果
text-indent
文字首行缩进
line-height
行高
list-style
列表元素样式
text-spacing
文字之间的间隙
word-spacing
英文之间间隙
text-show
文本阴影
阴影颜色
offsetX
X轴偏移
offsetY
Y轴偏移
blur-radius
阴影模糊半径
值越大，阴影越模糊
text-fransform
文本大小写
lowercase
字母小写
uppercase
字母大写
capitalize
首字母大写
work-break
英文是否换行
normal
浏览器换行规则
break-all
允许在英文单词中换行
keep-all
不允许拆开单词换行
white-space
对象内文本显示
默认
nowrap
强制在同一行显示所有文本
text-overflow
需要与 overflow: hideen 和 white-space: nowrap 才会生效
文本溢出显示
clip
简单剪裁
ellipsis
文本溢出的内容显示为省略号
resize
防止文本域拖拽
转换样式
display
block
块级元素
inline
行内元素
inline-block
行内块元素
背景样式
background-color
背景颜色
linear-gradient
必须加上浏览器私有前缀
渐变色
background-image
背景图片
background-repeat
背景平铺
repeat
背景图片平铺
no-repeat
背景图片不平铺
repeat-x
repeat-y
background-position
背景图片位置
background-attachment
背景固定
scroll
背景随着滚动条一起滚动
fixed
背景图固定在浏览器某个位置
background: color image repeat attachment position 缩写
容器样式
margin
外边距合并： 两个容器的外边距相交， 会使用较大的外边距, 而不是两个容器的外编辑相加 可以给父容器设置 overflow：hidden
外边距
margin: 0 auto 可以使容器居中
padding
内边距
border
边框
border-width
边框宽度
border-style
边框样式
border-color
边框颜色
border-shadow
边框阴影
color 阴影颜色
offsetX X轴偏移量
offsetY Y轴偏移量
blur-radius 模糊半径
outline
轮廓 在边框外围
outline-width
轮廓宽度
outline-style
轮廓样式
outline-color
轮廓颜色
box-shadow
容器阴影
X轴偏移量
Y轴偏移量
模糊半径
spread
阴影半径
阴影方向
inset 内部阴影
outset 外部阴影
box-sizing
border-box
计算边框数据
content-box
不计算边框数据
布局样式
position
static
静态定位
用于消除其他定位带来的偏移
float
清除浮动影响： 在浮动盒子后面创建一个盒子， 设置属性 clear: both； 给浮动盒子的父盒子设置属性 overflow: hidden; 给浮动盒子的父盒子添加类名clearfix .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; }
浮动布局
relative
相对定位
在原来位置的基础上进行偏移，原来的位置会留下空白
absolute
绝对定位
移除正常文档流，元素不需要预留空间
子绝父相
flxed
固定定位
移除正常文档流，不会随滚动条滚动而移动 必须要有高度
元素样式
元素会被隐藏
普通文本
独占一行，可设置宽高
不独占一行，可设置宽高
flex
弹性容器
父盒子属性
flex-direction
子盒子排列方式
row
主轴为X轴
row-reverse
主轴为X轴，从右至左
column
主轴为Y轴
column-reverse
主轴为X轴，从下至上
justify-content
主轴上子元素排列方式
flex-start
主轴正向
flex-end
主轴反向
center
居中
space-around
平分剩余空间
space-between
两边贴边分配剩余空间
flex-wrap
子元素是否换行
不换行
wrap
换行
align-items
侧轴子元素排列方式 （子元素单行）
侧轴正向
侧轴反向
stretch
拉伸
align-content
侧轴子元素排列方式 （子元素多行，即换行）
space-evenly
容器与子元素之间的距离等于 子元素与子元素之间的距离
平分父盒子高度
flex-flow
flex-direction 和 flex-wrap 符合属性
子盒子属性
子元素占父容器的比例
order
子元素自己顺序的前后
align-self
子元素自己的对齐方式
grid
网格容器
将子元素转化为网格项
visibility
visible
元素正常显示
hidden
元素隐藏，但布局不发生改变，相当于元素透明
collapse
隐藏表格的行或列，并且不占空间
overflow
内容不会被剪切，超出容器的部分依然显示
超出容器的部分被剪切，超出部分不可见
查出容器的部分被剪裁，可以通过滚动滚动条查看
auto
由浏览器决定
鼠标样式
cursor
default
默认箭头
pointer
链接箭头
move
移动箭头
text
文本箭头
动画
transition
过度动画
transition: 动画属性 过度时间 运动曲线 开始时间
transform
转换
偏移
translate(x,y)
2d平移
translate3d(x,y,z)
3d平移
旋转
rotate
以元素中心作为原点进行旋转
rotateX
以X轴作为旋转轴进行旋转
rotateY
以Y轴作为旋转轴进行旋转
rotateZ
以Z轴作为旋转轴进行旋转
transform-origin
更改元素转换原点
backface-visibility
元素不面向屏幕是否可见
不可见
perspective
视距 眼睛看到物体的距离
视距越大，透明效果越不明显
animation
复杂动画
FBC
FBC即一个独立的渲染区域，内部布局对外部无影响
形成BFC
float 不为 none
display 为 absolute 或 fixed
overflow 不为 visible
BFC用途
消除内部浮动
使父盒子成为BFC
取消外边距合并
给其中一个盒子添加父盒子使其成为BFC
右侧盒子自适应
给左侧盒子添加左浮动，使右侧盒子成为BFC
特性
层叠性
继承性
优先级
优先级由权重决定
行内样式大于其他样式
!importan
权重无限大
ICT id-class-type
id > class > type ITC越大权重越大
继承权重为0
选择器
标签选择器
html标签
类选择器
calss名
id选择器
id名
通配符选择器
*
后代选择器
属性选择器
E[key]
多个选择器之间用英文逗号隔开
伪类选择器
结构
E:frist-child
父元素的第一个子元素E
E:last-child
父元素的最后一个子元素E
E:nth-child(n)
父元素的第n个子元素E 2n为偶，2n+1为奇
UI
a:link
未被点击的a元素
a:visited
被点击过的a元素
E:hover
鼠标停留在上面的E元素
E:active
被激活的E元素
E:focus
被聚焦的E元素
E:checked
被选择的E元素
E:target
在文档内跳转选中的E元素
伪元素选择器
E::before
在E元素前面创建一个伪元素
E::after
在E元素后面创建一个伪元素
伪元素相当于一个行内块元素
