CSS基础详解二（浮动，定位）

CSS基础续集
    常用的CSS样式
        
            在此之前先明白html元素的分类，根据元素的特性分类。
                块级元素
                    总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
                    宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;块级元素的默认宽度是100%。
                    块级元素的特性
                        默认宽高，宽是100%。高是内容的大小。
                        可以手动设置宽高。
                        块级元素是纵向排列的(这也是标准流的布局方式)
                行内元素
                    和相邻的行内元素在同一行;
                    宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
                    行内元素的特性
                        内容本身的大小就是默认宽高。
                        不能手动设置宽高，上下内外边距。只能手动设置左右内外边距。
                        行内元素是横向排列的。
                行内块元素
                    display:inline-block -- 显示为行内块元素，表现为同行显示并可修改宽高内外边距等属性。重点使用注意，行内快元素与其他元素会自动有一条小的缝隙，如图片就是典型的行内快元素，使用时需要把该元素转为块级元素才可以消除掉那条缝隙。
                    行内快元素的特性
                        内容本身的大小就是行内块元素的默认宽高。
                        行内块元素可以手动设置宽高
                        行内快元素是横向排列的。
                html元素的特性可以按这三个点总结。1.默认宽高。2.能不能手动设置宽高。3排列方式。块级默认宽是100%，高是内容自适应大小。行内元素和行内块原申诉默认宽高都是内容自适应大小。
            显示display属性和visibility属性
                display属性作用1:可以隐藏某个元素，并且该元素隐藏后不会再占据页面空间，也就是不会影响页面布局。
                重点：作用2：可以实现块级元素，内联元素，行内快元素的互相转换。使其可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
        常用的布局样式
            定位
                静态定位(static)，就是没有定位的意思。默认值是static。
                固定定位
                    特点
                        元素的位置相对于浏览器的可视窗口是固定位置。即使窗口是滚动的它也不会移动：
                        Fixed定位使元素的位置与文档流无关，因此不占据空间。
                        Fixed定位的元素和其他元素重叠。
                    使用场景
                        可以在浏览器页面滚动元素时元素的位置不会发生改变。
                相对定位
                    特点
                        移动相对定位元素，但它原本所占的空间不会改变。
                    使用场景：充当绝对定位的父亲（子绝父相的用法，后面会详细说）
                绝对定位
                    特点
                        绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览器的位置进行定位。
                        absolute 定位使元素的位置与文档流无关，因此不占据空间。
                        absolute 定位的元素和其他元素重叠。
                    绝对定位的盒子居中算法。关键是用百分比来做。先50%然后再用外边距进行细微调整。
                子绝父相的理解
                    子级绝对定位，不占有任何位置。因此可以在放在父盒子里面任意的一个地方。不会影响其他兄弟盒子。
                    父盒子需要加定位限制子盒子只能在父盒子内部显示。还要限制子盒子因为设置了绝对定位不占有位置造成的脱离标准流现象，严重影响后面的吧布局。
                    父盒子布局时，需要占有空间。因此父盒子的定位只能是相对定位。
                    总结一句话就是：父盒子需要占用位置去布局，所以只能是相对定位。子盒子不需要占有位置(空间)，所以是绝对定位。
                定位z-index属性。使用定位时，有可能会出现盒子重叠的情况。此时，可以使用z-index属性来控制盒子的堆叠顺序(或者说前后顺序)。
                    提示：只有定位的盒子才有这个属性。并且这个属性的值是不带单位的。
                定位总结：定位的语法：定位模式+编译量。定位概括就是起来两点，1.是否占据空间(位置)，2.是相对谁来进行定位的。
                相对定位元素的定位是相对其正常（本来的）位置。
                定位的特殊特性：1.内联元素设置了绝对定位或者固定定位后，可以打破原来内联元素不能设置宽和高的限制，也就是可以设置宽和高（因为转变成了行内块元素，与浮动类似）。2.块级元素设计了绝对定位或者固定定位后，如果不给宽度和高度，则默认内容的宽和高。不再是原来默认的100%宽。
                    常常用来配合绝对定位使用，来限制绝对定位是相对某个父级元素位置使用，而不是原来的相对浏览器的位置使用。这就是典型的子绝父相用法。
                定位的拓展：绝对定位或者相对定位(因为是不占空间的)会压住下面标准流的所有内容。而浮动不会，浮动只会压住下面标准流的盒子，而不会压住下面标准流的图片或者文字。浮动之所以不会压住文字，是因为浮动最初产生的目的是做文字环绕效果的。文字会围绕浮动元素。
            浮动
                浮动的作用：可以改变元素的默认排列方式，让多个块级元素在一行内排列显示。
                    拓展重点：网页布局第一准则，多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
                什么是浮动？float属性用于创建一个浮动框，将其移向一边，直到左边缘或右边缘触及块或者另一个浮动框的边缘。
                浮动的重要特性：1.脱离标准流的控制(浮)移动到指定位置(动)。简称脱标。2.浮动的盒子不再保留原先的位置。浮动起来的盒子是占有空间的(位置的)。浮动起来的元素会放弃原来占有的空间，然后跑动另一层（浮起来的那层）占有空间。这点和定位不同。绝对定位和固定定位都是不占有空间的。无论在那一层都是不占有空间的，要区分开来。
                浮动的重要特性：如果多个盒子设置了浮动，他们会按属性值一行内显示并且顶端对齐排列。这里的重点是顶端对齐。注意：浮动的元素是互相贴靠在一起的（是不会有缝隙的），如果父级元素宽度装不下这些浮动的盒子，多出的盒子会另起一行排列。
                浮动的重要特性：任何类型的元素都可以浮动，一旦设置了浮动，一律都会转变成行内块元素，并具有行内块元素的特性。
                浮动特性总结：1.脱标。2.不再保留原来位置。3.顶端对齐。4.如果宽度不够，会另起一行排列。5.设置了浮动元素会具有行内块元素的特性。
                浮动的典型应用：为了避免浮动的元素以浏览器的边缘来对齐。我们经常采用标准流的父级元素排列上下位置，之后内部元素采用浮动来排列左右位置，这样就可以让浮动对齐父级元素的边缘而不是对齐浏览器的边缘了。简称子浮父标。
                使用浮动布局的注意点
                    1.浮动要和标准流的父盒子搭配使用。(简称子浮父标)。原因有两点。a.用以约束浮动元素对齐的边缘是父级元素的边缘而不是浏览器的边缘。b.避免覆盖后面标准流的元素。因为父元素是标准流，子元素即使浮起来了不保留位置，但是父元素占据了此位置，所以不会造成覆盖后面标准流元素的结果。
                    2.一个元素浮动了，理论上其他兄弟元素也要浮动起来（简称一浮全浮）。以防出现覆盖后面的标准流问题。
                    3.浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流。
                重点：为什么需要清除浮动？由于父级盒子在很多情况下不方便给高度，但是子盒子浮动又不占空间，最后导致父盒子高度为0（意味着父盒子不占据空间，那么后面的标准流就会自动排上），影响后面的标准流布局。
                浮动总结：浮动特性(5大特性)+使用浮动布局的注意点(三大注意点)就相当于掌握了浮动。
                清除浮动的本质是清除浮动元素脱离标准流所造成的影响。清除浮动的策略:因为浮动起来的元素不再保留原来的位置，所以想办法把浮动元素原来所占据那一行的位置填满了(也就是让原来的位置不再空着)。就不会影响后面的标准流了。
                    为什么需要清除浮动？
                        1.父级元素没有高度。
                        2.子元素浮动起来了。
                        前面两个条件造成的结果就是会影响后面的标准流布局。
                    清除浮动的方法
                        额外标签法：就是在最后一个浮动元素的末尾添加一个额外标签(该标签必须是块级元素)，然后再添加属性clear:both就可了。加了块级元素那原来那一行就不再空着了，而这个属性个人感觉是加上去了就可以让最后加上去的块级检测到浮动元素的高度进而把空位补上。也叫隔墙法(理解：相当于再最后一个浮动的元素后面加上了一堵墙，不让其他标准流元素上来)。
                            缺点：会增加冗余标签，使结构变得复杂。
                        给浮动元素的父元素添加属性overflow:hidden。记忆子(不教父之过)。但需要注意的是如果父元素里面还有其他没有浮动的子元素，那么浮动的元素照样会影响这些子元素。也就是这种方法只适用于父盒子里面没有不浮动的子元素。
                            缺点：会使溢出的元素隐藏起来。
                        after伪元素法，是额外标签法的升级版。（一堵墙，只不过这堵墙的标签不用自己写，CSS自动生成）
                            优点：没有增加冗余标签，使结构变得清晰。
                        双伪元素法。是after伪元素法的升级版。(两堵墙，前后各一堵墙，墙的标签也是不用自己写,CSS自动生成。)
           
           
    CSS的三大特性
        层叠性：相同的选择器设置相同的样式，此时一个样式就会层叠(覆盖)掉另一个样式。层叠性的原则：1.样式冲突，那个样式离结构就执行那个样式。2.样式不冲突，不会层叠。
        继承性：子标签会继承父标签的某些样式。一般是跟文字相关的样式。如：text-...，font-...，line-...以及color属性。作用：降低CSS的复杂性。
        优先级：当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则按层叠性执行。选择器不同，则按优先级执行。
            选择器的优先级。
                继承或者通配符选择器的权重是0，0，0，0
                标签选择器的权重是0，0，0，1
                类选择器的权重是0，0，1，0
                id选择器的权重是0，1，0，0
                行内样式的权重级是1，0，0，0
                提示重点：继承过来的样式权重永远都是0，无论继承过来的样式原来的权重是多少，一旦他被继承了，权重全部变为0。所以优先级顺序：行内样式>id选择器>类选择器>标签选择器>继承或者通配符选择器。                                                                         如果是符合选择器，就会有权重叠加的问题，需要去计算，当然这个计算按小学加法去计算即可。但需要注意的是权重无论怎么加，永远不会产生进位。