一、CSS中的属性和取值

1.文本类属性：

text-align属性：此标签内容的水平对齐方式，内容须为具体文字/inline/inline-block标签，当同级内容有多个时，则是作用于它们整体，取值：left，左对齐，right，右对齐，center，居中对齐，当<img>的宽度大于其父标签的宽度时，不能通过给此<img>设置“margin: 0 auto;”/给其父标签设置“text-align: center;”来让此<img>相对于其父标签居中，但可以通过给此<img>设置“position: relative/absolute;  left: 50%;  margin-left: -标签宽度的一半px/calc (标签宽度/2);(//即calculate的简写，calc函数是CSS3中新增的，可以实现简单的加减乘除运算，单位px写在前/后面/前后都写均可，也可以通过设置“transform: translateX(-50%);”来代替margin-left属性)”来让此<img>相对于其父标签居中，但其弊端也比较明显，需要写三行代码，必须知道<img>宽度，而且当更换一张不一样宽的<img>时，就失效了，所以推荐使用奇技淫巧，给此<img>设置“margin: 0 -100%;”，同时给其父标签设置“text-align: center;”即可，justify，两端对齐

color属性：此标签内font的颜色，取值可以用rgb表示取值，其实就是三原色，其中r为red，g为green，b为blue，格式为“rgb(数字, 数字, 数字)”，三个数字分别表示红色，绿色，蓝色显示的亮度，每个数字的取值是0-255之间，0代表不发光，值越大就越亮，红色为rgb(255, 0, 0)，绿色为rgb(0, 255, 0)，蓝色为rgb(0, 0, 255)，黑色为rgb(0, 0, 0)，白色为rgb(255, 255, 255)，在前端开发中其实并不常用黑色，只要让红色、绿色、和蓝色的值都一样就是灰色，而且当这三个值越小时，就越偏黑色，当这三个值越大时，就越偏白色，rgb中还可以增加一个a（alpha，即透明度），取值是0-1，取值越小就越透明，例如“rgba(255, 0, 0, 0.2)”，也可以通过十六进制来表示颜色，每两位表示一个颜色，例如“#ffee00(//ff表示r，ee表示g，00表示b)”，十六进制中取值范围是0123456789abcdef，a为10，b为11，c为12，d为13，e为14，f为15，逢十六进一，用十六进制的第一位*16 +十六进制的第二位=十进制，ff=f*16+f=15*16+15=255，00=0*16+0=0，在CSS中，只要十六进制的每种颜色的每两位的值是一样的，那么就可以简写成一位，例如“#ffee00(//可以简写成#fe0，十六进制颜色码要么为六位，要么为三位)”

line-height属性：此标签内容的行高，就是此标签每行内容所占的高度，文字在line-height值中默认是垂直居中的，在一个只有一行文字的<div>中，当想要让这行文字在此<div>中垂直居中时，只需要给此<div>设置line-height值等于其自身height值即可，但是在一个有多行文字的<div>中，当想要让这些文字整体在此标签中垂直居中时，只能通过padding属性来设置，line-height属性对标签内部的block标签无效，但对内部无文字的inline-block标签有效，此inline-block标签底部与基线是对齐的，再给此inline-block标签设置“vertical-align: middle;”，此inline-block标签在其父标签中就垂直居中了，当此inline-block标签内部有文字时，则只对其文字有效，对此inline-block标签就失效了，当想要让它俩都垂直居中时，只需要分别设置父标签和inline-block标签的line-height值等于其自身height值即可，line-height: 1的意思是行高的像素值等同于字体大小的像素值，1表示倍数，作用是清除掉文字默认的行高，使容器的上下边缘无缝隙的紧贴着文字

text-decoration属性：此标签内文本的装饰效果，取值：none，默认值，什么线都没有，最常见的用途就是用于去掉<a>的下划线，underline，下划线，line-through，删除线，overline，上划线

text-indent属性：此标签内文本块首行的缩进，默认值是0，取值：数字em，其中em是单位，一个em代表缩进一个文字的宽度

text-shadow属性：此标签内文字阴影的所有参数（CSS3），格式为“text-shadow: 水平偏移 竖直偏移 模糊距离 阴影颜色;”，是不支持阴影扩展和内外阴影的，阴影颜色可以省略不写，默认情况下跟文字的颜色一样，前三个的取值都是具体px，其中前两个允许负值，向右向下为正，向左向上为负

text-overflow属性：当此标签内的文本溢出此标签时，在此标签内所发生的事情（CSS3），取值：clip，默认值，修剪文本（不发生任何变化），ellipsis，需配合“overflow: hidden;”和“white-space: nowrap;”使用，将溢出的文本hidden掉之后，用省略号“...”来代替所溢出的文本

word-wrap属性：此标签内长单词/URL的换行方式（CSS3），取值：normal，默认值，只在允许的断字点换行（浏览器保持默认处理），break-word，在长单词/URL内部进行换行

white-space属性：此标签内空白的处理方式，取值：normal，默认值，文本会换行，空白会被浏览器忽略，nowrap，文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止

user-select属性：让此标签的文本是否能被选中，取值：none，无法选中

[if !supportLists]2. [endif]字体类属性：

font-style属性：此标签内font的风格，取值：normal，默认值，标准字体，快捷键“FSN”为“font-style: normal;”，italic，斜体，快捷键“FSI”为“font-style: italic;”

font-weight属性：此标签内font的粗细，取值：normal，默认值，正常，bold，粗体，bolder，更粗的字体，快捷键“FWBR”为“font-weight: bolder;”，lighter，细体，100-900之间整百的数字，400等同于normal，而700等同于bold

font-size属性：此标签内font的尺寸，快捷键“FZ”为font-size，取值：数字px，一定要带单位px，px是pixel的简写，像素的意思，还可以这样写“font-size: 12px/1.5em;(//1.5em代表行高)”，PC端font-size值最小是12px

font-family属性：此标签内font的类型，当取值是中文时，需要加单/双引号，例如“font-family: “楷体”;”，font-family属性的默认值是“宋体”，当给font-family属性设置的取值不存在时，font-family会显示其默认值“宋体”，也可以通过给font-family属性设置多个取值的方式来设置font-family的备选方案，格式为“font-family: “字体1”, “备选方案1”, “...”;(//可以设置多个备选方案)”，中文font-family可以处理英文，而英文font-family不能处理中文，当想要给界面中的英文单独设置font-family时，英文的font-family必须写在中文font-family的前面，最常见的中文font-family有“宋体”、“黑体”、和“微软雅黑”，英文font-family有“Times New Roman”和Arial（当取值是单个单词时，无需加引号，当取值是多个单词或含有#、$、-等符号时，则必须加引号），并不是英文名称就一定是英文font-family，因为中文font-family其实都有自己的英文名称，所以是不是中文font-family主要看能不能处理中文，宋体的英文名称是SimSun，黑体的英文名称是SimHei，微软雅黑的英文名称是“Microsoft YaHei”

font属性：此标签内字体的所有参数，格式为“font: style weight size family;”，sytle和weight可以省略，并且位置可以交换，size和family不能省略，并且位置不可以交换，size和family必须写在所有属性的最后，快捷键为“F+”然后按“Tab”

3.尺寸类属性：

width属性：此标签的宽度，取值：auto，默认值，自适应，数字px，百分数，代表其父标签width值的百分之多少，可以设置成100%/200%/300%等等，但是扩展出来的宽度只会向右边扩展（高度只会向下扩展）

height属性：此标签的高度，取值：auto，默认值，自适应，数字px，百分数，代表其父标签height值的百分之多少

4.定位类属性：

display属性：此标签的显示模式，可以使inline、block、和inline-block标签之间任意转换，取值：block，块级标签，inline，行内标签，inline-block，行内块级标签，none，此标签不会被显示，不会占用空间，flex，伸缩布局，此标签叫做伸缩容器，其子标签叫做伸缩项（伸缩容器中的文字也算一个伸缩项），伸缩项不再有inline、block、和inline-block标签之分，就叫flex标签，伸缩项width属性的默认值是auto，整个伸缩项所占空间的高度默认等于伸缩容器侧轴的height值（因为伸缩容器align-items属性的默认值是stretch，当修改为其它值时，伸缩项height属性的默认值就变成auto了），也可以手动设置，由于伸缩布局是在所有伸缩项原有属性的基础上进行的布局排列，所以伸缩项即使float了也是无效的，默认情况下，当伸缩容器的一行放不下所有的伸缩项时，系统会自动等比flex-shrink所有的伸缩项，默认情况下，水平方向上的轴称之为主轴，其起点在伸缩容器的最左边，终点在最右边，竖直方向上的轴称之为侧轴，其起点在伸缩容器的最顶部，终点在最底部，所有的伸缩项都是从主轴的起点开始排版的，可以通过flex-direction属性来修改主轴的方向，在伸缩布局中，主轴和侧轴永远都是相互垂直的坐标

flex-direction属性：此标签（伸缩容器）主轴的方向，取值：row，默认值，起点在伸缩容器的最左边，终点在最右边，row-reverse，起点在伸缩容器的最右边，终点在最左边，column，起点在伸缩容器的最顶部，终点在最底部，column-reverse，起点在伸缩容器的最底部，终点在最顶部

justify-content属性：此标签（伸缩容器）内部所有伸缩项在主轴上的对齐方式，取值：flex-start，默认值，起点对齐，即伸缩项整体与主轴的起点对齐，flex-end，终点对齐，即伸缩项整体与主轴的终点对齐，center，中心点对齐，即伸缩项整体的中心点与主轴的中心点对齐，space-between，两端对齐，即伸缩项的两端与主轴的两端对齐，中间的缝隙均等，space-around，环绕对齐，即把剩余的空间平均分成伸缩项*2份，然后添加到每一个伸缩项的两边，space-evenly，把剩余的空间平均分成伸缩项+1份，然后把这些均等的空间放到每一个伸缩项的两边，但是兼容性比较差，比如iphoneSE上就不支持，会失效，相当于没有设置

align-items属性：此标签（伸缩容器）内部所有伸缩项在侧轴上的对齐方式，取值：stretch，默认值，拉伸对齐/等高对齐，即所有伸缩项所占空间的高度变为侧轴的height值，当需要设置为stretch时，伸缩项不能设置height值，否则stretch就会失效，flex-start，起点对齐，即伸缩项整体与侧轴的起点对齐，flex-end，终点对齐，即伸缩项整体与侧轴的终点对齐，center，中心点对齐，即所有伸缩项的中心点都与侧轴的中心点对齐，baseline，基线对齐，即所有伸缩项中的基线（仅仅是作为参考，即便是没有那个文字/字母，基线也在那）在一条直线上对齐，即便某一个伸缩项被设置了padding-top，也必须强制对齐

align-self属性：此标签（某一个伸缩项）与侧轴的对齐方式，控制具体的某一个伸缩项，取值跟align-items属性的取值是一样的，只是控制的范围和书写的位置不同而已

flex-wrap属性：此标签（伸缩容器）内部所有的伸缩项当一行放不下时的排版方式，取值：nowrap，默认值，不换行，等比压缩，wrap，换行，wrap-reverse，换行并颠倒伸缩容器，然后按照颠倒之后的样子，重新排布每行的位置

align-content属性：此标签（伸缩容器）内部的伸缩项换行之后与侧轴的对齐方式，只有伸缩项发生了换行align-content属性才有效，取值：stretch，默认值，拉伸对齐，即换行之后把所有空间高度均分给每行，flex-start，起点对齐，即换行之后整体与侧轴的起点对齐，flex-end，终点对齐，即换行之后整体与侧轴的终点对齐，center，中心点对齐，即换行之后的整体的中心点与侧轴的中心点对齐，space-between，两端对齐，即换行之后在侧轴上两端对齐，space-around，环绕对齐，即换行之后在侧轴上环绕对齐

order属性：此标签（某一个伸缩项）的重新排序，默认情况下每一个伸缩项都有一个order属性，默认值是0，但是可以通过修改此取值来实现order，按照取值从小到大来排序

flex-grow属性：此标签（某一个伸缩项）宽度（也有可能是高度，取决于主轴是横向还是纵向）的扩充，当所有伸缩项的宽度总和小于伸缩容器的宽度时，可以使它们各自flex-grow，以填满整个伸缩容器，默认值是0（代表不flex-grow），取值表示份数，意思是剩余的宽度它分得多少份，可以用比值求得每一个伸缩项具体flex-grow多少px的宽度，只要每一个伸缩项的flex-grow值一样，它们flex-grow的宽度也是相等的

flex-shrink属性：此标签（某一个伸缩项）宽度的缩减，当所有伸缩项的宽度总和大于伸缩容器的宽度时，可以使它们各自flex-shrink自己的宽度，flex-shrink之后的总宽度正好等于伸缩容器的宽度，默认值是1，代表等比flex-shrink每一个伸缩项，只要每一个伸缩项的flex-shrink值一样，它们flex-shrink的宽度也是相等的，当取值是0时，代表当前的伸缩项不会被flex-shrink，缩减的公式为“溢出的宽度值=所有伸缩项宽度值之和-伸缩容器宽度值，权重值=此伸缩项的flex-shrink值x此伸缩项的宽度值，然后再累加求和，每个伸缩项缩减的宽度值=溢出的宽度值x此伸缩项的宽度值x此伸缩项的flex-shrink值，再除以权重值即可”

flex-basis属性：此标签（某一个伸缩项）的宽度，默认值是auto，意思是根据内容的宽度自动调整，flex-basis属性的优先级要高于width属性，当通过flex-basis属性设置了宽度时，通过width属性设置的宽度就会失效，当通过flex-basis和width属性同时设置了宽度，并且其中一个属性的取值是auto，一个属性的取值是具体的值时，会按照具体的值来显示

flex属性：此标签（某一个伸缩项）的扩充、缩减、和宽度，格式为“flex: grow shrink basis;”，默认值是“flex: 0 1 auto;”，当有的伸缩项字多，有的伸缩项字少，而我们想让页面无论放大/缩小，所有的伸缩项都必须保持一样的宽度时，我们可以将每一个伸缩项的初始basis设为0，并且等比grow和shrink，也就是设置为“flex: 1 1 0;(//可以简写为“flex: 1;”)”，另外，“flex: 0 0 auto;(//可以简写为“flex: none;”)”代表初始basis自适应，不grow也不shrink，“flex: 1 1 auto;(//可以简写为“flex: auto;”)”代表初始basis自适应，并且等比grow和shrink

float属性：此标签的浮动方向，只能与其父标签的左/右对齐，取值：none，默认值，标签不浮动，并会显示在其在文本中出现的位置，left，左浮，right，右浮

clear属性：让此标签不要占满上一行向哪边float标签的位置，取值：none，默认值，相当于没设置这个属性，left，不要占满上一行“float: left;”标签的位置，right，不要占满上一行“float: right;”标签的位置，both，无论上一行标签向哪边float都不要占满其位置，当我们给某个标签添加clear属性之后，那么这个标签的margin-top属性就会失效

overflow属性：此标签的溢出内容如何排版，取值：visible，默认值，超出的内容仍然可见，因为内容默认是可以溢出盒子的（即使内容溢出盒子，也是向右/下溢出），hidden，超出的内容会被隐藏掉，被隐藏掉的内容并不实际占用空间，当一个父<div>里有<img>，并且此父<div>没有设置height值时，此父<div>的高度默认会被此<img>撑起来，但是当此父<div>relative并且此<img>absolute时（子绝父相），由于此<img>脱标，所以就导致了其父<div>的高度塌陷，这时，当给此父<div>设置“overflow: hidden;”时，其高度还是塌陷并且此<img>也会被hidden掉，因为其所形成的BFC区域只能解决由于其子标签float而导致的其高度塌陷，并且相当于整个<img>都溢出了，auto，超出的内容会被hidden掉，但可以用滚动条来进行查看，scroll，无论内容有没有超出容器，都会显示横向和纵向滚动条

position属性：此标签的定位类型，取值：static，默认值，静态定位，没有定位，标准流，relative，相对定位，absolute，绝对定位，fixed，固定定位

z-index属性：此定位流标签与其它标签的覆盖关系，即堆叠顺序，只能设置给定位流的标签，取值：auto，当此定位流标签存在定位流上级标签时，给此定位流标签所设置的z-index属性就会失效，这时它的z-index值就会默认跟其最近的定位流上级标签的相同，数字（默认是0），当此定位流标签不存在定位流上级标签时，定位流标签默认会盖住标准流标签，但是当给此定位流标签设置一个z-index属性取负值时，此定位流标签就会被标准流标签所盖住，后面编写的定位流标签默认会盖住前面编写的，但是当给定位流标签设置了z-index属性时，谁的取值比较大，谁就会显示在上面

visibility属性：此标签是否可见，取值：visible，默认值，可见，hidden，不可见，但会占用空间

vertical-align属性：此标签的垂直对齐方式（适用于inline/inline-block标签），设置给需要对齐的那个标签本身，取值：baseline，默认值，此标签的底部和此行文字的基线对齐（基线就是一行文字/字母中最短那个文字/字母的底部），top，此标签的顶部和其父标签的顶部对齐，bottom，此标签的底部和其父标签的底部对齐，text-top，此标签的顶部和此行文字的顶部对齐，text-bottom，此标签的底部和此行文字的底部对齐，middle，此标签的中线和此行文字的中线对齐（文字的中线为基线往上约四分之一的位置，并不是文字的正中间），数字px，正数代表向上移动，负数代表向下移动，当一个父标签的高度由一个inline-block标签撑起时，此父标签底部跟此inline-block标签底部很可能有1px的间距，因为此inline-block标签的底部默认跟此行文字的基线是对齐的，所以，文字基线以下的部分又把此父标签撑高1px，只需要给此inline-block标签设置“vertical-align: top/bottom;”即可解决这个问题，就相当于此inline-block标签的垂直对齐方式与此行文字无关了

cursor属性：此标签范围内的鼠标指针样式，取值：auto，默认值，浏览器设置的鼠标指针，move，可移动此对象形状的鼠标指针，即一个十字形状，上下左右都有小箭头，pointer，小手指形状的鼠标指针，not-allowed，一个红色的圈加一个斜杠，表示禁止的意思

5.背景类属性：

background-color属性：此标签的背景颜色（起始显示位置默认是从border区域开始显示），取值：具体单词，transparent是透明色的意思，rgb，rgba，十六进制

background-image属性：此标签的背景图片，取值：url(“路径/网址”)，小括号中放本地/网络img的路径/网址，标签中的background-image自动repeat，当网页上出现了img时，浏览器会再次发送一个请求报文获取img文件，同一个标签可以同时设置background-color和background-image，background-image会覆盖background-color，background-image和插入<img>是有区别的，background-image仅仅是一个背景装饰，不会占用位置，而插入<img>会占用位置，background-image有background-position属性，所以可以很方便的控制img的位置，而插入<img>没有background-position属性，所以控制img的位置不太方便，插入<img>的语义比background-image的语义要强，所以当你的img想要被搜索引擎收录时，推荐使用插入<img>，linear-gradient(颜色1, 颜色2, ...)，由颜色1线性渐变为颜色2，再线性渐变为...（也相当于background-image），默认情况下会从上至下的linear-gradient，也就是180/-180度linear-gradient，第二种写法是linear-gradient(to 方向, 颜色1, 颜色2, ...)，向哪个方向linear-gradient，方向可以是left/right/top right（右上角）等，第三种写法是linear-gradient(数字deg, 颜色1, 颜色2, ...)，向多少度方向linear-gradient，0度为向上linear-gradient，90度为向右linear-gradient，-90度为向左linear-gradient，至少需要传递两个颜色，至多没有上限，默认情况下会自动计算纯色和gradient色的范围，但是我们也可以手动设置，例如“background: linear-gradient(to right, red 100px, green 200px, blue 300px);”，只有第一个颜色后面的范围代表纯色范围，后面的颜色范围都是代表之前所有颜色范围与自身gradient色范围之和，所以，自身gradient色范围用此数值减去前一个数值即可，radial-gradient(颜色1, 颜色2, ...)，由颜色1径向渐变为颜色2，再径向渐变为...，默认以几何中心为中心点向四周扩散，第二种写法是radial-gradient(at 位置, 颜色1, 颜色2, ...)，可以通过位置修改中心点，位置可以是left/right/top right（右上角）/200px 100px（相当于坐标，指以水平方向200px，竖直方向100px的位置为中心点）等，第三种写法是radial-gradient(数字px, 颜色1, 颜色2, ...)，可以设置radial-gradient的半径是多少px，第四种写法是radial-gradient(数字px at 数字px 数字px, 颜色1, 颜色2, ...)，可以同时设置radial-gradient的半径和中心点的位置，at前面的为radial-gradient的半径

background-repeat属性：此标签background-image的平铺方式，取值：repeat，默认值，在水平和竖直都需要平铺，可以先降低background-image的大小，再通过repeat的方式获得相同的效果，以提升数据的传输速度，no-repeat，在水平和竖直都不需要平铺，repeat-x，只在水平方向平铺，repeat-y，只在竖直方向平铺

background-position属性：此标签background-image的定位，格式为“background-position: 水平方向 竖直方向;”，水平方向的取值是：left，默认值，左对齐，center，居中对齐，right，右对齐，数字px，正数为以左上角为起点向右移，负数为向左移，竖直方向的取值是：top，默认值，上对齐，center，居中对齐，bottom，下对齐，数字px，正数为以左上角为起点向下移，负数为向上移，不同写法之间是可以混搭的，当想要让一张img的中间部分永远都在网页上居中显示时，先设置一个<div>，高度手动设置，宽度不用设置，默认跟其父标签即<body>一样宽，然后让此img充当此<div>的background-image，并将background-position属性水平方向的取值设为center即可，background-position和background-image两个属性可以实现精灵图（雪碧图）的功能，先设置一个小<div>，让大img充当其background-image，再将background-image挪动到想要显示的地方即可，可以减少img请求的次数，以及可以降低服务器的处理压力，当想要让多张img合成一张background-image时，只需要设置<div>的嵌套，然后<div>的大小设置成一样，再利用background-position属性就可以了，当盒子的宽度不固定，但还不想让其background-image走形时，可以设置三个大小一样的<div>一个套一个（即第二级和第三级盒子的宽高都设置为100%），第一级盒子的background-image用1px的background-image进行repeat-x，然后第二级盒子的background-image充当其左侧并且no-repeat，第三级盒子的background-image充当其右侧并且no-repeat，然后无论第一级的盒子怎么变宽，其background-image都不会走形，这就叫做滑动门，详见“124-滑动门.html”

background-attachment属性：此<body>（页面）background-image的关联方式，取值：scroll，默认值，此页面的background-image会随着此页面滚动条的滚动而滚动，fixed，此页面的background-image不会随着此页面滚动条的滚动而滚动

background属性：此标签背景的所有参数，格式为“background: color image repeat attachment position;”，这五个取值任何一个都可以省略，也没有先后顺序之分，快捷键为“b+”然后按“Tab”，可以在分号前面添加一个逗号，设置多重background-image，每张background-image的参数都用逗号隔开，先添加的background-image会盖住后添加的，但是当background-image太多时，一句代码过于长，不太利于阅读，建议编写多重background-image时拆成不同的CSS属性来写，并且不同CSS属性的不同取值用逗号隔开即可，只要是跟background-image相关的CSS属性都可以，比如background-position属性、background-size属性、和background-origin属性等

background-size属性：此标签background-image的尺寸（CSS3），取值：auto，默认值，保持此background-image原有的background-size，宽度高度，它俩可以是具体px/此标签宽高的百分比/auto（自适应），当只设置一个值时，第二个值会被设置为auto，当取值是“auto auto”时，相当于默认值，cover，此background-image会被等比拉伸，放大/缩小，直到宽度和高度都填满盒子为止，contain，此background-image会被等比拉伸，放大/缩小，直到宽度和高度其中之一填满盒子为止

background-origin属性：此标签background-image的起始显示位置（CSS3），也就是background-image从哪里开始显示，取值：padding-box，默认值，从padding区域开始显示，border-box，从border区域开始显示，content-box，从内容区域开始显示

background-clip属性：此标签的background经过裁剪后所剩的区域（CSS3），取值：border-box，默认值，仅剩border以及border以里的区域，相当于没裁剪（background-color的起始显示位置默认是从border区域开始显示），padding-box，仅剩padding以及padding以里的区域，content-box，仅剩内容区域

-webkit-background-clip属性：此标签的background经过裁剪后所剩的区域，这是一个私有的属性，并不是所有的浏览器都能够识别，-ms代表ie浏览器内核识别码，-moz代表火狐(firefox)浏览器内核识别码，-webkit代表谷歌(chrome)/苹果(safari)浏览器内核识别码，-o代表欧朋(opera)浏览器内核识别码，取值：text，可以将此标签的background-color/background-image裁剪为此标签内文字的形状，但文字的color必须设置成transparent/略微带点transparent，否则无效，当想要制作卡拉OK效果时，需先把<div>中文字的颜色设置为transparent，再添加一个background-color，然后“-webkit-background-clip: text;”，再添加一个纯色的background-image，由于background-image属性的优先级比background-color属性高，所以，先把此background-image给它background-position到此盒子之外，然后再设置一个给它background-position回来的animation即可

6.边框类属性：

border属性：此标签所有边框的宽度(width)、样式(style)、和颜色(color)，边框就是环绕在标签宽度和高度周围的线条，格式为“border: width style color;”，快捷键为“bd+”，然后按“Tab”，width不能用百分数表示，并且width可以省略，省略之后还是可以看到border，style不能省略，省略之后就看不到border了，style中常用的有solid（实线）和dashed（虚线），color可以省略，省略之后默认就是黑色，利用border类属性可以制造一个倒三角形，只需将<div>的width和height值设为0，border-width值任意拟定，border-style值设为solid，border-bottom值设为none，border-top-color值设为自定义颜色，border-right-color值设为white/transparent即可

border-top/right/bottom/left属性：此标签上/右/下/左border的width、style、和color，用于分别设置某一条border的所有参数，格式与border属性一样，这几个属性的取值也可以取none，代表不需要此border，当<ul>内部的<li>需要里边的border，而不需要边缘的border时，可以先正常给<li>设置border，然后给<ul>外部套一个<div>，此<div>的width值和height值减掉边缘的border-width值，然后给此<div>设置“overflow: hidden;”即可

border-width/style/color属性：此标签四个方向border的width/style/color，用于分别设置四条border的某一个属性，格式为“border-width/style/color: top right bottom left;”，取值是按照顺时针来赋值的，也就是按照上右下左来赋值，可以省略最后一/两/三个取值，省略的取值跟它对着的那条border的取值一样，当最后三个取值都省略时，则全都跟上border的取值一样

border-方向-参数属性：此标签某一条border的width/style/color，例如“border-left-width(//左border的宽度)”，“border-left-style(//左border的样式)”

outline属性：此标签的轮廓线，即绘制于标签周围的一条线，位于border边缘的外围，可起到突出标签的作用，outline不会占据空间，也不一定是矩形，格式为“outline: 颜色 样式 宽度;”，取值也可取none，<input>默认是有border和outline的

box-shadow属性：此标签border阴影的所有参数（CSS3），取值：none，默认值，格式为“box-shadow: 水平偏移 垂直偏移 模糊距离 阴影扩展 阴影颜色 内外阴影;”，前四个的取值都是具体px（也可以是0），其中前两个允许负值，向右向下为正，向左向上为负，“阴影扩展”的意思是在现有box-shadow的基础上，向四周各扩展多少个px的box-shadow，内阴影是inset，外阴影是outset，默认是outset，可以省略不写，只有前三个参数是必须要写的，默认情况下“阴影颜色”跟盒子内容的颜色一致

border-radius属性：此标签border的四个圆角的半径（CSS3），快捷方式为“bdrs”+“回车键”，格式为“border-radius: 左上 右上 右下 左下;”，“border-radius: 百分数;”，第一种格式取值是具体px，意思是把左上部分的直角变为半径为多少px的圆弧，当省略了某一个角的取值时，系统会自动参考其对角的值，当后三个角的取值都省略时，则都与第一个取值相同，第二种格式的意思是把此标签整体的宽高值各取百分之多少作为半径，然后画圆弧，当想要将此标签变为椭圆/圆时，只需要设置“border-radius: 50%;”即可，在一个设置了border-radius和border-width属性的矩形中，当border-radius值大于border-width值时，此矩形的内外border都会变成圆角，当border-radius值小于等于border-width值时，此矩形的内border是直角，外border是圆角

border-top/bottom-right/left-radius属性：此标签border的某一个圆角的半径（CSS3），格式为“border-top/bottom-right/left-radius: 水平半径 竖直半径;”，取值是具体px，当只写一个取值时，代表竖直和水平的取值相同

border-image-source属性：此标签border-image的路径（CSS3），取值：url(“路径”)，默认情况下会将border-image放到border形成的四个角，由于border-image属性的优先级高于border-color属性，所以当设置了border-image属性时，所设置的border-color属性就失效了，border-color值就跟background-color值相同了

border-image-slice属性：此标签border-image四个方向的向内切割距离值（CSS3），格式为“border-image-slice: top right bottom left;”，取值都是数字，不带单位px，将此border-image切割好之后，除了中间的部分之外，其余的八个部分都填充给盒子的边框，当在最后一个取值后面再跟上一个fill时，中间的部分也会填充给盒子的内容区域，border-image-repeat相同

border-image-width属性：此标签border-image实际显示的宽度值（CSS3），取值是具体px，默认值是其border-width值，但并不能改变其实际的border-width值，当所设置的border-image-width值大/小于其实际的border-width值时，所显示的border-image会在原有宽度上进行拉宽/收窄，既会走形，也会超出/小于其原有border-width的范围

border-image-outset属性：此标签border-image四个方向的外移距离（CSS3），格式为“border-image-outset: top right bottom left;”，取值是具体px（默认值是0）

border-image-repeat属性：此标签的border-image被切割好之后的填充方式（CSS3），取值：stretch，默认值，拉伸，即border-image的宽高强制变为区域的宽高，所以可能会发生走形，repeat，平铺，round，以自适应的方式铺满，它是repeat和stretch的结合版，即能repeat先尽量repeat，当repeat之后还有一点空余时，就暂停repeat而进行stretch以适应区域

border-image属性：此标签边框图片的所有参数（CSS3），格式为“border-image: source slice width outset repeat;(//省略的取值就是其默认值)”，可以用border-image属性来实现滑动门的功能，比较简捷

7.内外边距类属性：

padding属性：此标签四个方向的内边距，用于分别设置四个方向的内边距，内边距就是border和内容之间的距离，格式为“padding: top right bottom left;”，四个取值的省略规律与“border-width/style/color属性”相同，给标签设置padding属性之后，此标签整体的宽高值会发生相应的变化，padding属性也会有background-color，当所设置的padding-top和padding-bottom属性，padding-left和padding-right属性有冲突的时候，会优先满足padding-top和padding-left属性，取值也可以用百分数代替具体px，代表其父标签width值的百分之多少，inline标签只支持padding-left、padding-right、和padding-bottom属性，但padding-bottom值无论设置成多少都不会改变此inline标签的高度

padding-top/right/bottom/left属性：此标签的上/右/下/左padding，取值也可以用百分数代替具体px，代表其父标签width值的百分之多少

margin属性：此标签四个方向的外边距，用于分别设置四个方向的外边距，外边距就是标签和标签之间的距离，格式为“margin: top right bottom left;”，当所设置四个方向的margin有冲突时，margin-top和margin-left的优先级更高，margin的那一部分是没有background-color的，水平方向上的margin可以叠加，垂直方向上的margin不会叠加，会出现合并现象，谁的margin比较大就听谁的，取值也可以用百分数代替具体px，代表其父标签width值的百分之多少，给inline/inline-block标签设置“margin: 0 auto;”是无效的，inline标签只支持margin-left和margin-right

margin-top/right/bottom/left属性：此标签的上/右/下/左margin，取值也可以为负，代表逆向的意思

8.用户界面类属性（CSS3）：

box-sizing属性：此标签整体宽高的定义规则，取值：content-box，默认值，由于标签整体的宽/高值=border-width值+padding值+width/height值（内容宽/高值），所以当改变border-width/padding值时，此标签整体的宽/高值会发生相应的变化，border-box，此标签整体的宽/高值恒等于此标签的width/height值，当改变border-width/padding值时，此标签整体的宽/高值不变，而width/height值会发生相应的变化

resize属性：此标签的尺寸是否可以拖拽调整，取值：none，默认值，无法调整，both，宽高都可调整，horizontal，只有宽度可调整，vertical，只有高度可调整

9.内容生成类属性：

content属性：利用伪元素选择器所添加的子标签的内容，取值是自定义的内容字符串/空字符串，当使用伪元素选择器时，必须设置此属性，取值除了使用文本之外，还可以调用attr函数直接读取父标签的一些属性值，例如“<div class=“beauty-font”text=“字体颜色渐变”>字体颜色渐变</div>  .beauty-font::after {content: attr(text);}”

10.列表类属性：

list-style-type属性：此<ul>/<ol>内部的<li>的先导符号类型，取值：disc，默认值，实心圆，circle，空心圆，square，实心方块，decimal，数字，none，无标记

list-style属性：此<ul>/<ol>内部的<li>先导符号的所有参数，可以按顺序设置如下参数，list-style-type，list-style-position，list-style-image，当然，取值也可以取none

11.过渡效果类属性（CSS3）：

transition-property属性：此标签需要设置transition的行内样式/CSS属性名称，由于设置transition的前提条件是某个/些transition-property的取值发生了变化，所以可以配合hover/active伪类选择器/JS代码使用，当想要设置transition时，既可以设置给此标签也可以设置给此标签的hover/active伪类选择器，当设置给了此标签时，transition是双向的，hover/active时有，挪开/松手时也有，当设置给了此标签的hover/active伪类选择器时，transition是单向的，hover/active时有，挪开/松手时没有，取值：行内样式/CSS属性名称，当有多个transition-property需要同时执行transition时，transition-property和transition-duration属性的所有取值都可以用逗号隔开

transition-duration属性：此标签所设置transition的持续时长，取值：数字s

transition-timing-function属性：此标签所设置transition的速度曲线，取值：ease，默认值，慢-快-慢，linear，匀速，ease-in，慢速开始，ease-out，慢速结束，ease-in-out，慢速开始和结束

transition-delay属性：此标签所设置transition的延迟时间，取值：数字s

transition属性：此标签所设置过渡效果的所有参数，格式为“transition: property duration timing-function delay;”，当想要给多个property添加transition时，可用逗号隔开，逗号写在最后一个参数之后，前两个参数必须写，最后两个参数可有可无，当给取值发生变化的全部property所添加的duration、timing-function、和delay都一样时，可以简写，格式为“transition: all 1s linear 0.5s;”

12.2D/3D转换类属性（CSS3）：

transform属性：此标签在2D/3D空间中的旋转/平移/缩放，给inline标签添加此属性是无效的，必须转为block/inline-block标签，取值：none，默认值，不进行transform，rotateX/Y/Z(数字deg)，此标签围绕transform-origin的哪个轴顺时针旋转多少度，deg代表度数，默认情况下所有标签都是围绕Z轴（即与电脑屏幕垂直的轴）进行rotate，Z可以省略不写，想围绕哪个轴rotate只需要在rotate后面加上哪个轴的大写字母即可，translate(数字px, 数字px)，此标签沿X轴和Y轴各平移多少px的距离，向右/下为正，向左/上为负，其中“数字px”也可以换成“百分数”，代表自身整体宽度值的百分之多少，translateX/Y/Z(数字px)，此标签沿哪个轴translate多少px的距离，向右/下为正，向左/上为负，当此标签rotate时，会修改此标签的坐标系，所以当rotate之后再translate时，就会按照新的坐标系translate，scale(数字, 数字)，此标签以transform-origin为基准，横向和纵向各自变为自身的多少倍大小，第一个数代表横向，第二个数代表纵向，当取值是1时，代表不变，当取值大于1时，代表放大，当取值小于1时，代表缩小，当横向和纵向缩放一样时，可以简写为一个数，只要父标签被scale，子标签也会跟着被scale，绘制跳动的心只需让父<div>不停的放大缩小即可，当需要进行多个参数的transform时，每个参数用空格隔开即可，详见“122-绘制跳动的心.html”

transform-origin属性：此标签形变中心点的位置（跟rotate/scale搭配使用），取值：“数字px/百分数/left/center/right 数字px/百分数/top/center/bottom”，前一个代表横向，后一个代表纵向，不同写法之间是可以混搭的，默认情况下所有的标签都是以自己的几何中心作为transform-origin，标签的几何中心就是“center center”

perspective属性：此标签内部子标签的3D透视效果（近大远小），设置给需要呈现此3D透视效果的标签的父标签，其实只要是其上级标签都可，但是效果略有差异，取值：none，默认值，不设置perspective，数字px，意思是子标签的观察距离，数字越小，观察距离就越近，所以3D近大远小的效果就越明显，数字越大，观察距离就越远，所以3D近大远小的效果就越不明显，由于默认情况下所有的标签都必须在2D（二维）的平面上，所以此3D只是一种视觉上的透视效果而已，当想要让此标签真正进入3D（三维立体）的空间时，就只能通过transform-style属性来实现

transform-style属性：此标签内部子标签空间转换的风格，设置给需要进入3D（三维立体）空间的标签的父标签，取值：flat，默认值，其子标签只可以在2D（二维）的平面上，不可以进入3D（三维立体）的空间，preserve-3d，其子标签可以进入3D（三维立体）的空间，正方体纵向轮播动画需要<ul>内部嵌套6个<li>，并且<ul>和<li>都是同样宽高的正方形，然后子绝父相，当想要让每个面的img在轮播时都是正的时，是有编写规律的，按照“上后下前”的顺序来编写，上面的img需要“transform: rotateX(90deg) translateZ(边长的一半px);”，后面、下面、和前面的img的rotateX依次增加90deg，也是translateZ(边长的一半px)即可，构造完正方体后，再给<ul>添加一个“from {transform: rotateX(0deg);} to {transform: rotateX(360deg);}”的animation以及“transform-style: preserve-3d;”，最后还需要给<ul>的父标签添加一个perspective属性（取值可以是500px），才能看到整个立方体的3D透视效果（近大远小），详见“110-3D转换模块-练习.html”

13.颜色类属性：

opacity属性：此标签不透明的程度值（CSS3），取值是数字，默认值是1（完全不透明），取值从0.0（完全透明）到1.0（完全不透明），只要设置为半透明，就可以看到其父标签的background-color，当给一个标签设置opacity属性时，其子标签也会有相同的效果

14.动画类属性（CSS3）：

animation-name属性：此标签所设置animation的名称，取值是自定义的名称，要将此名称添加到@keyframes操作符的后面，还要设置animation-duration属性，否则时长为0，就不会播放动画了，创建animation的格式为“<style>@keyframes 动画名称 {from {取值发生变化的行内样式/CSS属性1: 取值1;} to {取值发生变化的行内样式/CSS属性1: 取值2;} }</style>”，当from和to中相同的属性分别有多个取值的时候，一定要把不变的取值写在前面，变化的取值写在后面，否则会出现未知问题，from和to也可以换成百分数，可以分成任意份，表示进度

animation-duration属性：此标签所设置animation的持续时长，取值：数字s/ms

animation-timing-function属性：此标签所设置animation的速度曲线，取值：ease，默认值，慢-快-慢，linear，匀速，ease-in，慢速开始，ease-out，慢速结束，ease-in-out，慢速开始和结束，steps函数，能够实现animation的阶跃式变化，而非两个状态间的线性过渡，可以接收两个参数，第一个参数是必选参数，接收一个正整数，设置animation分割的段数，第二个参数为可选参数，接收start/end两个值，设置在每段动画的起/终点发生阶跃式变化，默认值是end

animation-delay属性：此标签所设置animation的延迟时间，取值：数字s/ms

animation-iteration-count属性：此标签所设置animation的执行次数，取值：1，默认值，数字，infinite，无限次，当制作无限轮播animation的时候，比如一个盒子能放下两张img，要在所有img的最后再增加两张跟前两张一模一样的img，这样一来，当轮播结束时，就会从最后两张瞬间跳转到开头两张重新轮播，由于都是一模一样的img，跳转的过程肉眼根本看不出来

animation-direction属性：此标签所设置的animation是否需要往返执行，取值：normal，默认值，不需要往返执行，即animation结束之后，回到最初始的状态（即0%/0%之前的状态），alternate，需要往返执行，即执行完一次之后再逆向执行下一次，逆向执行的animation也算次数

animation-fill-mode属性：此标签所设置的animation在延迟和结束状态时的样子，取值：none，默认值，不做任何改变，backwards，在animation延迟时间内，保持起点（0%的进度）时的样子，forwards，在animation完成后，保持终点（100%的进度）时的样子，both，在animation延迟时间内，保持起点（0%的进度）时的样子，在animation完成后，保持终点（100%的进度）时的样子

animation-play-state属性：此标签所设置animation的运行/暂停，取值：running，默认值，运行animation，paused，暂停animation，可以配合hover伪类选择器使用，来控制animation的运行/暂停

animation属性：此标签所设置动画的所有参数，格式为“animation: name duration timing-function delay iteration-count direction fill-mode;”，其中前两项是必须有的

15.尺寸类属性：

min-width属性：此标签最小的宽度，当制作移动端网页时，可以给<body>设置min-width和max-width属性，因为正常情况下，<body>内一定会存在width值是100%的子标签，所以网页的放大/缩小一定会对其产生影响，当给<body>设置了min-width值时，一旦网页缩小到小于此值，<body>内的width值是100%的子标签就不会再随着变化了，当未给<body>设置min-width值时，一旦此网页被无限缩小，<body>内的width值是100%的子标签里的内容就会被挤变形了

max-width属性：此标签最大的宽度

16.其它类属性：

object-fit属性：此标签（可替换标签）内容如何适应到其生成的框，可替换标签就是浏览器根据标签的属性和取值，来决定标签的具体显示内容，可替换标签也在其显示中生成了框，<video>、<img>、<input>、<textarea>、和<select>等标签都属于可替换标签，取值：fill，默认值，内容拉伸并填满这个框，即内容的宽高强制变为这个框的宽高，所以内容可能会发生走形，contain，内容等比拉伸，直到宽度和高度其中之一填满这个框为止，cover，内容等比拉伸，直到宽度和高度都填满这个框为止，none，内容保持其原有尺寸

filter属性：此标签的滤镜效果（CSS3），取值：blur(数字px)，高斯模糊，值越大越模糊，高斯模糊效果是非常消耗性能的，容易造成卡顿，不推荐在移动端中使用，当非要在移动端中使用时，建议只设置一次，当非要设置多次时，建议使用蒙版来代替高斯模糊效果，contrast(百分数)，对比度，0%会全黑，100%则保持不变，超过100%则意味着会运用更低的对比度

touch-action属性：在触摸屏（移动端）上的此标签被操纵时的响应方式（例如浏览器内置的缩放功能），取值：none，不进行任何响应（即禁用一些默认的事件）

二、盒子模型

CSS盒子模型仅仅是一个形象的比喻，HTML中所有的标签转成block标签之后都是盒子，所以，所有的标签转成block标签之后都可以设置width和height（存放内容的区域）、padding（填充物）、border（盒子的边框）、和margin（盒子和盒子之间的间隙）

1.标签内容区的宽高值：就是width/height属性的取值

2.标签整体的宽高值：标签整体的宽度值=border-left-width值+padding-left值+width值+padding-right值+border-right-width值，标签整体的高度值同理可证

3.标签所占空间的宽高值：标签所占空间的宽度值=margin-left值+border-left-width值+padding-left值+width值+padding-right值+border-right-width值+margin-right值，标签所占空间的高度值同理可证

4.注意点：对于两个父子关系的<div>，当设置了子<div>的margin-top属性时，父<div>也会被顶下来，就相当于子<div>的margin-top属性传递给了父<div>，除非让父<div>形成一个BFC区域/添加一个border属性/让里面的子<div>脱标/在子<div>的上边随意添加几个字，一般情况下当想要控制父子<div>之间的边距时，应该首先考虑padding属性，其次再考虑margin属性，因为margin属性本质上是用于控制兄弟<div>之间的边距的，当给子<div>设置“margin: 0 auto;”时，可以让子<div>在其父<div>中水平居中，0也可以换成任意的数字，“margin: 0 auto;” 只对水平方向有效，对垂直方向无效，为了更好的控制和计算<div>的宽高等等，编写代码之前第一件事情就是清空浏览器默认的margin和padding，可以使用通配符选择器，方式为“* {margin: 0;  padding: 0;}”，但是通配符选择器会遍历当前界面中所有的标签，非常的消耗性能，所以我们可以从这个网址“http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css”中去复制CSS代码然后粘贴到我们的项目中/直接记住“body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin: 0;  padding: 0;}”，然后还得清空一些其它的浏览器默认样式，例如“a {text-decoration: none;  color: #ccc;}  ul, ol {list-style: none;}”，然后还得利用<body>设置整个界面的font-size、font-family、和color，例如“ body {font-size: 12px;  font-family: “宋体”;  color: #333;}”，当一个盒子中存储的是文字，并且同时设置了padding-left和padding-right属性时，由于浏览器会优先满足padding-left属性，所以此盒子padding-left的实际测量值是真实的padding-left值，而padding-right的实际测量值有可能还包含一点点内容的区域，因为当右边的剩余内容区域不够一个文字宽度时，那个文字就会换行显示，所以就可能存在一点点剩余，padding-top属性指的并不是盒子顶部到其内部文字顶部的距离，而是盒子顶部到其内部文字line-height顶部的距离，在一个width和height值固定不变的盒子中，当此盒子的内容是文字/多个inline/inline-block标签时，一旦此内容超出此盒子的width值，下一个文字/inline/inline-block标签就会自动换行，但可以超出此盒子的height值，当此盒子的内容是block/单个inline-block标签时，此内容可以超出此盒子的width和height值

三、BFC区域

BFC（Block Formatting Context）全称为块级格式化上下文，每一个BFC区域只包括其子标签，不包括其子标签的子标签，每一个BFC区域都是独立隔绝的，互不影响，利用这个特性可以让不同BFC区域之间的布局不产生影响，但形成BFC区域的标签只能解决一些特定的问题，比如子标签的margin-top属性会传递给其父标签，只需要让其父标签形成一个BFC区域即可解决这个问题，比如兄弟标签的上下margin会发生重叠，只需要给其中一个标签套一个<div>，并让此<div>形成一个BFC区域即可解决这个问题，比如由于子标签的float（只能是float，absolute和fixed不适用）而导致的其父标签的宽高塌陷，只需要让其父标签形成一个BFC区域即可解决这个问题，比如上一个<div>“float: left;”导致盖住下一个<div>，只需要让下一个<div>形成一个BFC区域即可解决这个问题，这样一来，下一个<div>就紧贴在上一个<div>的右边了，也消除了字围（文字环绕）现象，当不给下一个<div>设置width值时，就变成了两栏自适应布局，float的<div>宽度不变，另一边随着浏览器的宽度而自适应，那么，形成BFC区域的条件是<body>/脱标/（设置display的值是inline-block/table-cell/table-caption/flex）/（设置overflow的值是hidden/auto/scroll），只满足其中之一即可

四、网页的排版/布局方式

浏览器对网页中标签的排版方式就叫做网页的布局方式

1.标准流（文档流/普通流）的排版方式：浏览器默认的排版方式就是标准流的排版方式（静态定位），分为垂直排版和水平排版，由于block标签独占一行，所以会垂直排版，由于inline/inline-block标签不独占一行，所以会水平排版

2.浮动流的排版方式：浮动流是一种“半脱离标准流”的排版方式，只有水平排版，并且只能设置某个标签紧贴着其父标签左/右对齐（此标签里的内容也随着此标签左/右对齐，因为float标签的width和height值默认是auto，所以就相当于把其内容给包起来了，所以其内容就会随着它走），没有居中对齐，也就是没有center这个取值，给float标签设置“margin: 0 auto;”也是无效的，而且任何标签都可以水平排版，不再有inline、block、和inline-block标签之分，就叫float标签，因为inline、block、和inline-block标签是针对标准流中的标签说的，所以，一个标签一旦脱离标准流，就不再是它们中的任何一个了，float标签width和height属性的默认值是auto，也可以手动设置，并且不会忽略其父标签的padding，当某一个标签float之后，首先这个标签需要从标准流中脱离，这个就叫做float标签的脱标，当上一个float标签脱标时，它的下一个异行标签就会占满它原先的位置，等到脱标的float标签float过来之后，就会盖住它的下一个异行标签，当它的下一个异行标签中有文字时，上一个float标签不会挡住它的下一个异行标签中的文字，这就叫做字围（文字环绕）现象，当一个标签是“float: left;”时，就不要给它设置margin-left属性，否则在有些浏览器上可能会出现bug，另一侧同理，正常来讲，标签脱标时在哪行，float之后就在哪行，但是当此float标签之前的标签/内容无法独占一行并且不满一行时，此float标签就会向上移动一行，在有多个标签同时float的情况下，当没有超出其父标签width值的范围时，下一个float标签会紧跟上一个相同方向float标签之后并排显示，当超出了其父标签width值的范围时，就会自动换行（可以超出其父标签height值的范围），在向相同方向float的标签由于自动换行而没有显示在一行时，当给下一行的float标签设置“margin-left/margin-right: -100%/-自身的宽度值;”时，下一行的float标签就会在不超出其父标签width值范围的情况下向上移动一行，并从开头/结尾处覆盖它上一行的float标签，当一个标签的width和height值都是auto且形成了BFC区域时，其文字内容/标准流/float的子标签可以撑起其width和height值，但其absolute/fixed子标签不可以（因为形成BFC区域只能解决由于子标签float所导致的宽高塌陷，absolute和fixed不适用），当一个标签的width和height值都是auto且未形成BFC区域时，其文字内容/标准流的子标签可以撑起其width和height值，但其float/absolute/fixed子标签不可以（因为脱标了，只要是脱标了都不可以），另外，其子标签的子标签只能间接撑起其width和height值，无法直接撑起，当两个inline/inline-block标签的顶部没有对齐时，只需要让其中一个脱标，就对齐了

3.定位流的排版方式：分为相对定位、绝对定位、和固定定位，而静态定位属于标准流，不属于定位流，相对定位就是相对于自己以前在标准流中的位置来定位，不脱离标准流，可以用top、right、bottom、left属性来定位（默认值是auto，浏览器默认），意思是距离自己原来位置的上、右、下、左多少px的间距（当取值使用百分数时，代表其父标签width值的百分之多少），然后做相应移动即可，会忽略上级标签的padding，但同一个方向上的定位属性只能使用一个，当给relative标签设置margin/padding等属性时，会先margin/padding，然后以此为基准，再relative，relative可以用于对标签进行微调，但其弊端是会继续在标准流中占用一份空间，就是说标签在relative之前所在的位置，像有个影子一样，仍然被它继续占用着，不利于界面的布局，所以很少单独使用，可以将<ul>“display: flex;”，再将每一个<li>relative，来制作每一个<li>依次向上的animation，因为<li>不脱离标准流，所以不会对flex布局有影响，绝对定位默认情况下就是相对于此web浏览器的视口来定位（即默认参考点就是此web浏览器的视口），脱离标准流，不会占用标准流中的空间，不再有inline、block、和inline-block标签之分，就叫absolute标签，top、left、width、和height属性的默认值是auto（浏览器默认），也可以手动设置（当未设置width值且left和right值同时设置为0时，此absolute标签会横向抻满整个参考点，纵向同理），当absolute标签有一个定位流（静态定位除外）的上级标签时，此absolute标签就会以定位流的那个上级标签作为参考点，并且会忽略此上级标签的padding，当absolute标签有多个定位流的上级标签时，则参考点采取就近原则，当给absolute标签设置margin属性时，会先absolute，然后再margin，当相对于此web浏览器的视口进行absolute时，是以此web浏览器视口页面区域的首屏（即滚动条未发生滚动时的页面）作为参考，当出现了滚动条时，会随着滚动条的滚动而滚动，即会受到滚动条的控制，所以也很少单独使用，最好的解决办法就是配合着使用，子绝父相，给absolute标签设置“margin: 0 auto;”是无效的，当想要让absolute子标签在其父标签中永远水平居中时，只需要给absolute子标签设置“left: 50%;(//50%的意思是父标签宽度的一半)  margin-left: -自身宽度的一半px;/transform: translateX(-50%);(//50%的意思是自身宽度的一半，用transform属性比较方便)”即可，垂直居中也一样，只需要给它设置“top: 50%;  transform: translateY(-50%);”即可，当一个absolute标签的内部存在<a>时，必须给此absolute标签添加一个z-index属性，取值取大一点就可以了，否则它内部的<a>就会失效，当某个绝对定位元素受限于其父容器宽度，而无法自适应其内容宽度时，只需要给此绝对定位元素设置width: max-content即可，固定定位就是相对于此web浏览器的视口来定位（即参考点就是此web浏览器的视口），脱离标准流，不会占用标准流中的空间，不再有inline、block、和inline-block标签之分，就叫fixed标签，top、left、width、和height属性的默认值是auto（浏览器默认），也可以手动设置（当未设置width值且left和right值同时设置为0时，此fixed标签会横向抻满整个参考点，纵向同理），当给fixed标签设置margin属性时，会先fixed，然后再margin，当相对于此web浏览器的视口进行fixed时，是以此web浏览器视口页面区域的那块屏幕作为参考，当出现了滚动条时，则无视滚动条的存在，也不受滚动条控制，IE6不支持固定定位，静态定位就是一个标签的默认状态，默认情况下一个标签就是静态定位（标准流）

五、不同父标签里的float子标签并排显示的解决方式

1.给前面的父标签设置高度：正常来讲，能不写高度就不写高度，所以这种方式用得很少

2.给后面的父标签添加clear属性：当我们给某个标签添加clear属性之后，那么这个标签的margin-top属性就会失效

3.隔墙法：分为外墙法和内墙法，外墙法是在两个父标签中间添加一个额外的block标签，然后给这个block标签设置“clear: both;”，外墙法虽然可以让第二个父标签使用margin-top属性，但不可以让第一个父标签使用margin-bottom属性，也不能撑起第一个父标签的高度，内墙法是在第一个父标签中所有子标签最后添加一个额外的block标签，然后给这个block标签设置“clear: both;”，内墙法既可以让第二个父标签使用margin-top属性，也可以让第一个父标签使用margin-bottom属性，还可以撑起第一个父标签的高度，内外墙都可以设置墙的高度来充当两个父标签之间的margin，因为HTML设置的是结构，而隔墙法改变的却是样式（无语义），违反结构和样式分离的原则，所以不常用隔墙法来解决不同父标签里的float子标签并排显示的问题

4.伪元素选择器法：伪元素选择器的作用就是给“双冒号”前的选择器所指代的标签内部的最前/后面添加一个子标签，格式为“选择器::before/after {CSS属性: 取值;}”，本质上就是内墙法，只不过是直接通过CSS代码添加了内墙，其它特性跟内墙法都一样，例如“第一个父标签的选择器::after {content: “”;(//设置所添加的子标签的内容为空，必须设置此CSS属性)  display: block;(//设置所添加的子标签为block标签)  height: 0;(//设置所添加的子标签的高度为0)  visibility: hidden;(//设置所添加的子标签看不见)  clear: both;(//让所添加的子标签不要占满前面float标签的位置) }”，IE6浏览器无法解析伪元素选择器，需给第一个父标签额外设置一句“*zoom: 1;”才可以兼容IE6

5.“overflow: hidden;”法：给第一个父标签设置一句“overflow: hidden;”即可（本质也是内墙法），与内墙法的特点一样，既可以让第二个父标签使用margin-top属性，也可以让第一个父标签使用margin-bottom属性，还可以撑起第一个父标签的高度，但是此法在IE6中无效，需要额外给第一个父标签设置一句“*zoom: 1;”

六、CSS中的选择器

1.基本选择器：

标签选择器：作用是选中指定的标签名称所指代的所有标签，在当前界面中无论标签藏得多深都能被选中，然后设置CSS属性，格式为“标签名称 {CSS属性: 取值;}”，只要是HTML中的标签就可以作为标签选择器，例如h/a/img/ul/ol/dl/input...

id选择器：作用是选中指定的id名称（即id值）所指代的某个标签，然后设置CSS属性，格式为“#id名称 {CSS属性: 取值;}”，每个HTML标签都可以设置id属性，一个HTML标签只能绑定一个id名称，在同一个界面中id的名称是不可以重复的，在使用id选择器时一定要在id名称前面加上“#”，标签的id名称只能由字母/数字/下划线组成，但是不能以数字开头，id名称不建议使用HTML标签的名称，比如不能是a/h1/img/input...，当标签的id值由多个单词组成时，建议使用下划线来连接，当仅仅是为了设置样式时，我们一般不会使用id属性，因为在前端开发中id属性是留给JS使用的

类选择器：作用是选中指定的类名（即class值）所指代的所有标签，然后设置CSS属性，格式为“.类名 {CSS属性: 取值;}”，每个HTML标签都可以添加class属性，在同一个界面中class值是可以重复的，类名的命名规范跟id名称的命名规范一样，当标签的类名由多个单词组成时，建议使用中划线来连接，类名就是专门用来给标签设置样式的，在HTML中每个标签可以同时绑定多个类名，格式为“<div class=“类名1 类名2 ...”></div>”，可以将一些公共的CSS样式代码放到同一个类选择器中，然后将此类名绑定给标签即可

交集选择器：作用是选中同时满足所有选择器的标签，然后设置CSS属性，格式为“选择器1选择器2 {CSS属性: 取值;}”，选择器可以使用标签/id/类选择器等，选择器和选择器之间没有任何的连接符号

并集选择器：作用是选中所有选择器所指代的所有标签，然后设置CSS属性，格式为“选择器1, 选择器2 {CSS属性: 取值;}”，并集选择器必须使用逗号来连接，选择器可以使用标签/id/类选择器等

2.层级选择器：

子代选择器：作用是选中选择器1内部的子代选择器2所指代的所有标签，然后设置CSS属性，格式为“选择器1>选择器2 {CSS属性: 取值;}”，选择器可以使用标签/id/类选择器等，流程是先找到选择器1所指代的标签，然后在此标签的子代标签中选中选择器2所指代的所有标签，子代选择器只会查找儿子，不会查找其他被嵌套的标签，子代选择器需要使用“>”符号来连接，不能有空格，并且可以一直延续下去

后代选择器：作用是选中选择器1内部的后代选择器2所指代的所有标签，然后设置CSS属性，格式为“选择器1 选择器2 {CSS属性: 取值;}”，选择器可以使用标签/id/类选择器等，流程是先找到选择器1所指代的标签，然后在此标签的所有后代标签（不仅仅是儿子，也包括孙子和重孙子等）中选中选择器2所指代的所有标签，后代选择器需要使用空格来连接，并且可以一直延续下去

相邻兄弟选择器：作用是选中选择器1后面相邻的同级选择器2所指代的首个标签（必须是相邻的、紧跟的，不能选中被隔开的），然后设置CSS属性，格式为“选择器1+选择器2 {CSS属性: 取值;}”，选择器可以使用标签/id/类选择器等，相邻兄弟选择器需要使用加号来连接，并且可以一直延续下去

通用兄弟选择器（CSS3）：作用是选中选择器1后面的某个同级选择器2所指代的所有标签（无论有没有被隔开都可以选中），然后设置CSS属性，格式为“选择器1~选择器2 {CSS属性: 取值;}”，选择器可以使用标签/id/类选择器等，通用兄弟选择器需要使用“~”来连接，并且可以一直延续下去

3.序选择器（CSS3）：

同级别的序选择器：不区分标签名称，选择器的冒号前面可填写任意选择器，“:first-child”的作用是当冒号前的标签是其同级别标签中的首个时，就将其选中（否则就不选中），“:last-child”的作用是当冒号前的标签是其同级别标签中的最后一个时，就将其选中，“:nth-child(n)”的作用是当冒号前的标签是其同级别标签中的第n个时，就将其选中，“:nth-last-child(n)”的作用是当冒号前的标签是其同级别标签中的倒数第n个时，就将其选中，“:only-child”的作用是当冒号前的标签是其同级别标签中的唯一一个时，就将其选中，“:nth-child(odd)”的作用是当冒号前的标签是其同级别标签中的第奇数个时，就将其选中，“:nth-child(even)”的作用是当冒号前的标签是其同级别标签中的第偶数个时，就将其选中，“:nth-child(xn+y)”的作用是当冒号前的标签是其同级别标签中的第xn+y个时，就将其选中，x和y是用户自定义的，而n从0开始递增，一直递增到同级别标签的总个数，例如2n+0为偶数，2n+1为奇数

同级别同标签名称的序选择器：区分标签名称，选择器的冒号前面可填写任意选择器，“:first-of-type”的作用是当冒号前的标签是其同级别同标签名称标签中的首个时，就将其选中（否则就不选中），“:last-of-type”的作用是当冒号前的标签是其同级别同标签名称标签中的最后一个时，就将其选中，“:nth-of-type(n)”的作用是当冒号前的标签是其同级别同标签名称标签中的第n个时，就将其选中，“:nth-last-of-type(n)”的作用是当冒号前的标签是其同级别同标签名称标签中的倒数第n个时，就将其选中，“:only-of-type”的作用是当冒号前的标签是其同级别同标签名称标签中的唯一一个时，就将其选中，“:nth-of-type(odd)”的作用是当冒号前的标签是其同级别同标签名称标签中的第奇数个时，就将其选中，“:nth-of-type(even)”的作用是当冒号前的标签是其同级别同标签名称标签中的第偶数个时，就将其选中，“:nth-of-type(xn+y)”的作用是当冒号前的标签是其同级别同标签名称标签中的第xn+y个时，就将其选中，x和y是用户自定义的，而n从0开始递增，一直递增到同级别同标签名称标签的总个数，例如2n+0为偶数，2n+1为奇数

4.HTML属性选择器：

HTML属性选择器：作用是根据指定的HTML属性名称找到所对应的标签，然后设置CSS属性（选择器可视情况不写，取值加不加引号均可），第一种格式为“选择器[HTML属性]”，第二种格式为“选择器[HTML属性=取值]”，第二种格式最常见的应用场景就是用于区分<input>的type属性，因为type属性有好多取值，第三种格式为“选择器[HTML属性|=取值内容的一部分]”，当此部分内容在开头，并且用“-”和其它内容隔开时，就将其选中，第四种格式为“选择器[HTML属性^=取值内容的一部分]”（CSS3），只要这部分内容在开头，就可以被选中，第五种格式为“选择器[HTML属性~=取值内容的一部分]”，当此部分内容用空格和其余内容隔开时，就将其选中，第六种格式为“选择器[HTML属性*=取值内容的一部分]”（CSS3），只要取值中包含这部分内容，就将其选中

5.通配符选择器：

通配符选择器：作用是选中当前界面上所有的标签，然后设置CSS属性，格式为“* {CSS属性: 取值;}”，在通配符选择器给界面上所有的标签设置CSS属性之前，会遍历所有的标签，当界面上的标签比较多时，就会比较消耗性能，所以一般不会使用通配符选择器

6.伪类选择器：

<a>/标签的伪类选择器：<a>的伪类选择器是专门用来设置<a>在不同状态下的CSS样式的，“a:link”用来设置在默认状态下的CSS样式，“a:visited”用来设置在被访问过的状态下的CSS样式，“a:hover”用来设置在鼠标悬停状态下的CSS样式，“a:active”用来设置在鼠标长按状态下的CSS样式，<a>的四种伪类选择器可以单独出现也可以一起出现，当一起出现时，编写的顺序必须要遵守爱恨原则“love hate”，即link，visited，hover，active，当<a>默认的CSS样式和被访问过的CSS样式一样时，可以合并来写，例如“a {color: green;}”，在编写CSS代码时，<a>的伪类选择器最好写在标签选择器的后面，<a>盒子相关的CSS属性都写在标签选择器中，例如display/width/height/padding/margin属性等，<a>font/background相关的CSS属性都写在“a:link”中，hover和active伪类选择器可以用在任何标签上，格式为“标签1:hover”，“标签1:hover>标签2(//当鼠标hover在标签1上时，标签1的儿子标签2的哪个CSS属性的取值发生变化)”，虽然伪类选择器不具有层叠性，但其本质是hover/active时某个CSS属性的取值所发生的变化，所以变化后的某个CSS属性的取值不能跟变化前的完全雷同，否则无效

七、CSS属性的三大特性

1.继承性：当给上级标签所设置的一些CSS属性其下级标签也可以使用时就叫做继承性，只有color/font-/text-/line-/list-开头的CSS属性才可以被继承，在CSS属性的继承中，只要是其后代标签都可以去继承，<a>的color和text-decoration属性以及<h1>的font-size属性是不能去继承别人的，继承性一般用于设置网页上的一些共性信息，例如网页的color和font等属性

2.层叠性：层叠性就是CSS处理冲突的一种能力，当在同一个选择器中重复设置相同的CSS属性/多个选择器给相同的标签设置了相同的CSS属性时，就会发生层叠，CSS的全称为Cascading Style Sheets（层叠样式表）

3.优先级：优先级高的CSS属性会层叠掉优先级低的，当在同一个选择器中重复设置相同的CSS属性时，哪个CSS属性写在后面哪个CSS属性的优先级就更高，当选中相同标签的多个选择器的类型相同时，哪个选择器写在后面哪个选择器所重复设置的相同CSS属性的优先级就更高，但是在父子关系的标签中，例如“ul:hover li {width: 100px;}  ul li:hover {width: 460px;}”，当<ul>被hover的时候，它内部所有<li>的宽度变窄，当<li>被hover的时候，其宽度变宽，两个width属性谁也层叠不掉谁，同时生效，利用此特性可以制作手风琴效果，详见“92-过渡模块-手风琴效果.html”，当选中相同标签的多个选择器的类型不同时，优先级为id选择器>序选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认，当选中相同标签的多个选择器所包含的子选择器比较多时，优先级的权重为id名称个数多的>id名称个数少的>类名个数多的>类名个数少的>标签名称个数多的>标签名称个数少的，当id名、类名、和标签名的个数都一样时，哪个选择器写在后面哪个选择器所重复设置的相同CSS属性的优先级就更高，当间接继承上级标签的CSS属性时，哪个上级标签离目标标签比较近就继承谁的，对于使用选择器直接给标签所设置的CSS属性（除了间接继承的都算），可以把“!important”写在某个重复设置的相同CSS属性的取值的后面，分号的前面，将其优先级提升到最高

八、CSS的书写格式

1.行内样式：可以直接将CSS代码写到HTML中的开始标签当中，格式为“style=“CSS属性1: 取值1; CSS属性2: 取值2; ...””，当需要添加多个CSS属性时，用空格隔开即可，除了“!important”以外，行内样式的优先级最高

2.内嵌（内联）样式：可以在head的结束标签之前写一对<style>，然后在<style>中编写CSS代码

3.外链（引入）样式：可以单独新建一个.css文件，把CSS代码写到这个文件中，然后在head的结束标签之前，新建一个<link>（单标签），href值是需要被引入的css文件的相对路径，“引入样式”在显示界面的时候，会先加载CSS样式后加载HTML结构，当用户看到界面时，一定已经设置了CSS样式，所以是最常用的

4.导入样式：可以单独新建一个.css文件，把CSS代码写到这个文件中，然后在html文件中的一对<style>中输入“@import “需要被导入的css文件的相对路径””即可，“导入样式”是CSS2.1推出的，所以有兼容问题，此样式在显示界面的时候，会先加载HTML结构后加载CSS样式，当用户看到界面时，不一定已经设置了CSS样式，所以用户体验不好

九、字体图标

img有诸多优点，但是缺点也很明显，img会增加网页的大小和访问网页时http请求的次数，所以性能不太好，也不能很好的进行放大，有可能会造成失真，虽然字体图标的本质是文字，但是也可以做出和img一样的效果，不但体积小，而且可以随意修改颜色，大小，透明度等，扩展性很强，常用字体图标库为www.iconfont.cn和icomoon.io，推荐前者

字体图标的使用：

可以先让设计师提供svg格式图标，然后上传到www.iconfont.cn转成代码并下载下来，或者我们直接在此网站上找自己想要的字体图标，首先需要登录，然后将自己想要的字体图标添加到购物车，可以多添加几个，然后点击“添加至项目”，随便新建一个项目名称，然后点击确定，然后点击“下载至本地”，解压缩之后，然后将iconfont开头的文件（全部拷贝也可以）拷贝到站点文件夹里的font文件夹中，然后用浏览器打开其中的demo_index.html文件（即使用说明），然后就会看到一个网页，有相关介绍和使用说明，共有Unicode、Font class、和Symbol三种方法，兼容性各有不同，前两种只支持单色图标，第三种支持多色图标，当想要使用Unicode方法时，按照教程复制粘贴两段CSS代码，但别忘了要将URL值修改成文件当前所在的路径，也可以随意修改font-size值，最后的渲染格式为“<span class=“iconfont”>3</span>”，“3”是相应字体图标所对应的Unicode码，在使用说明的开头部分就有每个字体图标所对应的编码，只要修改成对应的编码就会渲染出相应的字体图标，当想要使用Font class方法时，首先将iconfont.css文件引入到html文件中，再往下道理都是一样的

十、编写网站的流程及注意事项

编写网站要做的第一件事情就是创建站点文件夹（网站的名称）和其中的一些子文件夹和子文件，比如js文件夹、css文件夹、images文件夹、和index.html文件，站点文件夹和下面的子文件夹以及子文件都不能出现中文，然后新建一个css文件，重置所有默认的样式和设置一些全局样式，可以命名为base.css，在以后编写每个页面的时候，都可以将这个文件引入到html文件中，base.css里可以预先设置一些常用的工具类，起一些类名，并设置一些功能，比如“float: left;”、“float: right;”、用伪元素选择器清除float等等，可以添加上“!important”，方便以后在HTML结构代码中拿过来就用，绑定上类名就可以实现功能，就不用在index.css代码中设置了，几乎所有网站的选项卡上的图标（快捷图标/收藏图标）都叫做favicon.ico，快捷图标必须要放到站点文件夹的根目录中，通过<link>“<link rel=“shortcut icon”href=“favicon.ico”type=“image/x-icon”>”引入快捷图标，这个<link>只要放在一对head标签中就可以，比如可以放在<meta charset=“UTF-8”>的后面，<title>的前面，当想要把一张img的格式转成.ico格式时，可以上“比特虫”官网进行在线转换，尺寸选32x32即可，然后设置国产浏览器和IE浏览器的兼容，格式为“<meta name=“renderer”content=“webkit”>(//可以让部分国产浏览器默认采用高速模式渲染页面)  <meta http-equiv=“X-UA-Compatible”content=“IE=edge”>(//为了让IE浏览器运行在最新的渲染模式下)”，然后添加搜索优化的三大标签（即SEO（Search Engine Optimization）的三大标签），第一个是标题标签（即<title>），例如“<title>苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快</title>”，标题标签（即<title>）是网页中第一重要的标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点，谷歌搜索引擎对title的长度限制是35个中文，百度是28个中文，参考百度即可，网站名称的格式为“网站名(域名/英文名)-网站的介绍”，第二个是关键字标签（即<meta>），例如“<meta name=“keywords”content=“苏宁易购网上商城...图书，食品，正品行货”/>”，关键字标签（即<meta>）是搜索引擎重点关注点之一，搜索结果的排序跟网站的seo有关，能否搜索出来就跟关键字标签有关，关键字标签应该限制在6～8个关键词左右，电商类网站可以多几个，第三个是网站说明标签（即<meta>），例如“<meta name=“description”content=“苏宁易购-综合网上购物平台，商品涵盖家电、手机、电脑...全网更低价，让您放心去喜欢！”/>”，网站说明标签（即<meta>）作为搜索结果的内容摘要，就是简要说明网站主要是做什么的，补充在标题标签和关键字标签中未能充分表述的说明，描述中要出现与正文内容相关的关键词，这部分内容是给人看的，所以要写得很详细，让人感兴趣，吸引用户点击，含空格在内的字符数不要超过120个，搜索优化的三大标签依次排列就行，然后设置在苹果设备的safari浏览器下的一些快捷图标，例如“<link rel=“apple-touch-icon”href=“./apple-touch-icon.png”>  <link rel=“apple-touch-icon”sizes=“114x114”href=“./apple-touch-icon114.png”>  <link rel=“apple-touch-icon”sizes=“152x152”href=“./apple-touch-icon152.png”>  <link rel=“apple-touch-icon”sizes=“180x180”href=“./apple-touch-icon180.png”>(//apple-touch-icon是苹果设备的safari浏览器下的私有的取值，作用是设置将网页保存到浏览器主屏幕时所显示的图标)”，然后引入CSS Rest类库，将所有浏览器的自带样式清除掉，保持各浏览器渲染的一致性，reset.css会很暴力的清除所有的默认样式，normalize.css会保留有价值的默认样式，并且修复了很多浏览器的bug，然后在index.css里给<body>设置全局通用font-family和line-height等CSS样式（参数由设计师提供），当引入多个css文件时，一定要将别人的css文件放到前面，将自己的css文件放到后面，避免自己写的CSS被别人的CSS所覆盖，在index.css代码中，编写的每一个大部分都要有注释予以标注，比如“/*头部开始*/”，“/*头部结束*/”，“/*内容开始*/”，“/*内容结束*/”，网页的logo部分先用<div>嵌套<h1>，因为对于一个网站来说，logo就是最重要的东西，它是一个网站的标志，所以应该强调一下它非常重要，然后<h1>再嵌套<a>，把<a>转成inline-block标签，然后让logo的img充当其background-image即可，查询任何属性除了上w3c之外，还可以在百度搜索这个属性，然后输入空格并打上mdn，然后开始搜索即可，标签类名的选取可以参考一些通用的单词，工具栏（toolbar），头部（header），部分（section），内容区域（main），横幅广告（banner），秒杀/限时抢购（seckill），导航（nav），列（col），蒙版（mask），进度条相关（progress进度条，bar背景，line前景，dot小圆点），主要内容所在的区域，即版面正中的位置，就叫做版心，当是版心时，需要在类名后加上“-in”，当一个网页的很多部分都需要用到版心，并且版心的宽度都一样时，可以在bass.css里边设置一个工具类，例如“.div-in {width: 数字px;  height: 100%;  margin: 0 auto;}”，浏览器的适配方式有渐进增强和优雅降级两种，渐进增强的意思是先针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果和交互的改进，以及功能的追加，以达到更好的用户体验，优雅降级的意思是一开始就在高级浏览器上构建完整的功能，然后再针对低版本浏览器进行兼容，现在微软都抛弃ie浏览器转而支持edge浏览器了，所以很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，再根据实际情况修补低版本浏览器问题，修补时最常见的做法就是为低版本浏览器单独制作一个跳转页面，提示用户升级浏览器版本

十一、响应式网站

根据网页的不同宽度而智能的展现不同设备上页面排版的网站就叫做响应式网站，根据浏览器的不同宽度来设置标签的不同CSS样式就叫做媒体查询，但不适用于比较复杂的网页，媒体查询的内嵌格式为“@media 媒体类型and (条件) {具体的CSS代码;}”，例如“@media screen and (min-width: 1200px) {div {width: 500px;  height: 500px;  background: red;} }”，在这里的“@media”可以理解为英文的if，意思是当条件满足时，就执行后面“{}”中的CSS代码，screen是媒体类型的一种，意思是“用于电脑屏幕、平板电脑、和智能手机等”，类似还有很多媒体类型，详见w3c，媒体查询的引入格式为“<link rel=“stylesheet” href=“css/xxx.css” media=“媒体类型and (条件)”>”，当想要分别给电脑、平板、和手机设置样式时，一定要将PC的CSS样式写在前面，Pad的CSS样式写在PC的后面，Phone的CSS样式写在Pad的后面，当顺序错了时，可能会遇到一些bug，PC端的css文件不用添加media限定条件，否则当网页宽度缩小后，其所有的CSS代码都会失效，就无法在Pad和Phone端的css文件中复用了，这样势必就会再编写很多冗余的CSS代码，增加不必要的工作量，我们只需要在Pad和Phone端的css文件中通过相同的选择器覆盖掉不同的CSS样式即可，通过CSS是无法替换菜单中的文字的，只有在所需要改动的HTML代码下面再重新写一份菜单的HTML代码，上下分别绑上不同的类名，比如“nav1”和“nav2”，然后在PC端的css文件上写上“.nav2 {display: none;}”，在Pad端的css文件上写上“.nav1 {display: none;}  .nav2 {display: block;}”即可，然后通过开发者工具（F12）找到需要被覆盖CSS样式的标签的CSS选择器，复制粘贴到Pad的CSS代码中，再输入修改后的CSS属性及取值即可，在从PC端网页变为Pad端网页时，网页势必会变窄，当网页底部的声明区域是由两个<div>分别“float: left;”和“float: right;”所构成时，一旦网页变窄就有可能会被强制分成两行，即出现float标签自动换行的现象，我们只需在HTML代码中将右侧<div>放到左侧<div>的上面，在Pad端的CSS代码中给左侧<div>设置“float: none;(//将左侧<div>变为标准流)  width: auto;(//宽度自适应，防止跟父标签同宽)”即可，这样一来，由于左侧<div>里全是文字，所以就会出现字围现象，就不会被强制分成两行了，媒体查询中所设置的min-width值不是固定的，min-width值是根据自己企业的需求来设置的，并没有一个固定的值代表电脑/平板/手机，可以借鉴bootstrap中文网->bootstrap3中文文档->全局CSS样式->栅格系统里的参数，也可以根据设计师的设计图来，当想要使用浏览器的开发者工具（F12）模拟手机时，需要设置一下模拟手机时页面的缩放大小，只需要在<title>的上/下面加上一行“<meta name=“viewport”content=“width=device-width,initial-scale=1.0”>(//输入“meta:vp”然后按Tab键即可)”

十二、网页的三栏布局

网页两侧部分的宽度不变，中间部分的宽度自适应的布局方式叫做网页的三栏布局，分为圣杯布局和双飞翼布局，两者实现的功能都一样，双飞翼布局可以看作是圣杯布局的升级版，首先进行前期的准备工作，先设置一个父<div>，不用设置width和height属性，里面放三个子<div>，第一个子<div>为网页的中间部分，然后分别为网页的左右部分，之所以把中间部分的<div>放到最前边，是因为网页的中间部分一般都放一些img，img的加载需要一些时间，当在HTML的结构上让中间部分的<div>先加载时，用户体验会好一些，然后设置中间部分的子<div>的width值为100%，height值自定义，并自定义两侧部分的子<div>的width和height值，然后让三个子<div>都“float: left;”即可，这些前期的准备工作完成之后，圣杯布局的流程是使父<div>的padding-left和padding-right值分别等于两侧子<div>的width值，然后给左侧子<div>设置“margin-left: -100%;”，给右侧子<div>设置“margin-left: -自身的宽度;”，由于float标签不会忽略其父标签的padding，所以它俩会从开头和结尾处将中间部分的子<div>盖住，只需要将它俩都relative，使它俩不要盖住中间部分的子<div>即可，双飞翼布局的流程是给中间部分的子<div>内部再嵌套一个子<div>，给它设置跟它父标签一样的height值，width值不用设置，并且给它设置margin-left和margin-right值分别等于左右两侧子<div>的width值（其实给中间部分的子<div>设置padding-left和padding-right属性也可以，只不过会变大，再加上一句“box-sizing: border-box;”就不会变大了），然后给左侧的子<div>设置“margin-left: -100%;”，给右侧的子<div>设置“margin-left: -自身的宽度值;”即可，最后，无论圣杯布局还是双飞翼布局，都需要给父<div>设置一个min-width属性，防止网页无限缩小后变形

十三、移动端适配方案

在前端开发中，视口的水平方向和垂直方向都是由很多小方格组成的，一个小方格就叫做一个像素（pixel），像素的特点是不会随着视口大小的变化而变化，是一个固定单位（即绝对单位），而百分数的特点是会随着其父标签宽高的变化而变化，是一个动态单位（即相对单位），而em是自身font-size值的倍数值，也一个动态单位（即相对单位），比如某个标签的font-size值是12px，则此标签的1em就等于12px，当某个标签没有设置font-size值时，此标签的em就参考距离自己最近的上级标签的font-size值，当一直找到<html>还是没有设置font-size值时，就参考此web浏览器默认的font-size值，而rem（root em）跟em相似，也一个动态单位（即相对单位），只不过区别在于rem参考的是根标签<html>的font-size值，当<html>没有设置font-size值时，就参考此web浏览器默认的font-size值，而vw（Viewport Width）和vh（Viewport Height）也是一个动态单位（即相对单位），1vw是此视口width值的百分之一，1vh是此视口height值的百分之一，vw和vh都会随着此视口大小的变化而变化，vmin/vmax就是在此视口下vw和vh中较小/大的那个，vmin和vmax的使用场景是在移动端开发中，当手机屏幕旋转时，保证此标签的宽高不变，web浏览器窗口的可视区域就叫做视口，在PC端，视口的宽度值等于此web浏览器窗口当前可视区域的宽度值（单位px），而在移动端，默认情况下视口的宽度值却并不等于模拟器下所显示的宽度值（单位px），这是因为过去PC端网页的版心都是980px，所以乔老爷子为了让PC端网页能够在移动端完美的展示，所以将iOS手机的视口宽度默认设置成了980px，后来谷歌也觉得这是一个非常牛X的方案，所以将Android手机的视口宽度也默认设置成了980px，虽然在移动端将视口宽度设置成980px之后可以让我们很完美的看到整个PC端的网页，但是由于移动端的设备比较小，在模拟器下设备的宽度值是远远小于980px的（比如iPhone5为320px），所以其所展示的PC端内容就会等比缩小，当不想让内容等比缩小时，我们可以通过<meta>来重新设置视口的宽度值，格式为“<meta name=“viewport”content=“width=device-width, initial-scale=1.0”>”，“width=device-width”的意思是将此移动设备视口的宽度值设置成在移动端模拟器下所显示的宽度值（单位是px），“initial-scale=1.0”的意思是设置初始的缩放比为不缩放，maximum-scale/minimum-scale字段可以设置允许用户缩放到的最大/小比例，user-scalable字段可以设置是否允许用户进行手动缩放，取值是yes（默认值）/no，但有些移动端浏览器，比如IOS10以上的Safari，安卓系统下的UC浏览器、QQ浏览器等，为了更好的用户体验，并没有遵循开发者禁止缩放的指定，虽然在<meta>中将user-scalable字段设置成了no，但依然允许用户双指缩放和双击放大，即使是通过加一小段JS代码的方式，比如绑定一个touchmove事件，触发时就“event.preventDefault ();”，但使用手机UC浏览器在我们多次双指操作后，还是会突破我们的限制，实现系统级强制对页面按照用户的意愿双指缩放，淘宝、天猫等大厂的网站也是一样，所以，想要通过web代码，完全实现禁止用户缩放，目前是无法实现的