这是我参与「第四届青训营 」笔记创作活动的的第2天

本文是面向CSS小白的笔记，几乎没有代码，重在理解

CSS简介

CSS是对HTML骨架的修饰

CSS对HTML骨架的修饰，有少部分简单的，可以直接通过HTML标签option实现，但更多的无法仅用HTML实现

引入方式

内部样式表

和HTML在同一个文件中，一般写在head标签的末尾（理论上都可），用style标签包括起来，而HTML搭建的骨架写在body标签中

这种方法和HTML代码大体上分离开了，又称嵌入式

行内样式表

直接在某标签的option位置写上style=”键值对”，这种方法没有把CSS和HTML代码分离，只用于简单的修改样式

外部样式表

用文件的方式引入CSS，在HTML文件外新建一个CSS文件，在该文件中直接写CSS代码，无须任何标签

在HTML文件head标签末尾使用link标签链接CSS文件，语法为：

 《link rel=”stylesheet” href=”css文件路径” 》

这种方法完全将CSS和HTML分离，使用最多

注意在引入的时候路径如果是在同一文件夹下一定要写./，否则可能引入不成功

网页元素种类

网页元素有多种多样，不同种类的元素在排版和属性上有较大的区分

Div和span是不同类型的代表

块元素

 

虽然块元素占一行，但并非意味着宽度是一行，如果改变背景色，并非一行全变色，要根据宽度而定

块内元素位置

块的宽度是可调的，随之衍生的问题：内容物放置在块的哪个位置？

默认是从顶层开始放置，如果想要文字垂直居中，可以调整行高，一行文字就行高=块高

注意，行高设置不适会导致文字超出本块，侵占其他的块

 

行内元素

 

行内元素宽度不可修改，但是内容的多少大小可改，宽度由此而定

行内块元素

 

行内块元素排列时之间会有一个空隙，为父盒子加上text-align：center，其内的行内（块）元素都会水平居中

元素种类转换

以选择器修改某标签属性时，同时可以修改其元素类型，只需要在键值对放置处（大括号内）说明即可：

display:block

display:inline

display:inline-block

CSS三大特性

层叠性

对相同选择器进行不同的属性指定，采用就近原则，哪一个修改离使用其代码最近，即应用哪一个修改

继承性

子代可以继承父带的一些特性，主要是text，font，line族特性

优先级

基础选择器

对于同一实体对象用不同选择器指定了不同的属性，有优先级之分

 

越往下，优先级越高

相同种类选择器就使用就近原则（层叠性）

最后一项的使用方法是在键值对后加上！important，则该属性特殊，优先级最高（不影响该选择器内其他属性）

复合选择器

对于复合选择器来说，其权重是叠加计算的，例如后代选择器的权重即比单个标签选择器大

选择器

语句结构如下：

选择器 {键值对1;

键值对2;}

首先指定修改哪个对象性质，然后以键值对的方式修改其属性，键值对内部使用冒号，不同对使用分号隔开

 

基础选择器

类选择和标签选择就是作用对象是单个标签和一类标签的区别，因此类选择器优先级更高

标签选择器

用一个标签名作为选择器，能且只能修改所有的该标签属性

类选择器

定义一个具有一定属性的类，使用标签时调用该类，可以针对某一个具体的标签对象修改其属性

使用语法：

Head中：

.类名{键值对1;

键值对2;}

Body中（使用标签时）：

 《标签 class=”类名” 》

一个标签可以选择多个类，语法格式为class=”类1 类2…”

Id选择器

通过定义id的方式来修改属性

语法格式：

Head中：

#id名{键值对1;

键值对2;}

Body中（使用标签时）：

 《标签 id=”id名” 》

Id和类区别在于一个id只能调用一次，仅供一个标签使用，而类可以调用无限次

通配符选择器

语法格式：

Head中：

*{键值对1;

键值对2;}

其中*是通配符，则所有的标签均被选中，这种方式用于修改页面中所有标签的某些属性

复合选择器

以基础选择器为基础，更加精确

后代选择器

是标签选择器的升级版本，可以指定所改变属性标签的上一级以致更多级的标签

例如：仅想要修改类为green的div中的p标签属性，而不影响其他的p标签

语法格式为

祖标签.类名 后代标签{

}

后代和祖之间不一定是直接血缘关系，可以写两层以上的generation类名是可选项

子选择器

子选择器和后代选择器很相似，不同之处在于generation之间必须是直接血缘关系，即不可跨带

语法格式：

祖标签.类名 》后代标签{

}

例如div p指的是div下所有的p，而div 》p指的是div下面一级的p

