《自定义列表样式》

简介：在实际工作当中会遇到大量的自定义列表样式的情况，那么这种情况都有一种非常快速的办法来制作；

方法一：清除ul的默认列表样式以后直接给li添加背景图，对齐方式为left center，最后关键的一步通过padding-left单独挤出图片的占位空间即可。  （优点制作快速，缺点：列表样式的图片不能被单击。）

方法二：优点可以让小图片也能被超链接覆盖。 制作方法就是将图片和padding-left付给a标签即可。

《背景图和插如图片的区别》

总结：插入图片是占位的，而背景图片只是装饰不占位（相当于不存在）

两者的优缺点：

背景图片更好控制因为他有定位属性，而且由于它本身不占位也不会造成互相遮挡和影响的问题。

插入图片的优点，插入图片的语义更高更容易被浏览器抓取。如果说比较重要的图片建议用插入图片表示。

在实际工作中会遇到大量的图文混排的效果，这种时候建议多用背景图片因为比较好控制。

插入图片是可以接受宽高定制的，它放在文字堆中本质就相当于一个比较大或者比较小的文字。所以说它可以当成文字来控制。

Img的本质就是一个文字而已。

《盒子模型深度理解》

对于盒子模型来讲不管是添加margin还是padding实际上占位尺寸都是在原来的基础上增加。

而其中的区别是，padding会增大实体的范围，而margin不会影响。所以说我们可以人为padding也是实体范围的一部分；

后期的工作中会移动一个问题， 如果你宽度和高度写死了。那么你再添加padding相当于埋了一个雷，尺寸就和以前不一样了，你需要在原有的宽高基础上减掉padding的尺寸才能保证盒子大小不变。

分清当前的东西是哪个盒子的内容，内容与盒子之间是内边距是padding，然后盒子与盒子之间是外边距margin。

【网页布局方式】

《标准流》

简介：标准流是W3C提出的一个用于网页布局中的非常重要的概念。到底什么是标准流。

对于非逻辑的视觉化的一些界面或者软件 都涉及到排版问题。然后现在市面上的所有软件他们的排版可以分为两大类型一种是 ps类型，还有一种是记事本类型。

流派：

任何可视化的软件当中它天然都会存在一种自动排列的顺序，设计类软件排列顺序叫做定位式，文本类软件排列就遵循文本流，然后网页这种东西也不例外它也会有天然的自动排列顺序来控制它内部显示的一切元素。

什么是标准流：

网页中标准流指的就是块级元素竖直排列，行内元素水平排列，的这种自动排列的顺序。

在网页中所有3类布局方式中 标准流布局是最稳定的一种布局方式，也是W3C重点推荐使用的。

《浮动流》

解释：任何的流派指的都是一种排列方式；浮动流是脱离标准流以外的另外一种排列方式。

浮动流排列方式：

它是脱离标准流排列的第一种方式；浮动流当中只有水平排列，要么左对齐要么右对齐。

浮动流中的注意事项：

一、浮动流又称之为半脱离标准流，也就是说它并没有彻底脱离。它的这种脱离方式会影响到标准流中原有的标签或数据。

二、如果说一个元素从标准流当中脱离了，那么就相当于这个元素被从标准流中删除了一样它就不会占位了。

三、所谓的任何一种流派都指的是同级元素之间的排列。

四、我们之前有一个原则，同级元素之间水平排列和垂直排列只能用一个。这个话到现在为止翻译过来就是同级元素之间标准流或浮动流只能选其一。

《清除浮动知识点》

在标准流当中当某个元素受到浮动的影响以后可以通过clear：both；来清除浮动的影响。

【定位流】

简介：在网页制作中有两种方式的定位，一个是相对定位，一个是绝对定位。都是依据物体的坐标进行位置排列的。它也是一种可以脱离标准流的方式，这种定位流的脱离方式称之为彻底脱离，意义是完全不会影响标准流中的原有数据。所以说很多时候标准流和定位流是可以共存的。

《相对定位》

相对定位脱离方式是占位脱离，意义是占有原来在标准流中的位置后通过坐标来设置新的位置；

基本结构：

Position：relative；

坐标设置：

Left：0；top：0；bottom：0；right：0；通过这些属性可以设置新的坐标值。

《绝对定位》

学习定位实际上主要以后使用最多的就是这个绝对定位。绝对定位是真正意义上的彻底脱离标准流并且不会在标准流中占位。

绝对定位的使用原则：

子绝父相；子级绝对父级相对这种设置可以让绝对定位的元素相对于父级进行定位。

基本结构：

Position：absolute;

个人经验：发现只要脱离标准流的元素它的显示模式都会自动转换，都会自动转换为行内块。

发现块级元素是只有标准流中才存在的。网页布局中最稳定的是标准流，其次浮动流，最后定位流（定位流使用起来有时候比较麻烦因为需要设置坐标和父级相对）所以说制作网页的时候一般网页设计师会选择能用标准流制作的都用标准流制作，不能的就用浮动流，最后才选择绝对定位。

《图层顺序调节属性》

进入了定位的元素都会有上下显示关系，在css当中可以依靠 z-index属性来调节标签的图层显示顺序。数值越大越靠上。 注意事项：它的值是不带单位的。因为它表示一种级别。

《固定定位》

简介：固定定位在低版本浏览器中不兼容这是一个新推出的css属性，低版本浏览器包括（ie678），这些低版本浏览器需要用js来解决固定定位实现的效果。

基本结构：

Position：fixed；作用实现选中元素在整个屏幕上进行固定定位，固定于屏幕；

《知识点》

定位中的坐标设置是可以接受百分比的。（一个盒子的宽高尺寸实际上也可以接受百分比）