CSS 思维导图模板_ProcessOn思维导图、流程图

初识

简介

CSS通常称为CSS样式表或层叠样式表（级联样式表），
主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、
图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，
而且还可以针对不同的浏览器设置不同的样式

样式规则

CSS注释

/* 需要注释的内容 */

书写位置

内部样式表

行内式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

外部样式表

三大特性

层叠性

1. 样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。

2. 样式不冲突，不会层叠

继承性

子标签会继承父标签的某些样式，如文本颜色和字号

特殊性（Specificity）

基本优先级

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

继承贡献值

每个元素（标签）贡献值为0,0,0,1

每个类，伪类贡献值为0,0,1,0

每个ID贡献值为0,1,0,0

每个行内样式贡献值1,0,0,0

每个!important贡献值∞ 无穷大

优雅降级、渐进增强

单位

相对长度

em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px

ex 依赖于英文字母小 x 的高度

ch 数字 0 的宽度

rem rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小

vw viewpoint width，视窗宽度，1vw=视窗宽度的1%

vh viewpoint height，视窗高度，1vh=视窗高度的1%

vmin vw和vh中较小的那个

vmax vw和vh中较大的那个

%

绝对长度

cm 厘米

mm 毫米

in 英寸 (1in = 96px = 2.54cm)

px * 像素 (1px = 1/96th of 1in)

pt point，大约1/72英寸； (1pt = 1/72in)

pc pica，大约 12pt，1/6英寸； (1pc = 12 pt)

扩展：px、em、rem的区别

字体

样式

font-size：字号大小

font-family：字体

技巧

可以同时指定多个字体，中间以逗号隔开，
表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体

Unicode字体

宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
...

font-weight：字体粗细

值

normal、bold、bolder、lighter、100~900（100的整数倍）

技巧

数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示。

font-style：字体风格

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

综合设置

选择器{font: font-style font-weight font-size/line-height font-family;}

外观

color:文本颜色

取值

预定义的颜色值，如red，green，blue

十六进制，如#FF0000，#FF6600，#29D794等

RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)

颜色半透明(css3)

color: rgba(r,g,b,a)

a取值0—1

line-height:行间距

行间距 = 元素高度：垂直居中

text-align:水平对齐方式

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

1em 就是一个字的宽度如果是汉字的段落

letter-spacing:字间距

word-spacing:单词间距

文字阴影(CSS3)

text-shadow:水平位置垂直位置模糊距离阴影颜色

背景(background)

背景图片(image)

background-image : none | url (url)

背景图片后面的地址，url不要加引号

背景平铺（repeat）

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

背景位置(position)

语法

background-position : length || length

background-position : position || position

参数

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位

背景附着

background-attachment : scroll | fixed

参数

scroll : 　背景图像是随对象内容滚动

fixed : 　背景图像固定

统改

background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景透明(CSS3)

background: rgba(0,0,0,0.3);

背景缩放(CSS3)

background-size:length | cover | contain

参数

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

多背景(CSS3)

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px , url(test1.jpg) no-repeat scroll 10px 20px/70px 90px , url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

注意

一个元素可以设置多重背景图像。

每组属性间使用逗号分隔。

如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。

为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

案例：凹凸文字

标签显示模式（display）

块级元素(block)

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

行内元素(inline)

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

行内块元素（inline-block）

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

显示模式转换

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

选择器

基本选择器

标签（元素）选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

id选择器

id选择器使用“#”进行标识，后面紧跟id名

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

多类名选择器

标签指定多个类名

高级选择器

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果

li:nth-child(4)

li:hover

链接伪类选择器

:link /* 未访问的链接 */

:visited /* 已访问的链接 */

:hover /* 鼠标移动到链接上 */

:active /* 选定的链接 */

结构(位置)伪类选择器

:first-child :选取属于其父元素的首个子元素的指定选择器

:last-child :选取属于其父元素的最后一个子元素的指定选择器

:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型

:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，
不论元素的类型，从最后一个子元素开始计数。

n 可以是数字、关键词或公式

目标伪类选择器

用于选取当前活动的目标元素

:target { color: red; font-size: 30px; }

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分

只要逗号隔开的，所有选择器都会执行后面样式

.one, p , #test {color: #F00;}

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。

属性选择器

选取标签带有某些特殊属性的选择器

div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}

div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}

div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */ color: green; }

伪元素选择器（CSS3)

1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

2. E::first-line 文本第一行；

3. E::selection 可改变选中文本的样式；

4.E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

盒模型

简介

把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成