并集选择器

用于同时为多个标签修改属性，语法格式为

选择器1,选择器2{

}

其中选择器1,2可以是简单的标签选择器，也可以是后代或子选择器

链接伪类选择器

专门针对链接标签的选择器，对于链接来说，可能需要一些特别的属性：鼠标悬浮时变色，访问过后链接变色，这些属性是只针对a存在的，因此用特殊的选择器修改

改变这些属性需要用到链接伪类选择器

语法格式为：

a:属性{

}

 

在style中，需要按照lvha的顺序规定这些属性

a标签的属性和h一样，是无法通过修改body来修改的，需要专门指定

可以修改指定class或者标签的属性，语法格式是将上式中的a替换为.class

:focus伪类选择器

用于修改某个标签所对应内容被焦点（光标）选中之后的状态属性

语法格式：

标签名:focus{

}

其中标签名通常是input

属性选择器

可以选中含有特定属性的某类标签

 

Class也是一种属性

结构伪类选择器

对标签的子元素进行选择（即，应该配合后代或子选择器使用）

 

注意nth的n不替换成数字，保持字母n原样

后面括号中的n需要替换成数字或者关键字或者公式

关键字可以是：odd，even

使用公式则默认n代表了变量，是从1开始的自然数

因此odd等效于使用公式2n-1，even等效于2n

Child系的操作原理是：将父元素的所有子元素全部排列，然后取第一个（需要检查是否为E类型，因此如果子元素E类型前有其他类型元素，通过child方法无法选出来

Type系方法则可以

伪元素选择器

通过CSS方法，创建新的标签元素

语法：

父元素：：before/after{

Content=‘’}

要点：需要指明该创建元素的父元素和是在头还是尾创建

创建元素默认为行内元素，且必须要写content=‘’这一属性
\

可修改属性

一个标签的可修改属性修饰了该标签的外在表现

 

Calc辅助函数：calc（算式）可以实现加减乘除的算式作为属性值

文本颜色：color

和背景色的操作方法一致

模糊内容：filter

语法格式：filter：blur(npx)

可以让显示内容变模糊，模糊程度和n成正比，通常用于图像

鼠标样式：cursor

 

一种类似hover修改方式的属性，可以改变光标落在标签上的样式

“移动”即十字架形

元素和文本对齐：vertical-align

对于行内（块）元素，如果和文字在一行上，默认是二者的基线（文本靠近底线的线）对齐

 

可以修改为middle使得二者的中线对齐

图片撑开盒子时，盒子的高度会略高于图片，也是因为基线对齐的缘故，底线对其则高度一致

使用line-height使得文字垂直居中，由于图片和文字默认基线对齐，当二者高度差别不大时，图片也显示为垂直居中，但当图片过大就失去了效果，因此最好直接指定middle中线对齐

表单属性

文本框轮廓

默认的input框点击之后在边框外会显示轮廓，取消方式：

Outline：none/0

文本域大小变化

默认textarea的大小可以在右下角拖拽使其变化，取消方式：

Resize：none

复合属性

一类属性被称为复合属性，可以用特殊规定的方法代替键值对写法达到简化代码的目的

背景 background

背景色：background-color

纯色

 

颜色的表示有三种方式

1.    用一些默认的英文单词

2.    #+十六进制数字 是一种颜色编码

3.    Rgb编码，格式为rgb(a,b,c)

例如红色为rgb(255,0,0)

在VS中有可视化处理

默认背景色是transparent

半透明色

用rgba(r,g,b,a)来表示半透明色，a代表颜色深度，1为全色，0为全透明

背景半透明色和背景色两个属性是冲突的，后面设置的属性会覆盖前面的

渐变

线性渐变：linear-gradient（起始点，终止点，起始颜色，终止颜色）

起始/终止点用top等方位表示

背景图片：background-image

键值对后者格式为：url（URL），没有背景图片默认为none

背景图片和插入图片可以实现相同效果，但各有使用特点，背景图片更易控制图片位置

精灵图技术：即将一些小的背景图片合成一张大图片，方便数据传输，使用时利用背景图片超出盒子大小部分不显示这一性质，调整图片位置，使得需要的图片包括在盒子内，不需要的部分溢出

图片和盒子默认是左上角对齐，x，y分别代表了向右，下移动的距离

背景图片平铺：background-repeat

背景图片大小和块大小不一致，会出现自动平铺（图片重复以布满块）

调整是否平铺用属性repeat

包含的值有

 

背景图片位置：background-position

