目录
问题1：如使得右下位置的内容div在向上拉动的过程中与顶部的导航栏保持一定的距离？
原生实现纵横导航
-
背景和意愿
虽然接触HTML、CSS前段的布局有一段时间，而且了解过BootStrap、View UI等常见的前段框架/库，也可以做基本的布局样式。但是对布局一直有一种模模糊糊、不知所以的感觉，同时不管是使用原生还是框架的布局，头脑里都没有很清晰的可供选择的代码实现思路。进过查找资料希望了解布局的基本原理，从而可以是的原生布局与框架布局相结合，实现自己想要的布局效果，同时可以了解如何用原生的样式抵消框架中的默认样式，最终可以做到布局时心中有数，手刃有余。
同时在这个过程中也会对我们在布局中经常使用的一些标签（position、display、float等）、属性做引入介绍，了解一下盒子模型，以及BootStrap、View UI的布局思路和CSS样式的优先级，CSS样式抵消覆盖问题。
-
涉及到的基础知识简介
-
布局类型的介绍
在介绍布局的类型的时候我们应该对文档流有一个大概的了解，查了一些资料但是没有找到对文件流分类的一个统一的解释，通常的介绍一般是可以分为：常规文件流、脱离文件流。但是在一篇博客中还看到了一种BFC（常规文件流的升级版），此种文件流主要可以解决一些边距折叠、边距侧漏、清除浮动等功能，这种BFC的实现方式主要是通过设置overflow:hidden 来实现的。我们平常的整体布局（一个网页的模块设计，就像顶部导航、侧部导航，内容模块的位置放置）主要形式是脱离文件流，分为两种：定位布局（通过position属性实现）、浮动布局（通过float属性实现）。在具体到细节的显示时候我们可能也会用到常规文件流、BFC的内容。CSS把布局的元素分为：内联元素、块级元素、内联块元素、表格元素、弹性盒子元素、浮动元素、定位元素。决定元素类型的主要是display、float、position。
总的来说我们在HTML既有的布局样式——常规文件流下，为了更好地适应现在的web需求，我们创建了更加灵活地脱离文件流规则来达到我们的目的。这个过程中我们有产生了边距折叠、边距侧漏、父元素坍塌的一系列问题。这时候我们可以通过BFC等功能来解决浮动布局或定位布局产生的问题。
-
文档流简介
常规文件流：HTML元素可分为两大类;内联元素和块级元素.二者在显示方式上是不同的.内联元素是在水平方向上一个拦一个排列的,元素前后不产生换行,元素间的水平间距可以通过水平方向上的填充,边框和间距来控制,觉的strong,span等就属于内联元素,需要注意的是,竖直方向上的填充,边框和间距对控制内联元素的高度是不起作用的,水平方向的一行将构成一个所谓的line box,这是一个逻辑上的概念,line box是一个虚拟的矩形区域,包含了组成这行的所有内联元素,其高度本行内所有内联元素内容完全显示出来,尽管浏览器自动计算内联元素高度,我们还是可以通过设置line-height属性的值来改变元素的高度. 块级元素是在竖址方向上一个接一排列的,元素前后均产生换行,竖直方向上元素之间的距离可以用上下边距来控制,注意竖直方向的边距会产生重叠,其间距值取相邻元素中边距较大的那一个,常见p,div等都是块级元素,这些元素的内容都 是以块的形式显示在浏览器中,内联元素和块级元素各自遵循着不同的显示方式,这就构成了html的文档, 文流档的内容被比喻为流,文档中的元素可以随波流,也可以脱离流,漂浮在其上,如果你没有为元素设定附加css属性,那么元素将按照它在html代码中出现的顺序一个挨着一地排列.
脱离文件流：通过一定的设置浮动的元素并不属于文档中的普通流，而是浮动的元素会漂浮于普通流之上。这时他的定位规则主要有定位布局和浮动布局两大类。
历史来源：最早的网页主要是面向科学家，供他们写文章做分享，这时常规的文件流就已经可以满足写文章的需求但是随着时代的发展网页的形式更复杂，所以也就出现了后边的各种布局以及流的形式。
-
position属性介绍
w3c中对于position的介绍：
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
这里有关position的描述我们不用多想，只需要理解他的字面意思即可，下边我们会通过一个测试页面的代码来加深对position的印象。下边是有关我们position属性使用的注意事项：
1.其中我们的relative虽然可以通过top、left、bottom、right等属性来设置位置但是他实际上并没有脱离文件流，也不会对其他的布局产生影响，同时也不会产生布局上的问题。
2.当属性的值为fixed、absolute时元素会脱离文件流，这时margin属性中的auto就会失效；同时绝对定位的元素之间不会相互影响
3.在激活绝对定位属性之后我们应该至少指定left、right、bottom、top中的一个不然的话上述属性会使用他们默认的这将会导致对象遵正常的HTML代码规则，在前一个对象之后立即被呈递，也就是说绝对定位的属性相当于没有开启。（例子可以参考布局实例解析中的代码）
4.对于控制偏移的四种属性（left、right、bottom、top）的值都是可以设置负值的，如果同时设置一个方向上的两个值则left、top的值相对right、bottom是优先的。
-
float属性介绍
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄（这个异常的状况我们可以经常子一些布局中遇到）。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
补充知识——替换元素与非替换元素（参考其他博客）：
根据是否具有可替换内容，我们也可以把元素分为替换元素和非替换元素。这种通过修改某个属性值，例如 <img> 的 "src" 属性，<input> 的 "type" 属性，呈现的内容就可以被改变的元素称为替换元素，例如：<img>,<input>,<textarea>,<select> 等等，除此之外，它还具有以下特性：
(1) 替换元素都是内联元素
(2) <img> 这类替换元素的基线位于元素的下边缘，而 "vertical-align" 的默认值是基线对齐，因此图片下方会存在几个像素的空隙；而 <input> 这类可输入文本的替换元素的基线其实就是输入的文本的基线，这一点和内联块级元素相似，如果 "display" 为 "inline-block" 的内联块级元素内部没有文本，那么它的基线就是元素的下边缘，如果有文本，那么它的基线就是内部文本的基线
(3) 替换元素的尺寸分为3类：固有尺寸、HTML 尺寸和 CSS 尺寸。固有尺寸指的是替换内容原本的尺寸；HTML 尺寸指的是在 HTML 属性上设置的尺寸，它将覆盖固有尺寸；CSS 尺寸即是在 CSS 样式中设置的尺寸，它将覆盖固有尺寸和 HTML 尺寸。
如果仅设置了宽度或仅设置了高度，则元素会按固有尺寸的宽高比例显示；
内联替换元素和块级替换元素的尺寸使用上面同一套规则计算，也就是说，即使替换元素设置为 {display:block;}，它的宽度也不会撑满父容器；
(4) 替换元素可以撑开行框，但是不影响行高。众所周知，内联元素的高度仅由行高 "line-height" 决定，垂直方向的 "margin","border" 和 "padding" 并不影响行框高度，但是替换元素的表现与 {display:inline-block;} 的内联块级元素更相似，也就是说替换元素垂直方向的 "margin","border" 和 "padding" 可以撑开行框；
-
float属性控制下的浮动布局——水槽模型
在浮动布局下我们可以把元素想成是在一个特定水槽下浮动的船，通过float的right、left值来指定特定的航道，两个航道中的船航行中又是互补干扰的，但是当他们的浮动结束后开始固定位置时（小船停泊）物理位置又是固定的；而相对情况下定位布局更像是在一个坐标中进行相对的定位，这里控制偏移的的四个属性相当于是坐标轴，而坐标的原点根据position的值不同而不同。left:从右下边向上浮起，在从右向左浮到水槽左边（这个过程中只会受到来自同一水槽小船的干扰），当水平浮动结束时进入停泊状态这是的小船两个水槽的小船共享物理位置。总的来说：左右浮动的元素在浮动的过程中不会相互干涉，但是在最终的使用浏览器窗口的物理位置是相互干涉的；先是竖直方向上移动到最高处，最后再水平反向移动。
-
display属性介绍
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符，在平常的使用过程中我们也经常会用这个元素和none配合来显示出来隐藏-显示的效果。块级元素的文档流不被破坏的情况下，宽度为auto时会永远充满容器宽度，遇到有东西挡住，文本流会自动往后移，但实际区域没变，只是被遮住了。可以借助这个特性做图文排版，或者做自适应宽度布局。注意：块级元素一旦脱离的文档流，这个特性将会失效。块级元素还有另一大特性，文档流不被破坏的情况下，外边距margin会自动填充横向剩余部分，就解释了为什么块级元素永远是纵向排列。如果margin的值设置为auto，它就会左右平分掉，形成了区块横向居中的现象。 |
| inline | 默认，内联元素前后没有换行符。内联元素不能改变宽高，导致有些属性无效，比如：width系列、height系列、margin-top、margin-bottom、padding-top、padding-bottom、line-height。正常的格式下内联样式的元素之间会有空格（但是在实验的过程中发现原本就是内联元素的一直就遵从这个特性但是通过display的值转化过来的有时候没有这个特性，表现的不是非常稳定，这仅仅是自己的一些意外发现可能是哪里做了修改但是自己没有发现，仅供参考） |
| inline-block | 行内块元素默认宽高由子元素决定，但它可以设置宽高、边距。内联块之间横向排列。它也存在内联元素一样的元素之间的空白问题，他们的解决问题方法是一样的。内联独有的一大特性就是他可以将自身或是自身中的子元素当成一个文本去操作。 |
解决空白区域的方案有以下四种：
- 给
<div>设置font-size: 0;，在<span>上把font-size设置回去 - 将空白符注释掉
- 把span排列在同一行，并紧贴在一起
- 使用浮动
float，有些场合不允许使用浮动，这条就不适用
各类元素都可以通过display来进行相应的转化，在日常的生活中我们经常为了扩大超链接的区域，而对a标签设置display；当我们在进行图片展示的时候也可以通过设置display：block来取消img标签下的几个像素空隙。实现元素隐藏的方法可以有多种：display：none、visbility:hidden;但是区别在与前者并不会占用浏览器窗口的物理空间，但是后者会占用浏览器的窗口的物理空间。前者虽然不占用物理空间但是浏览器的底层还是把他渲染出来了的，当接触到vue.js是我们也会通过其他的方法控制一个元素的隐藏和展示，里边有的方法采用了display的特性即底层渲染但是不会占用浏览器窗口的物理空间但是有些方法是彻底底层不渲染的当需要显示的时候底层才会去渲染展示。
-
div盒子模型（标准盒子模型，IE模型、弾性模型）
我们常说的盒子模型通常是包括IE（Internet Explorer）盒子模型、(W3C)标准盒子模型。随着web技术的发展在CSS3中又通过flex相关的属性引出了弹性盒子模型，他可以看作是对标准盒子模型的一个升级，现在多数的框架都用到了弹性盒子模型。关于盒子模型的一般性定义我们可以参考盒子模型——菜鸟教程
接下来我来我们主要是讲一下这三种模型的关系以及演变过程，了解之后以避免我们经常出现的错误或是在开发的过程中一些匪夷所思的问题。
在百度百科中将CSS盒子模型描述为“在网页设计中经常用到的CSS技术所使用的一种思维模型。”同时这样简介：CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。content主要有三个属性，width、height 和overflow。填充的属性由padding以及四个方向的详细控制属性（padding -top、padding -bottom、padding -left、padding-right）共计五个属性来进行样式设计。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。边框是为荣内容区域和填充区域的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。当然border属性也是可以结合类似于padding的方位修饰来进行详细的控制，border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。空白边位于盒子的最外围，是添加在边框外周围的空间。对于两个相邻的（水平或垂直方向 ）且设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的并集。若二者邻近的空白边值大小不等，则取二者中较大的值。同时，CSS 容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。
CSS在发展的过程中对于网页的元素如何被图形浏览器展示，最初的时候只是定义了一个给块级元素 - 比如说p和blockquote - 一个宽度和高度，和3个级别的环绕它的框 - padding, border,和margin - 的“格式化模型”。这个时候尽管“盒子模型”这个词从来都没有在规范中出现过，但是已经被广大的开发人员和浏览器供应商使用。开始的时候很少元素既支持border也支持padding，所以对一个元素的宽度和高度的定义并不是很有争议。再后来在规范中为更多的元素引入了margin, border和padding属性。它通过了一个对margin, border和padding的处理类似于表单元格的，相对于内容的宽度定义。从此这已成为著名的W3C盒模型。在那时，非常少浏览器供应商严格地实施了W3C盒模型。当时的两种主要浏览器，Netscape 4.0和Internet Explorer 4.0均定义宽度和高度为边框到边框的距离。这已被称为传统或者Internet Explorer盒模型。但是根据由万维网联盟修订的CSS1所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身的宽度或高度，而padding, border和margin随后被应用。Internet Explorer在“怪异模式”（怪异模式）则把内容，内边距（padding）和边框（border）全部包括在一个指定的宽度或高度之内；这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子。在发展的过程中标准模型也意识到了自身定义的一些不足，为了更好地融合吸收W3C已在CSS3内包括了一个box-sizing属性。当为一个元素指定box-sizing: border-box;时，该元素的任意padding或border都在指定的width和height的内部，“就像通常旧版HTML用户代理所实施的那样”。（这一部分更详细的内容以及解决办法可以参考：IE盒模型缺陷）
弹性布局大家可以参考文末给出的两个链接，里边有很好的解释。
-
布局实例解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 100%;height: 1980px;background-color: #00FFFF;">
与浏览器窗口存在留白问题
</div>
</body>
</html>
问题1：如使得右下位置的内容div在向上拉动的过程中与顶部的导航栏保持一定的距离？
我们的航功能是通过position的fixed、以及合理的margin属性来实现的。正常来说当div-right的div先上拉的时候div会穿过除了div-top覆盖的所有部分，所以说这时候当我们为了展示而在div-top与div-right之间设置了margin时，中间空白部分的margin就会被覆盖掉，如果这不是我们先要的效果我们可以把空白部分的margin用div-top的border替代掉，这样原来属于两者中间部分的白色空隙就属于div-top的了。因为div-top的属性中有position：fixed所以div-top的属性就脱离了文本流但是他却依旧占据着空间并且位于所有的结构之上这样可能就会造成内容遮挡的问题，也可以说是div-top的Z-index层级更高优先级更大这样就不会被下边的div-right覆盖掉了。针对于div-top的遮挡我们可以通过margin或是padding的属性值来抵消。
问题2：顶部导航侧部导航的基本实现思路以及原理补充
-
常见布局问题
-
body默认的外边距问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 100%;height: 1980px;background-color: #00FFFF;">
与浏览器窗口存在留白问题
</div>
</body>
</html>
解决思路：我们可以通过F12来查看相关信息，发现这个问题是因为body的默认margin中有默认值而导致的，我们只需要把margin属性中的值设置为0px或是自己想要的即可。
-
BootStrap样式覆盖
在使用框架/库的时候我们经常会遇到，需要覆盖原有样式的问题，更好地解决这个问题我们首先应该CSS样式的优先级问题。
-
参考资料
- 《HTML5布局之路》刘国利编著
- 《HTML5和CSS3设计模式》 美国作者注、曾少宁译
- 对于布局元素的分类、文档流的分类介绍：解剖CSS布局原理
- BFC问题——overflow：hidden的作用：关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
- 弹性盒子布局教程：Flex 布局教程
- 深入理解CSS3弹性盒子模型：深入理解CSS3弹性盒子模型
-
顶部、侧部导航栏的原生实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>前端原生布局示例</title>
<style type="text/css">
.bodystyle{
margin: 0px;
}
.top{
background-color: aqua;
height: 100px;
width: 100%;
position: fixed;
font-size: 0px;
border-bottom:10px solid white;
}
.left{
background-color: darkkhaki;
width:20%;
position: fixed;
height: 500px;
float: left;
margin-top:110px;
border-bottom-width: 10px;
border-bottom-color: red;
}
.right{
background-color:darkcyan;
height: 1500px;
margin-left: 20.5%;
margin-top: 110px;
width: 79.5%;
float: left;
/* 这里也可以省略margin-left的属性把float改用right ；这时我们的*/
}
</style>
</head>
<body class="bodystyle" >
<div class="top" id="div-top">
<h1>这里是顶部导航</h1>
</div>
<div class="left" id="div-left">
这里是侧部导航
</div>
<div class="right" id="div-right">
这里是右下角的内容部分
</div>
</body>
</html>
扫一扫
1504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