计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况

盒子边框（border）

border : border-width || border-style || border-color

边框样式（border-style）

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

其它

border-top

border-bottom-

border-left

border-right

表格细线边框

table{ border-collapse:collapse; }

border-collapse:collapse; 表示边框合并在一起

圆角边框(CSS3)

border-radius: 左上角右上角右下角左下角;

内边距（padding）

用于设置内边距。是指边框与内容之间的距离。

参数

1个值：padding：上下左右边距比如padding: 3px; 表示上下左右都是3像素

2个值：padding: 上下边距左右边距比如 padding: 3px 5px; 表示上下3像素左右 5像素

3个值：padding：上边距左右边距下边距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素

4个值：padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 顺时针

外边距（margin）

margin:上外边距右外边距下外边距左外边

盒子水平居中

条件

1. 必须是块级元素。
2. 盒子必须指定了宽度（width）

margis:auto

外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，
下面的元素有上外边距margin-top，
则他们之间的垂直间距不是margin-bottom与margin-top之和，
而是两者中的较大者

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，
则父元素的上外边距会与子元素的上外边距发生合并，
合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并

解决

1. 可以为父元素定义1像素的上边框或上内边距。

2. 可以为父元素添加overflow:hidden

盒子阴影

box-shadow:水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影；

CSS3盒模型

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

浮动(float)

简介

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程

浮动的盒子需要和标准流的父级搭配使用

浮动可以使元素显示模式体现为行内块特性

语法

选择器{float:属性值;}

参数

left：元素向左浮动

right：元素向右浮动

none：元素不浮动（默认值）

清除浮动

选择器{clear:属性值;}

参数

left：不允许左侧有浮动元素（清除左侧浮动的影响）

right：不允许右侧有浮动元素（清除右侧浮动的影响）

both：同时清除左右两侧浮动的影响

父级添加overflow属性

原理：触发BFC的方式

after伪元素清除浮动

使用before和after双伪元素清除浮动

定位(position)

静态定位static

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置

相对定位relative

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置

可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留

每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它（相对定位不脱标）

绝对定位absolute

特点

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位

可以通过边偏移移动位置，完全脱标，完全不占位置

如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)

绝对定位的盒子水平/垂直居中

原因

普通的盒子是左右margin 改为 auto就可，但是对于绝对定位就无效了

1. 首先left 50% 父盒子的一半大小

2. 然后走自己外边距负的一半值就可以了 margin-left

子绝父相

子级是绝对定位的话，父级要用相对定位

固定定位fixed

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。

2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

粘性定位sticky

依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置

叠放次序（z-index）

解决

多个元素同时设置定位时，定位元素之间有可能会发生重叠

特点

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

2. 如果取值相同，则根据书写顺序，后来居上。

3. 后面数字一定不能加单位。

4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

特点

元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式

行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了

伸缩布局（Flex）

简介

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目

结构

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换

结构图

容器（父元素）属性

flex-direction

调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

justify-content

调整主轴对齐（水平对齐）

值

flex-start 默认值。项目位于容器的开头

flex-end 项目位于容器的结尾。

center 项目位于容器的中心

space-between 项目位于各行之间留有空白的容器内。

space-around 项目位于各行之前、之间、之后都留有空白的容器内。

align-items

调整侧轴对齐（垂直对齐）

值

stretch 默认值。项目被拉伸以适应容器。

center 项目位于容器的中心。

flex-start 项目位于容器的开头。

flex-end 项目位于容器的结尾。

flex-wrap

控制是否换行，决定盒子内容宽度多于父盒子的时候如何处理

值

nowrap 默认值。规定灵活的项目不拆行或不拆列。

wrap 规定灵活的项目在必要的时候拆行或拆列。

wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

flex-flow

flex-direction、flex-wrap的简写形式

语法

flex-flow: flex-direction flex-wrap;

align-content

堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

和align-items的区别

前提

对父元素设置
display:flex;
flex-direction:row;
flex-wrap:wrap;

值

stretch 默认值。项目被拉伸以适应容器。

center 项目位于容器的中心。

flex-start 项目位于容器的开头。

flex-end 项目位于容器的结尾。

space-between 项目位于各行之间留有空白的容器内。

space-around 项目位于各行之前、之间、之后都留有空白的容器内

项目属性

order

用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是 0

flex-grow

一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink

一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

flex-basis

在分配多余空间之前，项目占据的主轴空间（main size）即项目的长度

合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字

flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

建议优先选择该属性，减少分别设置

align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto

值（解释同align-items）