有两种表达方式，一是使用约定俗成的值（下二），二是使用百分比

 

使用约定俗成的值时，竖直和水平方向不用分先后

使用具体数值，顺序为x y

两种方式都是：如果只写一个，另一个默认为居中对齐

两种表达方式可以混用

背景固定：background：attachment

 

滚动和固定的含义：

将屏幕当做一架固定不动的相机，网页浏览则是一幅画卷上下移动的过程，因此固定意味着背景图片不随画卷的移动而移动，一直显示在屏幕上，而滚动意味着背景图片和画卷一起移动，可能从屏幕上消失

因此此处的固定并非指背景图片固定在画卷上，而是固定在浏览窗口上

字体 font

font : font-style font-weight font-size/line-height font-family;

顺序不可更改，属性之间用空格隔开

Style和weight line-height属性可以省略，其余不可省略

字体种类：font-family

字体可以写多个，中间用逗号隔开，多个单词表示的字体用字符串’’包括起来，系统会顺位检测字体是否存在，存在则使用

 

字体大小：font-size

字号的单位是px，一般字体大小在16px左右

每个浏览器都有自己默认的字号，最好自己规定字号大小

可以针对body整体用标签选择器修改字号大小，但是其中的h（标题）不受影响，需要特别针对其修改

字体粗细：font-weight

粗细有两种表示方法，一种是用英文单词normal，bold，lighter等表示，另一种是用数字表示，范围是100-900，其中400对应normal正常字体，数量越大字体越粗

字体是否倾斜：font-style

只有两种，倾斜和不倾斜，normal和italic

 

放在标签em中的字默认是倾斜的，而其他标签中的字是不倾斜的，可以用标签选择器修改em的默认属性

行高：line-height

行高单位是px，包括了文本高度，相同的上行距和下行距，多行文本的行间距其实就是上行距和下行距之和，因此可以通过调整行高来调整行间距

对于块元素来说，一行文字行高等于块高，该文字垂直居中

行高的单位还可以使用数字，表示行高是当前字体大小的多少倍

文本 text

文本对齐：text-align

左对齐，右对齐，居中对齐

Left，right，center

默认左对齐

文本划线：text-declaration

 

None常用于为链接标签a去除默认的下划线

文本缩进：text-indent

用于调整标签内文本的第一行的缩进，可以使用绝对单位px和相对单位em，1em代表当前本文种类的一个个体大小，缩进可以设置为负值，这样做一部分文本无法显示

文字阴影：text-shadow

 

文字省略：text-overflow

首先对于中文字来说，当文字横向宽度超过盒子宽度时，会另起一行来显示（如果高度足够的话），此种属性由white-space来确定，默认值normal，如果想要不换行，超出盒子范围显示则改为norwap

对于英文字来说，则永远都不换行（中英混杂就看接触到边框的是哪种字符）

如果想要效果：当文字大小超出盒子大小时，用省略号代替后面的内容，需要以下三步设置：

1.white-space：norwap（不自动换行）
2.overflow：hidden（隐藏溢出的部分）

3.text-overflow：ellipsis（省略号）

多行文字省略则使用以下代码（或许会有兼容性问题）：

 

列表 list

元素圆点：list-style

消除圆点用none

盒子模型

边框 border

由于边框的三种属性单位不一样，因此复合写法中顺序不一定

表格的边框可以通过html设定，但最好还是通过css设定

边框的宽度不计入div的总大小，因此盒子显示的大小不会小于设定的大小

边框可以分开指定上下左右的性质，方法是使用border-上下左右的复合写法

边框小三角

如果一个盒子的大小为0（块类盒子，如果不设置宽度，默认和父元素一样宽，因此需要手动设置，高度默认为0），但有边框，那么边框会占据整个盒子，如果边框颜色不同，则会呈现这种效果：

盒子的大小和边框的宽度有关，

将三个边框颜色都设为透明（透明不是隐藏或消失，仍然可以用hover捕捉），即可实现小三角的制作

改变边框的粗细，可以实现任意直角三角形的制作

边框粗细：border-width

边框样式：border-style

默认为none，即为无边框，此时和width无关

实线边框为solid，虚线为dashed，电线为dotted

边框颜色：border-color

边框合并：border-collapse

值为collapse

将两个相邻边框的邻边合并在一起，常用于写表格内单元框，使其和表格外框相同粗细

圆角边框：border-radius

将直角边框变为圆角，可设定圆角所在圆的半径，根据半径的大小，可以生成圆角，也可以完全成圆弧，四个角可以分别设置

内边距 padding

