1、引入方式
在白龙网看来，CSS是层叠样式，引入方式有3种，一是内嵌式，css写在style材中，理论上说style标签可以放在网页的任意位置，但是往往style标签会放在head标签下；二是外联式，css写入外部CSS文件中，通过link在head标签下引入；三是行内式，css写到标签的style属性中。他们优先级是：外联式<内嵌式<行内式。
2、选择器
(1)基本选择器
A、标签选择器
html中的30多个标签，都可以作为标签选择器来使用，样式的撰写格式是：标签名{CSS属性名:属性值;}；设置一个标签如P的样式后，则网页内所有P标签都会有相应的样式。
B、类选择器
类选择器要先定义，后调用；谁调用，谁使用；基本语法是：.类名｛css属性名:属性值;｝类名一般会出现在标签的class属性值中，即class的属性值=类名；一个class可以有多个属性值/类名，每个属性值/类名用空格隔开；与标签选择器相比，类选择器更加精准些，即谁调用类，谁使用相关样式。
C、id选择器
id选择器是用来配合JS工作的，基本语法是：#id属性值｛css属性名:属性值;｝；所有标签都可以有ID属性，每个网页只能有一个ID名称，每个标签只能有一个ID属性，一个ID选择器只能选中一个标签。
D、通配符选择器
通配符选择是用星号表示，基本语法是：*｛css属性值:属性名｝，主要服用来清除外边距、内边距。
（2）复合选择器
A、后代选择器
作为一种复合选择器，后代选择器的语法格式是：父选择器子选择器孙选择器｛｝，主要用在嵌套的标签结构中，选择器之间用空格隔开；可以使用标签选择器、类选择器、ID选择器、星号选择器的一种，或者几种选择器的组合。
B、子代选择器
子代选择器的语法格式是：父选择器>子选择器{}，选择器之间用>隔开，仅对子标签生效，对孙标签等其它标签无效，4类基本选择器都可以在此出现。
C、并集选择器
并集选择器实际上就是让多个选择器放在一起使用同一样式，简化了代码，语法格式是：选择器1，选择器2，选择器3｛｝，选择器之间用逗号隔开，基本选择器都可以使用。
D、交集选择器
交集选择器的表现形式一般有两种，标签选择器类选择器｛｝，标签选择器ID选择器｛｝，且选择器之间没有任何内容，这齐交集选择器。如p.box,p#box等。
E、伪类选择器
a.任何标签都可以使用伪类选择器，实现当鼠标悬停时，出现的变化。样式语法是：a:hover{},div:hover{},p:hover{}等等。
b.结构伪类选择器，选择指定的某个元素：li:first-child、li:last-child、li:nth-child(3)、li:nth-last-child(3)，主要用于子元素相同的情况下，选择某个目标标签。
c.伪元素
伪元素是CSSS模拟的标签效果，有两个，::before，:after，主要用来装假一些小部件；需要注意的是，这两个伪元素是行内元素，且必须有content属性出现，他们才能生效；既然他是标签，那么就可以为其添加字段，字号，颜色，背景等效果。
需要注意的是，结构伪类选择器括号内不仅可以添加数字，也可以添加公式：偶数（2n,4n等等）、奇数（2n+1,2n-1）、前几个数（-n+5）、从第几个数开始（n+5）。
小插曲：emmet语法，是为了提高开发效率而生，可以参考选择器的写法语法来使用。
3、两种样式
（1）字体样式
font-size设置字体大小，属性值可以是5px,5rem等类型，也可以是英文单词设置其大小，有点类似于h系列的标签；
font-weight，设置设置字体的精细，属性值是数字，或者英文bold等，类似于srong/b/th/h标签的加粗；
font-style，设置字段是否倾斜，属性值为italic是字体倾斜，属性值是normao时字段不倾斜，设置em标签为normal时取消倾斜;
font-family，设置字体类型，可以在属性中添加多个属性值，用逗号（,）隔开，以自动适配用户本地电脑上的字体类型；
font:40pxboldnormal宋体;是字体的复合属性，直接把size5pxboldnormal等属性值放在font属性名之后即可，属性值用空格隔开。
另外，需要说明的是，CSS具有层叠属性，按照顺序执行，即：如果一标签有两个颜色属性，color1,color2，那么标签最终的样式将是color2。
（2）文本样式
text-indent:2em;首行缩进；默认情况下，网页标签字体大小为16px，而em可动态的表示一个字体的大小；
text-align:center;水平对齐方式：左对齐，右对齐，居中对齐，对文本，a/span/input/img等标签都可以生效，一般在父标签中设置，子标签生效；标签水平居中，还可以使用margin样式，属性值设置为0和auto即可；
text-decoration，常用属性值为：下划线、删除线、上划线、无划线；这个样式，直接类似于标签ins/u,del/s,em/i,strong/b的功能，当然是否倾斜用font-stylle.
line-height:1;，行高是从上边距到下边距之间的距离，由此可以看出，行高由上边距、文本高度、下边距等3部分组成；单位可以是像素，也可以是数值（表示字号的倍数）；可以用在font复合属性中，如，font:italic70016px/1.5宋体;用在复合属性当中时，字号与行高之间与/隔开；要实现垂直居中，只需要元素的高度=行高即可。
不管是字体样式，还是文本样式，都需要借助浏览器“审核元素”功能来调试样式，当在样式中发现删除时，说明样式有重叠；当发现样式中有黄色感叹号时，说明样式有写错的地方。
对于颜色，有字体颜色、背景颜色两种属性，他们属性值有关键词、rgb、rgba、16进制表示等4种方法。
4、背景设置
（1）背景颜色
默认情况下，标签的背景颜色是透明的，可以在CSS中使用以下4种方式分别设置标签背景颜色：
background-color:pink;关键词
background-color:#ccc;十六进制
background-color:rgba(0,0,0,0.6);rgba
background-color:rgb(2,2,2);rgb
(2)背景图片
设置标签的背景图片之前，首先要给标签一个宽与高，然后使用background-image添加背景图片，此时，背景图片的路径可以不要引号，默认情况下背景图片是水平、垂直平铺的；因此，可以使用background-repeat来控制图片的显示方式：默认repeat水平、垂直平铺，no-repeat不平铺，repeat-x水平平铺，repeat-y垂直平铺。
A、添加背景图片
background-color:pink;
background-image:url(./2.jpg);
B、平铺背景图片
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
C、背景图片位置
background-position:leftbottom;
background-position:50%50%;
背景图片的位置是从两个方向显示的，即：水平+垂直，关键词表示：水平方向有左中右，垂直方向有上中下；另外一种方法是，数字或者百分比表示水平、垂直方向，例如：50%50%，就表示水平垂直居中，等同于centercenter.
D、背景图片大小
background-size:150%;背景图片的大小，可以是数字+px，也可以是百分比。
E、背景图片剪切
background-clip:content-box;
background-origin:content-box;
另外，background可以拥有复合属性值，例如，background:colorimagerepeatposition，各属性值不分顺序，随便放置;需要说明的是，当position为属性值为英文单词时，可以不分顺序，但是当其属性值为数值时，要分顺序；
img图片用来显示重要图片，长与宽可以用img标签属性控制；而背景图片是用来装饰网页的，它的宽与高依赖于其父标签的宽高，当然也可以使用background-size来控制背景图片的长宽。
5、元素的显示模式
（1）块级元素
块级元素具有独占一行、可设置宽高、默认显示父元素宽度，常见的块级元素有：div,h，p,ul,li,ol,dl,dt,dd,form,header,nav,footer,aside,section,article等。
（2）行内元素
行内元素具有一行多个元素，宽高依靠内容自动撑开，不可富庶宽高等特性，常见的行内元素有：a,span,b,u,s,i,strong,ins,em,del等。
由此可以得出，要判断一个元素是块级元素，还是行内元素，我们只需要看看他是否可以定义宽高，或者看他是否独占一行。
（3）行内块元素
行内块元素是一行占多个，又可以设置宽度的元素，常见的有：input,button,select,textarea,另外img也是行内块元素，但是谷歌调试工具却显示他是个行内元素。
（4）块级元素与行内元素的转换
转换的方式有三种，分别是：display:inline;display:block;display:inline-block。
（5）标签嵌套
元素在嵌套时要坚持块级元素作为大容器，可以包裹行内元素，行内块级元素，块有元素，文本等。
但是，也有一些例如，p标签不能包裹div,p,h等；a标可以包裹任意元素，但是不能包裹a标签。
6、CSS特性
（1）继承性
A.文字控制属性都可以继承，例如，文字样式与文本样式都可以继承父标签/元素的样式；可以通过调试工具确定该元素是否可以继承；
B.非文字控制属性不能被继承，例如，行高就不是文字控制属性，就无法被继承。
C.根据经验，给body设置字号，字体，颜色，就可以让网页所有子标签继承上述属性，有特别需要的，利用选择器修改即可。
D.诸如A标签这种自带已有颜色属性的标签，就不再继承父元素的属性，再如h1标签自带字号，也是不能继续父元素设置的大小的，即：其标签自有属性优先级高于父元素属性优先级。当然，可以通过选择器选定a,h这类标签，单独为其定义属性。
（2）层叠性
A.在同一个选择器内，使用多个诸如颜色的样式，此时会出现样式层叠叠加，最终最后的颜色样式生效；
B.使用标签选择器、类选择器，给同一标签添加样式，此时这两个样式都用作用于标签上；
C.当样式发生冲突时，只有优先级（标签属性>内嵌样式>外联样式）相同的样式，才会根据层叠性判断结果。
（3）优先级
A.普通选择器
选择器的选择范围越广，其优先级越低；选择器的选择越精准，其优先级越高，公式如下：继承<通配符（星号）选择器<标签选择器<类选择器<id选择器<行内样式<!important。另外，继承的权重是最低的，就算是加了!important，他依然是最低的，所谓继承，一般是指的父标签。
B.复合选择器优先级
对于复合选择器而言，他的优先级是通过叠加权重，对比权重实现的。叠加的内容分别是：行内样式个数（一级），id选择器个数（二级），类选择器个数（三级），标签选择器个数（四级），首先计算一级选择器个数，如果最多，那么其优先级最高，后面的二三四级就不用再计算了，依次类推；如果4级选择器全部计算完毕，刚好相等，那么就要考虑CSS层叠性了，即谁最在下面，谁生效。另外，！important对应属性值优先级最高，不参与计算，但是要慎用。
判断复合选择器权重的高低，首先要排除继承最低，important最高，铂再使用公式计算权重：(样式个个数，id个数，类个数，标签个数)。另外，使用alt
如果两个样式都是继承，那么可以按照上述公式直接计算权重，然后判断谁执行。
通过做a标签开发导航的案例，增加了三个经验性的知识点，一是快速添加5个及至多个元素标签：a{导航$}*5，如此即可；二是快速添加相同的#号，alt+shitf+左箭头；三是快速设置宽度高度：w400+h400；
使用背景色，或者背景图片，都可以实现玄酷的导航效果。
7、盒子模型
（1）调试工具排错
一般来说，常见的错误有两类，一是选择器错误，一般选中选择器审核元素时，右边不会出现CSS样式，二是语法错误，无非就是样式的属性与属性值是否正确。例如，选择器拼写错误、选择器级别写错、上一步代码写错（例如多出的花括号）、语法错误（例如少个结束的分号，语法错误在审查时一般会出现黄色叹号）、中文冒号/分号。
另外，pxcook工具使用起来，是相当方便的，设计模式对应jpg/gif/png等图片，开发模式对应psd文件。
（2）盒子模型
盒子模型由内容区域、内边距、边框、外边距构成。内容区域用宽度、高度表示，内边距用padding表示，边框用border表示，外边距用margin表示。根据开发经验，一般来说，在写盒子模型时，要从外到内：先写宽高背景，再写内容位置，然后再写具体的细节。
A.内容
盒子内容主要流脑宽与高，可以用简写的方法快速编程：w400+h400+bgc，这就可以写出一个盒子的宽度、高度、背景，非常方便，是emmet语法的功劳。
B.边框
边框对盒子而言，意义非凡。与边框相关的样式是border，他是一个复合属性，属性值分别为：宽度、线型、颜色，属性值之间用空格隔开；另外还可以分别单独定义任意一个边框的样式，通过方向词实现，例如，border-top,border-bottom,border-left,border-right；当然，边框的宽度、线型、颜色也可以单独定义，太麻烦，没有必要，通常使用复合属性比较方便。
C.内边距
a.内边距用padding定义，他是一个复合属性，最多可以添加4个属性值，顺时针（上右下左）分别从四个方向定义盒子的内边距。当padding属性值为4个时，分别单独定义上右下左4个内边距；当padding属性值为3个时，分别定义上右下内边距，同时未定义的左边距=右边距；当padding属性值为2个时，分别定义上右内边距，省略的下边距=上边距，左边距=右边距；当padding属性值为1个，表示上右下左4个内边距相等。
b.借助padding可以让内容自动横向撑开，此时只需要定义盒子的高度，无须定义宽度，然后，再添加一个左右内边距，即可让内容在盒子水平方向自动撑开；同时，如果想让内容在垂直方向自动撑开，也可以参考该方法实现。
c.有内容、内边距、边框，可以借助内减模式（box-sizing:border-box;）自动减去内边距+边框宽度，让盒子保持内容的宽度。
d.修改行内元素的内外边距时，水平位置生效，垂直位置无效，可用line-height解决该问题。
D.外边距
a.外边距margin与padding的使用方法类同。
b.外边距存在“合并现象”，即两个垂直的块状元素中，一个块状元素的margin-bottom，与另外一个块状元素的margin-top，他们两个会自动合并，最终显示外边距最大的值，解决办法是，设置一个元素的外边距即可，另外一个元素的外边距不设置。
c.外边距存在“塌陷现象”，即相互嵌套的块级元素，子元素的margin-top会作用于父级标签。解决办法有两类，一是通过父标签解决，给父标签的border-top/padding-top设置相应的值，不常用；或者给父标签设置超出隐藏：overflow:hidden；另外一类方法是配置子元素，设置子元素为行内块，或者浮动。
小结：
a.清除盒子内边距、外边距的方法，有两种，一种是并集选择器，列出所有可能出现的标签，然后分别设定margin/padding的值为0，即可快速清除；另外一种方法是使用通配符（*）选中所有标签，然后再设定margin/padding为值为0。现时，在清除内外边距的同时，也可以把内减模式（box-sizing:border-box;）加入*号通配符，让所有带内边距+边框的盒子都自动做减法，以保持盒子的宽度、高度与目标值一致。
版心，是网页的有效内容，一般是居中的，可以通过margin属性，分别给定0和auto即可实现。
b.要养成一个习惯，让行高=1，即让行高等于字号的大小，这样在加内边距时，可以更加精准。
c.写代码的习惯，由外到内：先宽高背景色，放内容调位置，控制文字细节。
d.在写样式前，要先清除所有盒子的内边距、外边距，同时要设置盒子为内减模式，即：让盒子自动减去padding、border的宽度，以保持盒子宽度、高度正常，不用人工计算。
e.注意几个常用的CSS样式，font-style设置字体是否倾斜；text-decoration设置文本格式化；list-style控制UL/LI中前置圆点。
8、浮动类型
（1）标准流
是标签默认的排版方式，与标签的显示模式有异曲同工之处。例如，块状元素，独占一行，可设置宽高；行内元素，不能设置宽高，一行显示多个行内元素，这就是标准流，也叫文档流。
（2）行内块缺陷
不在同一行的块状元素，转换为行内块后，虽然他们在同一行了，但是两个块状元素之间会有空格。研究发现，在HTML中把这个DIV放到同一行，就可去掉空格；换面言之，这个空格是由于DIV换行引起的。其实，解决这个空格的办法就是用float布局来处理。
（3）浮动的作用
浮动float有两个作用，一是实现图文环绕，二是实现网页布局（右浮动、左浮动）；浮动有4个特点：
A.浮动元素会脱离标签流，在标准流中不占位置；
B.浮动元素比标准流高半个级别，还可以覆盖标准流中的元素；
C.浮动找浮动，下一下浮动元素会在浮动元素后面左右浮动；
D.浮动后的元素具有行内块的特点，位于同一行，又可设置宽高，但是又比行内块高级。
需要注意的是，浮动元素不能再使用text-align和margin:0/auto居中了。
(4)CSs书写顺序
A.浮动、定位、display
B.盒子模型:margin/padding/border/bgc/w/h；
C.文字、文本样式
（4）消除指定特殊边界样式
使用float排版时要注意，父级元素宽度不够时，多个子元素会自动换行。另外，float布局时，可能会遇到最右边的盒子无边距的情况，可以使用结构性伪类选择nth-child(公式)来选择目标盒子，消除或者增加多余的部分。
(5)清除浮动
对于父子级标签，如果父标签没有给高度，且子标签给了浮动排版，此时父标签后面的标准流会跑到父标签的上面。
A.设置高度
规避的方法是给定父标签一个高度。
B.额外标签法
从根本上解决的办法是额外标签法，即：在父标签内容的最后添加一个标签，然后给该标签添加一个清除浮动的类clear:both。
C.单伪元素标签法
或者可以使用单伪元素消除法，即给父标签添加一个类clearfix，然后通过伪类元素，让CSS自动清除浮动：.clearfix::after{content:'';display:block;clear:both;height:0;visibility:hidden;}，参数中的高度0与隐藏是用来解决浏览器兼容性问题的。
D.双伪元素标签法
还有双伪元素解决法，这个方法不但解决了浮动的问题，顺便也解决了margin“塌陷”现象。实现方法是，添加类名，使用样式修改元素显示模式，然后再清除浮动。具体实现代码如下：
.clearfix::before,.clearfix::after{
content:'';
display:table;
}
.clearfix::after{
clear:both;
}
E.超出隐藏
最简单的解决方法是给父标签一个overflow:hidden;即可。
企业站案例开发过程中用到的技巧：
vscode分屏方法
布局：从外到内，从上到下，从左到右
CSS，浮动，定位，display
先写公共部分，如消除样式，圆点，下划线，浮动，body,版心
如果有margin:0atuo版心居中，在子元素中要使用margin:30pxauto;此时的auto不能为0，否则会覆盖版心的auto。
写好的代码折叠起来，防止写错标签；
纯文字区域可以不给宽度，让其自动撑开盒子即可，给个高度即可，
修改placeholder样式，input::placeholder{}，这也是一个伪类选择器；
图片的垂直居中方式：vertical-align:middle
通栏，只有高度没有宽度，宽度与浏览器一致
margin:4pxauto0;水平居中的变形实现方式；
如果盒子有小边框，可以加个a标签，这样，可以保证边框的高度=字体的高度；
9、定位技巧
截止目前，我们已经学过了3种布局方式，一是标准流，块状元素独占一行，可设置宽高；行内元素，一行多个，不能设置宽高；行内块，一行多个，又可设置宽高。二是浮动，主要解决块状元素水平布局的事儿。三是定位，可解决元素任意布局，一般用于实现元素的叠加摆放。
定位涉及两部分内容，一是定位方式，常用的定位方式有绝对定位、相对定位、固定定位，还有个静态定位不太常用；二是偏移量，有水平左右，垂直上下，可以正负数字px，也可以是正负百分比。对于偏移量，如果左右都出现，则以左为主；如果上下都出现，则以上为主。
（1）相对定位
相对定位position:relative;是相对于元素自己的位置发生的移动动作。他有三个特点，一仍然占有原来的位置，即没有脱标；二是相对自己位置移动；三是不改变元素的属性。
（2）绝对定位
A.重要特点
绝对定位，是相对非静态的父元素进行定位。分两种情况，一是父标签没有定位的时候，相对浏览器进行定位，此时会改变元素的显示模式为行内块，并且元素胶标，不点位；二是父标签有定位的时候，参考父标签进行定位；一般规则是“子绝对父相”，即子级绝对定位，父级相对定准。
综上撰述，如果孙级标签是绝对定位（定位方式+偏移量），那么父级标签有相对定位，就参考父级标签进行定位；如果父级标签没有定位，就找爷级标签定位；如果一直向上，找不到父级以上标签有定位，就参考浏览器进行定位。
B.居中效果
a.在“子绝父相”的前提下，设置绝对定位左上各50%，再通过transfor设置位移-50%，即可在任意地方（浏览器窗口、指定相对定位的标签内）水平垂直居中。
.father{
position:relative;
width:500px;
height:500px;
background-color:red;
}
.son{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:300px;
height:300px;
background-color:pink;
}
b.如果只是想要水平居中，则按照上述格式，给left:50%,transform:translate(-50%);同时，如果只是想垂直居中，则给top一个50%，transform:translate(0,-50%)。换而言之，transform的两个属性值分别表示水平、垂直方向的偏移量。
c.由于绝对定位的元素具有行内块特性，故而要给宽度、高度，否则，没有宽度的元素不显示。
(3)固定定位
固定定位是相对浏览器而进行的定位移动，他有3个特点，一是相对浏览器移动，二是胶标，不占位置，三是定位元素具有行内块属性，可改宽度高度。通过用在导航、左右侧面广告等等地方。
小结：层级关系
就布局而言，标准流<浮动<定位。默认情况下，相对定位、绝对定位、固定定位的层级是一样的，但是，写在最后的层级要比前面的层级高。同时，在定位存在的前提下，可以使用z-index设置层叠的顺序：z-index是整整，值赵大，层级越高；z-index默认值是0；z-index必须与position配合使用，才能生效。
10、装饰美化
A.垂直对齐
vertical-align:baselin|top|middle|bottom；主要解决垂直居中对齐、顶部对齐、底部对齐等问题；
当浏览器遇到行内元素和行内块时会当文字处理，默认是按基线对齐的，故而有时候会出现对不齐的情况。解决办法是通过vertical设置其对齐方式不是基线即可。同时，该技巧也提供了一种图片垂直居中的方法。
a.两个input居中对齐
<style>
input{
height:50px;
box-sizing:border-box;
vertical-align:middle;
}
</style>
<inputtype="text">
<inputtype="button"value="搜索">
b.img与input居中对齐
<style>
img{
vertical-align:middle;
}
</style>
</head>
<imgsrc="./2.jpg"alt="">
<inputtype="text">
c.父子元素顶部对齐
div{
width:400px;
height:400px;
background-color:pink;
}
input{
vertical-align:top;
}
<div><inputtype="text"></div>
d.父子元素对不齐时用垂直居中对齐
<style>
.father{
width:500px;
height:500px;
background-color:pink;
}
img{
vertical-align:middle;
}
</style>
<divclass="father">
<imgsrc="./2.jpg"alt=""width="500"height="500">
</div>
e.行高+vertical让图片垂直居中，如果要水平居中，text-align:center即可
<style>
.father{
width:300px;
height:300px;
background-color:pink;
line-height:300px;
}
img{
vertical-align:middle;
}
</style>
<divclass="father">
<imgsrc="./2.jpg"alt="">
</div>
总之，vertical-align是专治各种垂直居中对不齐的情况，遇到了，添加使用即可。
B.光标
光标主要用来根据网页效果设置鼠标的形状，代码是：cursor:default|pointer|text|move；分别是箭头（）、小手（可点击）、文本（可选择）、十字形（移动）
/*cursor:pointer;*/
/*cursor:text;*/
/*cursor:move;*/
C.圆角
圆角border-radius是一个复合属性，属性值可以是一个值，二个值，三个值，或者四个值，当某个值空时，看对角值即可，与margin/padding的使用方法类似。
border-radius:10px;
border-radius:10px80px;
border-radius:10px39px90px;
border-radius:10px50px90px130px;
如果要画一个正圆，则只需要设置border-radius的值为正方形宽高的一半即可：border-radius:50%;
如果要画胶囊形状，则只需要设置border-radus的值为长方向高度的一半即可：border-radius:50px;
D.溢出隐藏
超出内容的显示效果一般用overflow来控制，超出隐藏比较常用，是否有内容，超出是否有滚动条，不怎么使用。
/*overflow:hidden;*/
/*overflow:visible;*/
/*overflow:scroll;*/
/*overflow:auto;*/
E.元素隐藏
隐藏元素通过有两种访求，visibility:hidden;是占位隐藏不用用；而display:block;是不占位隐藏，工作中经常遇到。通常与hover配合使用，用来实现鼠标经过时显示内容，离开时，隐藏内容。实现访求是：首先设置元素为display:none；然后当鼠标经过时，再设置隐藏的元素为：display:block。
span{display:none;}
.father:hoverspan{
display:block;
}
F.透明度
元素的透明度opacity:0.5;属性值在0-1之间，由不透明到透明之间过渡，不管是图片，还是文字，都可以使用该属性。
11、扩充知识
11、扩充知识
（1）精灵图
就把多张小图放到一张大图上面，减少服务器发送次数，减轻服务器压力。通过3步即可实现：一是设置行内元素盒子与小图的大小一致；二是为盒子添加背景图片；三是使用background-position：负参数1负参数2代码，借助pxbox，调整小图位置，找到并显示小图即可。
（2）背景缩放
一般设计时，背景图片与盒子要等比设计；
background-size的用以设置背景图片的尺寸，属性值可以是数字px、百分比、contain（当图片的宽或者高与盒子尺寸大小一致时，会出现空白）、cover（完全覆盖盒子背景）。
background是一个复合属性，属性值可以同时添加：color、url、repeat、position/size、呼属性值之间用空格隔天。
（3）盒子阴影
box-shadow:10px15px5px21pxgreeninset;有6个属性，分别是水平位移、垂直位移、模糊度、扩散、颜色、内部阴影，六个属性值之间有空格隔开；默认情况下，最后一个属性省略，表示外阴影；加入inset表示内阴影。
（4）过渡效果
过渡translation主要是通过盒子属性的变化实现的，一般有两个属性值：样式属性时间S。两个属性之间有空格隔开。具体使用过程中有两个种方法：
一是设置属性为all，即所有属性都可以过渡，这种情况下，所有属性过渡的时间也是一样的：
div{
width:200px;
height:200px;
background-color:pink;
margin:0auto;
transition:all2s;
}
div:hover{
width:300px;
height:400px;
background-color:red;
}
二是单独设置每个属性值+各自的过渡时间，每个属性值+过渡时间中间逗号（,）隔开：
div{
width:200px;
height:200px;
background-color:pink;
margin:0auto;
transition:width2s,height5s,background-color10s;
}
div:hover{
width:300px;
height:400px;
background-color:red;
}
（5）SEO工作
与前端有关的SEO，标签语义化，网址静态化，
<!--文档版本html5-->
<!DOCTYPEhtml>
<!--语言类型，英文：en，中文：zh-CN-->
<htmllang="en">
<head>
<!--字符编码：万国码，常用-->
<metacharset="UTF-8">
解决浏览器兼容性问题，
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<!--移动端网页-->
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<!--描述-->
<metaname="description"content="">
<!--关键词-->
<metaname="keywords"content="">
<title>Document</title>
<!--浏览器标题栏目图标-->
<linkrel="shortcuticon"href="favicon.ico"type="image/x-icon">
<linkrel="stylesheet"href="style.css">
</head>
<body>
</body>
</html>
（6）准备工作
A.新建根目录，在根目录下放置images/uploads、css(基础样式base.css消除默认样式、公共样式common.css如头部底部、首页样式index.css、首页样式index)、favicon.ico、index.html
先布局base.css，版心宽度与居中
B.LOGO的SEO玩法，在h1标签放a并加入网站名称设置font-size=0隐藏文字，同时给a标签的一LOGO的背景图片。
C.行内元素span如果使用了position:absolute定位，则span即具有行内块属性，不需要再再添加display:inline-block;
D.文字前面的小图片，不仅可以使用精灵图片实现，也可以使用伪元素before来实现。
E.当遇到图片+文字排版，使用vertical-align:middle无法对齐时，可考虑定位功能，快速对齐；
F.底部导航，不需要太多的优化，因此，可以直接使用a标签+竖杠即可。
G.使用伪元素添加标签的方法（::before，::ater）与选择input的placeholder属性的方法类同（input::placeholder），都是在前面添加两个冒号（::），同时需要注意，伪元素是一个行内元素，与position:absolute配合使用时，不需要再display:inline-block了，因为使用定位功能的伪元素。默认被修改成行内块了。
H.开发banner轮播功能时，背景图片+上一张/下一张功能，此时背景图肩负两件事，一是要改变精灵图箭头的位置，二是要改变盒子的位置。进而导致定位可能会不够精准，解决的办法有两个，一是分别用两个标签装盒子与箭头，二是用浏览器的调试工具细化定位。另外，banner功能中的小圆点，可以使用ol/li控制盒子的大小/颜色/圆角等属性，开发出小圆点的功能；对于当前状态，可以用active、current等类命名。
I.有“标题+查看更多”与内容列表的模块开发时，可能会遇到内容列表无法左对齐，这个时候，要查看内容列表对齐了谁，一般对齐了谁，就是谁出了问题。通过是由于对齐到的某个模块的内容超出了其父标签的高度而引起，此时通过审核元素，修改其高度与父标签高度一致即可。