web前端 -- Day6基础知识

列表

列表包括无序列表、有序列表、项目列表（自定义列表）。在Day1中已经详细介绍过了列表，这里补充个知识点。

自定义列表样式的制作步骤：
1、清空列表样式；
2、将列表样式图标设置为li的背景，定位方式设置为left center，例如： background: url(../images/arr.jpg) no-repeat left center;
3、通过padding-left: 10px; 挤出列表样式的尺寸；

注意事项：如果希望列表样式带有超链接，只需要将图标设置给标签即可。

盒子模型

什么是盒子模型？
在css中，盒子模型只得是一个标签的占位尺寸，由四部分组成，分别是：content内容、padding内边距、border边框、margin外边距。

在盒子模型中，无论是padding还是margin都会增加盒子的占位尺寸，区别在于，padding增加盒子的实体化尺寸，而margin不会影响，所以说padding也可以认为是实体化的一部分(不给标签尺寸，给一个padding也可以撑开一个盒子)。

注意事项：在网页制作中，给一个固定了尺寸的盒子添加padding（相当于埋了一个雷），会增大盒子的尺寸，要保持盒子大小不变，在原有的基础上减去padding的尺寸可以保证尺寸不变。

网页布局方式

网页布局中主要的方式有：标准流、浮动流、定位流；流派指的是一种排列方式。

1、《标准流》 normal flow
标准流是W3C推出的一个用于网页布局中非常重要的概念，也称之为文档流\普通流。标准流指的是块级标签垂直排列，行内标签水平排列，这种自然的排列表方式。
总结：标准流是网页布局中最稳的一种排列方式。

2、《浮动流》
浮动流是脱离标准流的而一种排列方式，浮动流的牌排列方式是水平排列，要么是左对齐，要么是右对齐。

浮动脱离标准流，==脱标== 不占位置，会影响标准流。浮动只有左右浮动。

注意事项：浮动流是脱离标准流的而一种排列方式，浮动流的这种脱离方式并不是完全脱离，是一种半脱离标准流，也就是说浮动流这种脱离方式会影响到标准流中的数据内容,它会影响别的元素。

   1. 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。
   2.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
   3. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

float 浮 漏 特
浮： 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏： 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
特： 特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次特别的注意浮动可以使元素显示模式体现为行内块特性。

// 清除浮动：作用是清除标签受到浮动的影响，给受影响的标签添加。
clear:both; 

总结：浮动的目的就是为了让多个块级元素同一行上显示

3、定位流
在网页制作中，定位方式有三种：相对定位、绝对定位、固定定位；定位流也是一种脱离标准流的方式，他是一种完全脱离，所以定位流不会影响到标准流。

注意事项: 定位流是设置了定位属性之后，可以通过坐标属性重新设置他的位置的一种排列方式

（1）、静态定位
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

静态定位唯一的用处： 就是 取消定位。position: static;

（2）、相对对位
相对对位：是一种相对标签原有的坐标进行定位，它是一种占位脱离，特点是保留原标签的位置。(类似：停职留薪，虽然位置移动，占有位置，但是原有的位置任然保留)

相对定位属性：position: relative;
坐标属性  top: 0;  right:0;  bottom:0;  left: 0;

相对定位的特点：
1、占有位置
2、在移动的时候以它自身位置为基准点

[知识点]：相对定位比标准流高一级，是浮在上面的

（3）、绝对定位
是相对于窗口定位，它是一种完全的脱离，不会保留原有的位置。(位置移动，不再占有位置，原有的位置不在保留；)

绝对定位属性：position: absolute;
坐标属性  top: 0;  right:0;  bottom:0;  left: 0;

绝对定位的特点：
1、不占有位置
2、父级没有定位：若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)
3、父级有定位：绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位使用原则：子绝父相：子级标签绝对定位，父级标签相对定位这种设置方式可以让子级标签相对于父级标签进行定位。

（4）、固定定位
固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位属性：position: fixed; 作用是将选中的标签固定于屏幕。
坐标属性  top: 0;  right:0;  bottom:0;  left: 0;

固定定位有两点：
1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

总结：
1、如果一个元素脱离了标准流，它的显示模式会自动转换为行内块；（除了相对定位）
2、脱离了标准流的元素，它就相当于删除了一样，不会占位；（除了相对定位）
3、同级标签中，标准流只能用其中一种，不能混用。
4、在网页布局中，优先考虑标准流，然后是浮动流，最后是定位流。

居中定位方式

如何实现一个盒子在整个窗口中水平以及垂直居中？
设置盒子为定位，坐标属性left、top都设置为50%，通过margin肤质让盒子往左上边走，盒子自身宽度和高度的一半即可；

定位的盒子居中对齐
1、加了定位浮动的盒子，margin: 100px auto;就会失效
2、定位的盒子也可以水平或者垂直居中，有一个算法：
（1）、首先left 50% 父盒子的一半大小
（2）、然后走自己外边距负的一半值就可以了 margin-left

      div {
            width: 100px;
            height: 100px;
            background-color: pink;

            /*margin: 100px auto;*/
            /*float: left;*/  /*加了定位浮动float，margin: 100px auto;就会失效*/

            position: absolute;
            left: 50%;
            margin-left: -50px;
            top: 50%;
            margin-top: -50px;
        }

图层顺序调整属性

进入定位流的标签，它们会有图层先后顺序，这个顺序可以通过一个属性：z-index来调整；

注意事项：z-index属性值是一个纯数字，不带单位，表示一种等级，数值越大越靠上。在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
注意：
1、z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2、如果取值相同，则根据书写顺序，后来居上。
3、后面数字一定不能加单位。
4、只有相对定位，绝对定位，固定定位的盒子有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。