3月5日前端学习（个人学习）

前言：今天是周末，祝大家周末快乐。今天的学习不多，浅谈一下这个外边距重叠问题。另外就是有关元素定位以及文字的一些杂七杂八的东西。

一、高度塌陷和外边距重叠

上篇文章介绍过了高度塌陷，由于子元素设置浮动后脱离了文档流，导致没有设置高度的父元素无法由子元素的内容撑开高度故造成高度塌陷。今天了解了一些关于外边距重叠的问题：

在对子元素调整外边距时，也同时会影响到父元素，这种影响就叫外边距重叠。

在调整子元素的边距时将父元素的边距也同时拉了下来

 出现问题的原因暂且不提，先谈解决方法：

        针对高度塌陷和外边距重叠的终极方法：

                利用伪类before，after创造一个盒子清除受到的影响：

                

        本来这个方法应该在上篇文章总结的，但其实昨天写完文章之后就没有接着学习了，今天继续学习的时候发现了这个问题就一并解决总结。

二、元素的定位 position

        通过定位可以让元素处于任意一个位置！听起来是不是很牛，但也是和浮动有关。

        定位的默认值：static【静态】 （熟悉的关键字）

        定位分为四种：

相对定位relative        绝对定位absolute        固定定位fix        粘滞定位sticky

        1、相对定位 relative

                说到定位的问题，必不可少的即是偏移量：offset

                offset有上下左右四个方向的偏移量，类似box-shadow一样。

                对方向的解释为：从定位元素到该位置上方 即是top 并且该属性不影响到其他元素的

                边距。

                相对定位的特点：

                        开启定位后，需要通过设置偏移量来使元素改变位置             

                        相对定位是参照元素的原位置进行偏移的

                        相对定位会提升元素的层级（层级后面总结）

                        相对定位没有脱离文档流，也不改变元素的性质

                总的来说，相对定位是为接下来的绝对定位打工的；

                

        2、绝对定位 absolute

                绝对定位最关键的是定位的参照物

                绝对定位的特点：

                        开启绝对定位后，也需要设置偏移量才能让元素位置发生变化

                        开启绝对定位后，脱离文档流

                        绝对定位将改变元素的性质：统一变成块元素，所以块的宽高将被内容撑开

                参照物：包含块

                大多数情况下包含块就是这个元素最近的祖先块元素的内容区【一定是块元素！】

                但在开启不同种定位后，对应的包含块的区域发生改变

                        那么开启绝对定位的元素，它的包含块就是距离它最近的父块元素的内边距以内

                        做个演示：

                         

现在为box2加绝对定位并添加上和左的偏移量，得到结果，box2的位置在左上角将box1中的数字1盖住。得到结果：若是没有找到绝对定位的包含块，那么绝对元素将以根元素作为参照物。

                 现在在box2中新增加一个box4，作为box2的子元素，并且设置box1，box2为相对定位relative，box4设置为绝对定位，给一个上左0偏移量。

                       

                         得到结果：box4将box2覆盖，因此在多级元素中，离开启绝对定位元素最近的一个设置了相对定位的块元素即为包含块

                 3、固定定位

                        特点

                                固定定位是绝对定位的一种

                                大部分特点与绝对定位一样

                                差别 固定定位的参照物永远是浏览器的视口

                                浏览器的视口（viewport）：即浏览器的可视窗口

                                使用了固定定位，在你下拉页面时候，该元素的位置不会发生改变

                        效果如下：

                         不管你如何下拉列表，搜索栏永远在浏览器顶部，因为它是以浏览器的视口作为参照物的。这就很适合广告商了，每次看视频，底下的广告要不就是关不掉，要不就是设置了假的关闭图标！气死人了！

                4、粘滞定位

                        和相对定位特点基本一致，不同的是粘滞定位让元素到达某个部分 固定不动

                        这个的效果也很常见：

                         像京东的这个底部菜单，一开始位置不变，等你下拉到它顶住顶部搜索栏之后它就粘住了，一直都会在那个地方。

 

        定位中 绝对定位使用较为频繁

        因为开启绝对定位之后水平布局的三左三右宽等式变为 三左三右宽加左右=包含块的宽度。

        那么在发生过度约束时将会自动调整right为auto以满足等式

        另外，垂直布局的等式也必须要满足

        而这时要让元素水平垂直居中

        则让上下左右的偏移量为0 margin设为auto【前提：开启了绝对定位】

三、元素的层级

        元素的层级理解可以使用ps图层的概念，一层盖一层。最顶层的显示出来。

        对于开启定位的元素：

                可以利用属性z-index来是元素层级提高而优先显示。

                这个值只能是整数，代表的是层级。数越大，元素层级越高。

                在元素层级相同的情况下，优先显示更靠下的元素。

        另外，父元素无论如何也不会把子元素盖住，此为 ‘虎毒不食子’。

四、字体

        fon-size 字体大小单位

                em 相当于当前元素的一个font-size

                rem 相当于根元素的一个font-size

        font-family 字体类型

                serif 衬线字体

                sans-serif 非衬线字体

                monospace 等宽字体

        text-align 文本的水平对齐

                left        right        center        justify（文本水平对齐）

        vertical-align 文本的垂直对齐

                baseline（default）        top        bottom        middle

        其他文本设置：

                text-decoration 设置文本修饰

                        none        underline        line-through        overline

                white-space 设置网页如何处理空白

                        normal        nowrap（不换行）        pre（保留空白）

                常用的对溢出内容进行省略：

                        white-space：pre

                        overflow：hidden

                        ext-overflow：ellipsis

                         好像这效果也不是很好......

        关于图片：

                在插入图片时，img属于替换元素，垂直对齐时以基线对齐为默认情况，因此它会和边框产生一丢丢缝隙，通过设置非baseline的值来清楚这个缝隙，更方便我们进行网页布局。

五、图标字体

        网页上有很多小元素，他们叫做图标字体。

        由于图标比较大，不灵活，那么就可以将图片设置为字体进行布局，这样既可以调整大小，又可以调整颜色。

         这个是用的fontawesome的图标字体，有免费的，有付费的。其他的可以去iconfont那里下载使用。

        结语：每天学习，每天进步。通过学习完善自己，但也不要忘了劳逸结合。身体是自己的，钱是老板的。三点几嘞！饮茶先啊！写文不易！如有错误请各位路过的大佬提出！感激不尽！最后祝大家周末愉快！明天周日，休息一天！