跟上下左右四个后缀，分别设置边框和内容之间的距离，复合写法如下：

 

盒子的显示大小是设置大小+内边距+边框，因此显示大小不会小于设置大小

如果一个块元素没有指定宽度（宽度继承父容器）或者高度，此时padding不会撑开盒子

外边距 margin

使用方法和内边距padding一致

对块元素来说，想要居中对齐，可以先设置width，再将margin设置为auto，对于行内块或者行内元素则需要在父容器将text-align设置为center

外边距塌陷

当父元素和子元素都有上外边距时，会产生外边距塌陷，即二者合并为父元素外边距（合并方式为取其中较大的）

浮动元素不会有此问题

 

负外边距

设置负外边距可以使两个盒子部分重叠，应用场景是使两个紧挨的盒子边框重叠，使得中间边框宽度不会成为两边的两倍

但是两者边框有压制关系，下方边框变色可能不会显示出来，如果需要显示可以提升下方层级，或是增加相对定位

内外边距清除

因为有些标签有默认的内外边距，因此css布局之间习惯性先用通配符选择器做一个清零

由于不同浏览器的默认样式可能不同，一般CSS都会进行一个初始化（边框也是其中之一）

盒子阴影 box-shadow

只能用复合属性的方式修改，顺序如下图

其中blur指阴影的虚实程度，inset可写，但outset为默认且不可写

 

盒子类型

box-sizing有两个可选项，box-content和box-border

默认都是前者，盒子实际显示大小=width+border+padding

即，边框和内边距会撑大盒子

后者，则不会撑大，盒子实际显示大小=width

 

浮动 float

浮动可以让一个div浮动起来，典型应用是加上float之后实现多个div排列在一行

 

浮动性质

添加浮动之后的元素将会具有一些与标准流标签不同的性质：
浮动意味着该对象浮在了空中，和其他对象不在一个水平面上，因此浮动和非浮动对象在垂直方向上可以重叠，优先显示上层的浮动对象

不同浮动对象之间上沿对齐

注意：浮动只会影响在其之后的标准流，不会影响之前的

设置浮动之后的元素具有行内块元素的特点，且不需要进行类型转换

浮动不会压住文字内容（因为浮动最开始就是应用在文字环绕效果上的）

清除浮动

由于某些盒子不便于设置高度，而需要让高度随着子代个体占用高度的变化而变化，如果子代个体不浮动，那么上述功能可以实现，但如果子代个体是浮动，由于浮动不占据标准流位置，因此无法撑开盒子

清除浮动，即消除浮动的这个不占据位置的性质，使其能够撑开盒子

清除浮动所用到的style为clear: left/right/both

浮动不影响后面的标准流，但仅限于浮动给出了高度

添加额外标签

在一众浮动元素的末位（仍在父元素中）添加一个块级元素空标签，并且在其style中清除浮动即可

父元素修改overflow属性

 

采用这种方法如果浮动元素溢出了父元素，溢出部分无法显示

定位

定位是一种摆放网页元素的方式，含义为直接指定某个元素的位置

定位包含了定位模式（以什么方式）和边偏移（位置在哪）

定位模式：position

 

修改定位属性的键为position

定位（相对定位除外）和浮动将行内元素/块元素转化为了行内块元素，可以设置宽高，默认大小和内容一样大

定位元素会压制住标准流的所有元素

静态定位

静态定位属性对盒子的位置不影响，意义在于对盒子赋予了一个定位的属性，和标准流和浮动盒子区分开来

相对定位

指相对于没有使用定位的该盒子移动的距离，这种移动和加浮动属性不一样，移动后原本盒子所占位置保留，移动后和浮动一样，不挤占其他标准流的盒子空间，而是覆盖显示

绝对定位

可以指定相对于最近的有定位祖先元素，偏离其边缘的距离

注意点在于需要改祖先元素有定位，因此有时即使祖先元素不需要移动，也要为了后代元素为其添加一个定位属性

如果没有有定位的祖先元素，则相对于整个页面操作

绝对定位元素不占有原有标准流的位置

子绝父相是一种常用的利用定位的方式

绝对定位盒子实现水平/垂直居中不能用auto，需要用

left/top：50%

Margin-left/top：-一般盒子宽度/高度

固定定位

指参照物是浏览器窗口的定位方式，即不论窗口大小，浏览条如何变化，固定定位元素一直在视野的同一个位置

可以调整固定定位元素的位置，让其和其它盒子也保持一个相对位置不变的关系

固定定位盒子不占有位置

粘性定位：sticky

