3月4日 前端学习（个人学习经验记录）

        前言：今天学习了一些较为重要的前端知识，在经历了两年的计算机学业生活，我终于开始写下第一篇博客。大一整年和大二上学期的学习方法不够正确，只是学了知识，却没有真正理解，隔了一段时间就会模糊，久而久之就消失殆尽了。新学期我将通过博客来记录我一天的学习经验。仅个人经验，若有错误还请大佬指出！感激不尽！

        今天学习的是前端的知识，大概内容为盒子模型、浮动、高度塌陷及其解决方法、页面布局等。

一、盒子模型

        盒子模型在此处就不多说，今天学到的是盒子模型的尺寸。

盒子模型的尺寸是由内容区，内边距和边框决定的。通常情况下我们在设置盒子的边距时总是要调整内容区域的大小。盒子模型中默认调整的width和height都是针对于内容区而言的。CSS中可以通过box-sizing属性来对内容区进行设置：

默认值：content-box 即宽高针对内容区；

可选值：border-box 即针对整个盒子的大小（以此为值则整个盒子的宽高固定 不受其他的影响）

二、几个盒子布局的属性

阴影 box-shadow

阴影属性不影响盒子的大小 ，只作于显示作用。默认在盒子的下方并且和盒子的宽高相同。

经过偏移量可以产生如下的效果：

  该属性分别有四个值可供设置：

         水平 垂直（正右下负左上） 模糊半径（越大越模糊） 颜色

效果如下：

 轮廓 outline

        轮廓设置的是元素的轮廓线，作用和border相同，但轮廓只作为显示用，不影响盒子的实际大小。常用法：鼠标悬停时显示轮廓表示区域。

圆角 border-radius

        常见盒子模型的边框都是直角，通过该属性可以将直角换成圆角或者椭圆；

        该属性支持单独设置四个方向的单独圆角： top  bottom  left  right

        值选的越大，圆角越圆；

        原理时是根据你设置的像素值在角的两边取对应的像素值画圆相切；

        在给值的时候，若提供两个不同的值即可形成椭圆；

三、浮动

         以小白而言，浮动这个东西确实挺好用的。不太了解实际工作中的情景，用浮动确实可以很好的解决很多布局上的问题。  

    浮动 float

        可选值： none（default）、left or right

        通过浮动可以让一个子元素在父元素的左右侧移动

        tips：若设置元素为浮动之后，无需满足3左3右宽的等式（即元素从文档流中脱离）

        特点：

                1、 浮动元素脱离文档流，不占据文档流中的位置

                2、设置浮动后元素向左右移动，并且不会从父元素中移出

                3、每个浮动元素独自占位，下一个浮动元素只能排在后面

        作用：利用浮动制作水平方向的布局；

        另外

                1、浮动元素不会盖住另一个标签中的文字，文字会环绕于浮动元素

        利用浮动，用来设置图片文字的布局；

                2、设置为浮动元素，块元素不在独占页面一行，并且块元素的宽高

        都将被内容撑开。 如下图所示

                3、对于行内元素，令其浮动之后可以让它去除属性，变成块元素。

        拥有块元素的特点，可设置宽高，并且默认被内容撑开；

        简而言之，设置浮动之后就脱离文档流，脱离了文档流之后无需区分块元素和行内元素

四、浮动带来的高度塌陷及其解决办法

        来由：浮动是子元素在父元素中左右移动。父元素的高度（没有设置）默认是被子元素撑开的，但在子元素设置浮动属性之后完全脱离了文档流，造成父元素高度丢失；而其底部的元素将会顶上去，进而造成页面混乱。

        如下图：

        

         最最根本的问题：就是父元素没有设置高度的时候默认是由子元素的内容撑开的，但是现在子元素已经是浮动元素了，它自然就不在这个区域内了，也就是说父元素中没有内容了，那么它的高度就没有了（这边的边框是为了显示作用）

解决方法：

        1、将父元素的高度提前定好（不太符合内容的自适应，如东西少空白多，东西多要溢出）

        2、BFC（Block Formatting Context） 块级模式化环境；BFC是一个隐藏属性，需要手动开启。在元素开启BFC后，它将独立于其他区域，自己成为一个区域。

BFC特点：

        元素开启BFC后，将不再被浮动元素覆盖

        元素开启BFC后的子元素不会和父元素共享外边距

        元素开启BFC后可以包含浮动的子元素（重中之重）

开启方式：

        1、对浮动子元素的父元素设置浮动属性即可开启父元素的BFC；

        2、将父元素设为行内块元素；

        -- 此类方法是见间接开启，有副作用，脱离文档流后，高度不塌陷了但是宽度消失了--

        3、将overflow设置一个非visible（default）的值 如auto、hidden；

运用：对父元素开启BFC，即可利用浮动元素布局。虽然但是，这种方法也只是暂时的解决方法。

终极绝招：

        首先先介绍一个属性 清除 clear

        这个属性的作用是将元素受到的来自于其他浮动元素的影响清楚，实际原理是只能浏览器为我们的盒子加上了一个边距，使他脱离那个位置，回到它应在的那个区域。这种手段只是影响当前元素而不影响浮动元素，因此副作用最小。

        可选值： left or right or both 分别清楚左侧右侧，两侧中最大的造成的影响。

通过查找前辈们的顶级操作：

        使用伪类after来给盒子最后创造出一个 ‘ 莫须有 ’  的盒子，将该盒子收到的影响清除，它本身也是在父元素下，它没有内容，但它实实在在就在浮动元素下面，因此父元素就可以共享该虚拟盒子的高度。

         完美解决高度塌陷问题~~

小小地分享一下今天的一些练习成果

网页布局练习：

通过浮动来仿作w3school的导航栏

 网易新闻的军事栏 （3月5日修改，因图片违规！但这其实是我自己模范着做的！）

        今天的经验分享就结束了。学的不是很多，花点时间整理总结一下，给自己的大脑一个回顾记忆的机会。以后也会坚持发自己的学习经验博客！为自己的技术打下基础！走过路过的大佬们还请不要吝惜自己的建议！感激不尽！

        生命不是无止境的，但学习是！