和固定定位一样以浏览器窗口为参照物，但是top等元素下的距离代表粘性定位元素离边框的最短距离，本身盒子摆放时的位置如果没有小于该距离，是不会移动的，因此随着页面滚动，距离达到了最小，就会固定在页面上了

粘性定位盒子占有原本的位置

显示优先级：z-index

不同的定位元素重叠时用z-index属性指定谁优先显示，z-index值越大，越优先显示，值相同，遵循就近原则

只针对定位元素有用

 

边偏移

 

注意此时的top等不是值，是键

边偏移可以是负数

元素显示和隐藏

隐藏的元素都无法使用：hover来选中

Display

block/none分别代表显示和隐藏，隐藏之后该盒子不再占有原来的位置，相当于消失了

Visibility

visible/hidden /inherit 分别代表显示，隐藏和继承，隐藏之后盒子位置仍然在，只是看不见

overflow

处理溢出内容时考虑的属性：

 

转换 transform

转换和定位类似，即在原本的位置上发生变化

可以添加多个转换，但顺序会影响呈现 效果，通常先写位移

3D多个转换必须合并写，并且平移写到最前

Transform 1 2 3

而不能

transform 1；

Transform 2

2D转换

平移：Translate

 

 

转换配合定位可以简单地实现垂直，水平居中

旋转：rotate

Transform：rotate()

单位用deg（degree）

可以设置旋转中心点（默认是中心）

Transoform：x y

X，y可以是像素，百分比，方位名词

放缩：scale

接收两个参数（百分数），分别代表了横纵向的放缩比例

3d变换

盒子可以看做是在三维直角坐标系上的一张纸面，X轴为横轴，Y轴为数轴，Z轴为面向用户的轴

因此通过围绕X，Y轴旋转，沿着Z轴平移等操作，可以使得盒子脱离原本的二维平面，在三维空间中运动

如果再配合父元素加上perspective属性就能完完全全呈现3d效果

3d平移

 

透视是人眼到屏幕的距离，z轴高度是物体到屏幕的距离（模拟情况）

3d旋转

 

旋转的中心轴是该元素原本的中心（如果先平移再旋转，中心轴不改变）

三维立体空间

Transform-style：preserved-3d

即保持子元素3d效果（添加在父元素的css中）

在父元素发生变化时（例如旋转），子元素如果此时在3维空间中，不加以上语句，会回归2d模式

属性过渡

鼠标放到某元素上，实现该元素的变化的过渡效果

原效果写在（类/id/标签）选择器style中，新效果写在hover选择器中

过渡效果的声明写在原style中，语法为transition：属性 过渡时间 过渡方式 延迟时间

属性即希望产生过渡变化的属性，如果写all则所有在hover中规定的属性都过渡，过渡时间必须接s为单位，过渡方式有线性，非线性等，延迟时间默认为0

动画

过渡一种实现动画效果的方法，还有一种专门实现动画效果的方法，功能更加地强大

首先需要定义动画，然后调用动画，都在CSS中完成

定义：

@keyframes 动画名{

百分比1{状态1}

百分比2{状态2}
}

实际上这就是一个关键帧动画，可以设置无限多帧

调用方法（必要的属性）：

Animation-name：

Animation-duration：

前者调用，后者确定动画完成时间

可选属性：

 

其中animation-timing-function的一个属性为steps（n），代表了该动画以n步执行，n=1就是直接变换

字体图标

不是图片的图标，可以设置字体属性

用处在于可以随意修改颜色大小，不用考虑分辨率问题

引入

首先图标需要在图标网站上下载，解压后放在网页文件同根目录下，在style中引用，引用代码直接从下载文件夹中的CSS文件中获取

使用

仍然在文件夹中找到demo文件，从中复制下载的图标（此时图标看上去并未成形）放入html的文本中，然后在引用代码中找到该字体的family-name，用CSS的方式为该图标添加，在浏览器中显示出来即是想要的图标

追加

想要在原本的字系统上追加图标，基本操作和初次使用一致，原理就是在原本文件上追加内容，但CSS代码不变，只不过这部分追加操作，让字体图标下载网站帮我们实现：先将原本的文件上传，再追加一部分图标，再下载追加后的文件使用

网站设计搭建

模块化

Css和html文件分开，且css也分为多个文件，有公有样式（多个页面都可能调用到的类样式）和独立样式，都写成类的形式，要用到就类名调用

Favicon图标

浏览器窗口中对应网站的特色图标，使用方式参见html笔记

TDK标签

分别表示title标签，meta.name=description标签，meta.name=keywords标签，都存放在head中，这三个标签是对网站的说明，会影响网站在浏览器中的搜索排名

版心

整个界面会有一个版心宽度，即内容只限定于此宽度内，因此在处理上中下盒子时，都会有一个版心盒子约束，可以设置一个版心类，之后所有为版心约束的盒子都可以在调用属于自己类的同时调用版心类

版心是宽度的限制，并非一个上下通透的盒子

导航栏

如果导航栏文字在两边可以用浮动，父容器行高可以继承到子容器，因此在最外层既可以设定高度和行高，保证最后li中文字垂直居中

分割竖线

如果需要竖线分割导航栏各个单元，并且两边字体离竖线还一样宽，则可以用一个宽度为1的盒子（li）加上外边距和背景颜色实现

单元

作为行内元素的li和a，一般不给宽度，让内容来撑开后加padding

头部

头部logo，搜索框等元素的排放可以使用子绝父相实现

搜索框

搜索框和搜索按钮应该用表单控件来实现，外面用盒子包裹实现定位

内部使行内块元素之间紧贴，为其添加浮动或者定位

搜索框是自带边框的

文字旁的小图标

可以用伪元素选择器，通过父盒子在文字的左右添加小图标比较方便

消息提示符

可以使用3个圆角边框+1个直角边框做，不给宽度，让其中的内容撑开

图标旁的文字

文字不会和浮动元素重合，利用这个特性，可以给图标添加一个浮动，旁边写上文字（文字可以用一个盒子包裹，但该盒子不设置宽度和高度）

下拉菜单

下拉菜单的制作可以是一个小盒子装着大盒子，小盒子空间存放菜单头，大盒子存放下拉菜单，注意，此时溢出的大盒子不占有外部的空间，即：其他和小盒子平行的标准流可能会覆盖大盒子

溢出限定于父盒子给了大小的情况，如果没给出大小，则子盒子（标准流）会撑开父盒子，则不存在溢出

表格

表格效果可以使用浮动的li实现（给li加上半边的边框），溢出的li会自动挤到下一行

Tab栏

点击切换下方显示内容效果的实现：tablist下有一个tabcontent盒子，只能容纳一个内容的大小，但该盒子中应该存放所有的内容，溢出内容不显示，由于溢出内容不占有父类等级的其他盒子的空间，因此也不会影响tabcontent下方其他内容的摆放

登录界面

输入登录信息的表单元素包含三个部分：输入类型（账号，密码等），输入框，提示信息（格式正确，错误等）

首先所有的表单元素用div包括，每个元素可以做成一个li，li中有三个行内块元素，其中输入类型可以用label标签（行内转行内块），做成对输入框的连接

移动端开发

移动端的窗口大小和PC端差异较大

Edge浏览器调试工具左上角按钮将目前状态在PC端和移动端转换，还可以调整窗口的尺寸

移动端开发主要分为两种方法：1.单独制作移动端页面，相同域名根据设备去往不同网站

2.制作响应式页面，PC和移动端访问同一网站

分辨率和像素

像素是影像显示的最小单位，像素堆叠成了屏幕，图像，像素的大小是会变化的，像素多少只反映了格子的个数，不反映每个格子和总体的大小

图像显示在屏幕上，只有一种大小时，图像像素和屏幕像素是一一对应的关系，此时二者大小相同，图像可以缩小和放大，则会根据算法进行像素的删减和复制

分辨率指单位面积内，像素的个数，分辨率越大，像素越多，图像越清晰

网页像素和物理像素

物理像素指物理上构成显示屏的最小单元（不同设备的物理像素大小不一定相等），网页像素指书写样式时指定宽度和高度时用的px，在PC端，二者一一对应？，在移动端，一般一个px对应多个物理像素（移动端的物理像素大小一般比PC端小，换言之，移动端的分辨率更高）

因此，不同设备的开发尺寸和物理像素有区别：

视口

布局视口

只供移动端使用的网页，通常使用初始化normalize.css文件（官网下载）

流式布局

流式布局即百分比布局，使得页面元素宽度随着设备大小变化而变化，但占比不变，实现了响应式效果

可以用属性max/min-width规定一个宽度限制，缩放超出最大宽度填白，小于最小宽度加横向滚轮

流式布局中也可以根据需要固定一些元素的大小，如按钮等本身就较小的元素

二倍精灵图

精灵图如果需要放缩的话，背景图片的位置也相对应发生变化，合适的做法是现在草稿上放缩之后找到对应图标的位置，再在代码中放缩并定位

Flex布局

即弹性布局，给父元素添加display：flex属性可以让子元素类浮动显示，且子元素设置浮动失效

Flex布局的特有属性设置针对父元素和子元素的均存在

父元素属性

Flex-direction

设置子元素排列顺序和主轴（x还是y）

 

Justify-content

设置子元素摆放格式（延当前主轴）

 

Flex-wrap

Flex子元素不会自动换行，也不会溢出，如果宽度超出，就会自动压缩子元素的宽度

 

Align-items

设置副/侧轴的摆放格式（单行/列），对多行无效，和justify-content类似，stretch指在副轴方向尽可能拉伸盒子，前提是不给子盒子高度/宽度，否则无效，

 

Align-content

设置副/侧轴方向上多行/列元素的情况，对单行无效

 

Flex-flow

是direction和wrap的复合写法

 

子元素属性

Flex

使用格式：flex：number

表示将父盒子在主轴上的剩余长度分成sum（number）份，而该盒子占number份

剩余长度：指除了固定长度盒子之外的剩余长度（所有写上flex：number的元素都不计入）

Sum（number）：所有写上flex：number的元素的number之和

Align-self

设置单个元素在侧轴上的摆放方式（居中还是靠边等）

Order

Order越小，排列越靠前，order相同，则看结构中的顺序（html书写顺序）

Rem布局

适配方案1

Less+媒体查询+rem

Rem

Rem和em一样是大小的一种相对单位（rem可替换所有的px），em是相对于父元素字体，rem是相对于html标签中设置的字体大小（但可以不止用于设置字体大小）

媒体查询

可以通过媒体查询语法利用当前屏幕大小的信息改变页面布局

语法：

@media screen and （宽度信息）{

函数体（修改信息）

}
其中宽度信息：

 

如果有多个宽度信息，则用多个括号用and/or等逻辑运算连接

例如通过媒体查询修改html的font-size大小，进而修改页面元素的大小

注意媒体查询的代码中的修改信息仍然是CSS选择器修改，因此遵循优先级原则

通过设置多个媒体查询，可以较为顺滑地实现页面元素（包括高度）动态变化

引入CSS文件

当屏幕宽度改变，界面盒子摆放出现较大区别，需要对CSS文件进行较大改变时，可以用媒体查询的方式引入CSS文件

使用方法

首先通过媒体查询，对不同区间的屏幕大小给出一个html字体大小，为了满足等比例缩放，给出：font-size（html）=屏幕大小/规定倍数

而在对页面元素规定大小时，统一使用rem单位，计算rem的数量的方法为：rem=页面元素大小（在特定屏幕大小下）（px）/font-size（在特定屏幕大小下）

原理：规定倍数是将页面总体分为多少个rem，而需要我们给出元素占了多少个rem，则这个比例关系通过特定情况下页面总大小和元素大小的关系得到

适配方案2

Flexible.js+rem

Flexible.js是一个js文件，内部原理也是根据屏幕大小修改html字体，进而使用rem调整页面元素大小

使用方法

首先需要用script标签引入flexible文件

flexible默认的倍数是10，根据这个倍数书写css文件，但是计算rem值时不能使用算式（因为不是less），需要用到vscode插件cssrem进行转换

限制最大宽度

由于flexible.js对于所有的宽度都是做成10个rem，但是移动端一般有最大宽度，所以可以在css文件中写一个媒体查询限制750px以上的屏幕扩展，注意为该修改赋important最高权重，使其覆盖掉flexible中的修改

cssrem配置

由于cssrem转化px和rem是有一个默认的对应关系的，而开发中个根据需要这个关系是会改变的，因此需要修改这个默认关系

方法：
文件/首选项/设置/扩展/cssrem configuration/修改root font size（其实就是修改为html的font-size）

Vw/vh

新兴移动端布局模式，vw/h是单位，大小为当前视口的百分之一，w是宽，h是高

响应式

页面布局根据设备屏幕大小会发生变化

不同大小的设备大致可划分为：

 

具体方法是，利用媒体查询，对不同屏幕大小的情况，改写页面不同的CSS结构

Bootstrap

一个代码库，存放了已经写好的各种网页元素，只需要引入该代码库，即可在网页中插入一些写好的元素

Bootstrap库中有CSS和JS的内容，两者都可以使用外部样式表引入，因此需要先在官网上下载bootstrap的文件包

引入bootstrap后，一些初始化设置会不同（例如内外边距已被清除），另外就是可以使用定义好的类

Bootstrap3.0是偏向开发响应式布局的，很多元素都有响应式

不仅是元素，bootstrap还给了一种适用于页面整体布局的响应式方法

即：container盒子被竖向划分为了12份，元素的宽度可以取整数份，由此实现响应式效果（占份数），具体的方法如下：

Container类

这是一个在bootstrap中已经通过媒体查询布置好的适合响应式布局的类，宽度比屏幕稍窄一点

Container-fluid：适用于移动端开发的类，视口大小和永远和屏幕一样宽

Row类

Container并不是直接被竖向划分，先横向划分为不同的row类盒子（符合开发习惯）

Row必须放在container内才能发挥作用

Row类可以消除container的padding

竖向划分

在每个row中，就可以进行竖向划分了

方法是为盒子添加类名为：

 

类前缀后面跟着该盒子所占份数，如果一个row中所有盒子加起来不足12份，则会有空白，如果超过12份，则会有盒子因挤压掉落

想要实现响应式效果，就给一个盒子在四种情况下的类名，则不论根据屏幕大小的变化，四种类中的其中一个被应用在盒子上

注意屏幕分区仍然是一个不闭合的区间

列嵌套

一个列盒子可以当成container盒子使用，内部还可以放row，并分成12等份

列偏移

用于解决元素不紧贴的情况

 

*代表偏移的份数

列排序

用于实现元素的改变顺序

 

Pull代表向左，push代表向右，添加以上类后，会相互覆盖（和绝对定位一样）

显示和隐藏

根据屏幕大小变化，某些元素不仅改变占比，还可能直接隐藏（使用0份大小相当于12份），此时使用以下类标注

 

注意，设置某个屏幕下隐藏，则同时其他屏幕下可见，当然可以选择多个类名对应多个屏幕下隐藏

Hidden可换成visible，实现相反的效果

手动划分层次

Bootstrap的层次划分也是通过媒体查询来做的，因此可以手动划分，只不过在使用hidden-md等属性时，手动划分的档没有相对应的属性，只能归为bootstrap划分的档使用，例如规定屏幕超出1500px时，container大小为1400px，但是此时盒子的分布还是只能遵循col-lg模式

Column内元素响应式

Column内就可以使用正常的开发手段，响应式的实现就是利用流式布局（百分比）

字体图标

Bootstrap中提供了许多字体图标，使用方式：1.引入css文件2.在官网上找到想要的图标，复制其名字3.将图标名作为类名，添加到元素，则该元素会被添加一个before伪元素，即该图标

字体图标所在fonts文件默认在为../fonts，如果不是，则需要link指定引入

清除浮动

使用封装好的类名Clearfix

 

Less

Less是在CSS语法的基础上开发的语言，增添了变量，计算等功能

Less语言的使用方法为：用less书写css样式- 》编译为css代码- 》引入html文件

在vscode中编译less代码的插件为easy less，每保存一次less文件，一个对应的css文件就会生成（或被修改）

变量

由于css不涉及复杂的逻辑运算，这里使用的变量更类似于const var或者#define功能

使用变量的目的在于，只需要修改变量的定义位置，即可同时修改所有变量的使用处

变量定义：
@变量名 = value

变量名不可用数字开头，不可包含特殊字符，区分大小写

使用：
属性 = @变量名

嵌套

嵌套是对于后代选择器的简化书写

可以将后代选择器中的后代单独用一个选择器写到祖先选择器花括号的内部：

 

如果遇到伪类（：hover），则将在伪类前加上&也和后代一样处理

运算

Less中支持css不支持的运算能力

 

导入

语法：

@import “文件名”

 

PS

图层提取

PSD是PS的专属格式，在PSD图片中，可以提取其中的图层，文字等，也可以进行图层隐藏等操作

点击某个图层，则右下角就会选中，可以导出该图片用作网页制作

图层不是图片，可以重叠，如果想要的图片包含不止一个图层，则用按住shift加选后合并图层再导出

切片工具

左侧栏中找到剪裁按住，选择其中的切片工具，选中想要的图形后左上角文件/导出为web所用格式/选择jepg/储存/只保存选中的切片

如果不想要背景图片，则可以在图层最下方去掉背景

Visual Studio Code

颜色的表示在VS中有可视化处理，鼠标放在颜色格上还可以在可视化界面上选择颜色

右键可以快速格式化文档，解决缩进等问题

快捷键shift+alt+f

浏览器调试工具

以Microsoft为例，快捷键f12或者鼠标右键+检查可以打开开发者工具，在此可以看到该页面的html和css代码，可以在代码和页面之间进行对应搜索，也可以当场调试代码观察页面效果变化

Emmet快速生成

主要用于快速生成键值对，例如width:100px的快捷写法是w100