七海的html和css学习笔记（十一）

最新推荐文章于 2023-04-22 13:48:38 发布

七海Chiaki

最新推荐文章于 2023-04-22 13:48:38 发布

阅读量252

点赞数

分类专栏：七海的html和css学习笔记

本文链接：https://blog.csdn.net/z837071844/article/details/79726718

版权

七海的html和css学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

第十一章布局与定位

使用流

流实际上就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件的最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。

先来考虑块元素，它会在每个块元素之间加一个换行。所以首先会显示文档中的第一个元素，然后是一个换行，然后是第二个块元素，接下来又是一个换行，如此继续，从文件最上面一直到文件末尾逐个显示。这就是流。

内联元素呢？内联元素在水平方向上会相互挨着，总体上会从左上方流向右下方，也就是从一个块元素的开头读到结尾。

如果浏览器执行任务，并排放置两个内联元素，而且这些元素都有外边距，浏览器会在这些元素之间创建足够的空间，考虑到它们的外边距。所以，如果左边的元素外边距为10像素，右边的元素外边距为20像素，那么这两个元素之间就会有30像素的空间。

浏览器上下放置两个块元素时，它会把它们共同的外边距折叠在一起。折叠的外边距高度就是最大的外边距高度。比如有两个相邻的块元素，一个外边距为10像素，一个为20像素，那么这两个块元素之间的距离就被折叠为20像素。

如果一个元素嵌套在另一个元素中，它们都有外边距，就会折叠。可以用下面这种方法来确定元素的外边距何时会折叠：只要两个垂直外边距碰到一起，它们就会折叠，即使是一个元素嵌套在另一个元素中也不例外。注意，如果外面的元素有一个边框，那么两个元素的外边距就不会碰到一起，这样也就不会折叠。但是如果你把这个边框去掉，这两个外边距就会折叠。刚开始看到这种情况可能会迷惑不解，所以要把它记住，等遇到这种情况时就不会莫名其妙了。

如何浮动元素

1. 指定一个标识：

<p id="amazing">
  //text
</p>

2. 现在指定一个宽度。对于所有浮动元素都有一个要求：它必须有一个宽度，我们设置这个段落宽度为200像素：

#amazing{
     width: 200px;
}

3. 现在让它浮动。为他增加float属性。float属性可以设置为left或right。下面设置为right：

#amazing{
     width: 200px;
     float: right;
}

它是这样工作的：1. 首先，浏览器像以往一样，正常地将元素流入页面，从文件最上面开始，逐步移向末尾的元素。

2. 浏览器遇到浮动元素时，会把它尽可能放在最右边。还会从流中删除这个段落，就好像它浮在页面上一样。

3. 由于这个浮动段落已经从正常的流中删除，所以其他块元素回填在这里，就好像根本没有这个段落一样。

4. 不过，对内联元素定位时，它们会考虑浮动元素的边界，因此会围绕着浮动元素。

注意，块元素会在浮动元素的下面。这是因为浮动元素不再是正常流的一部分。可以将被遮盖的方向的外边距设置为和浮动页面的宽度或高度来解决这个问题。

还有一个方法，就是在被遮盖元素的css中定义一个clear元素：

clear: right; //这里增加了一个属性，指出右边不允许有浮动内容，也可以定义：left、top、bottom

对于块元素中的内联元素，它们会围绕着这个浮动元素。

流体与冻结设计

目前为止，我们采用的所有设计都称为流体布局，因为不论我们将浏览器调整到多大的宽度，布局都会扩展，填满整个浏览器，这些布局很有用，因为经过扩展，它们会填充可用的空间，使用户能够充分利用它们的屏幕空间。不过，有时让布局锁定可能更重要，这样一来，当用户调整屏幕大小时，你的设计仍能保持原样。这中设计称为 冻结布局。冻结布局会锁定元素，让它们冻结在页面上，这样这些元素根本不能移动，我们就能避免由于窗口扩展带来的很多问题。下面来试一试冻结布局：

首先在html中<body>元素增加一个新的<div>元素，新增的<div>元素要覆盖整个<body>元素内的所有元素：

<body>
   <div id="allcontent">
     ........
   </div>
</body>

然后在css中设置这个<div>元素：

#allcontent{
      width: 800px; //将元素固定为800像素
      padding-top: 5px;
      padding-bottom: 5px;
      background-color: #675c47;
      //由于这是第一次指定这个<div>样式，所以下面增加一些内边距，并让它有自己的背景颜色。你会看到这将有助于把整个页面联系在一起
}

可以简单修改将这个布局变成凝胶布局：

#allcontent{
      width: 800px; 
      padding-top: 5px;
      padding-bottom: 5px;
      background-color: #675c47;
      margin-left: auto;
      margin-right: auto;
      //将做外边距和右外边距设置为auto
}

我们讨论指定内容区宽度为auto时，浏览器会很据需要扩展内容区。外边距为auto时，浏览器会确定正确的外边距是多少，另外还会确保左右外边距相同，所以内容会居中。

css表格显示

可以把表格想成是一个电子表格，包括行和列，各行和列交叉的位置有一个单元格。在一个电子表格中，可以在各个单元格中放入值，如一个数或一些文本。对于css表格显示，每个单元格会包含一个html块元素。

那么如何创建css和html实现表格显示？不难想到，我们需要增加一些css，告诉浏览器要把我们的栏目显示得想一个表格，不过还需要增加一些html。为什么？我们需要增加一些结构来表示表格的行和列，还要增加这个表格本身的结构。

做法很简单，只需要为整个表格创建一个<div>，然后为每一行分别创建一个<div>。对于没一列，只需要在<div>中放置一个块级元素。下面来看这个html，然后再考虑css：

<div id="tableContainer">  //表格的div
     <div id="tableRow">  //行的div
      
     </div>
</div>

既然知道了如何增加html结构来支持css表格显示，下面来看如何为各个元素指定css，创建这个表格显示：

1. 首先，为表格增加一个<div>，id为“tableContainer”。这个<div>包含行和列：

div#tableContainer{ //tableContainer是最外层的div，表示整个表格结构
      display: table;
}

2. 为行增加了一个<div>，id为“tableRow”。我们只有一行，其中有两个单元格，所以只需要一个行<div>。如果有多行。则需要多个行<div>。这个行<div>的样式如下指定：

div#tableRow{
      display: table-row;
      //"tableRow"<div>表示表格中的一行，如果你有多行，可以考虑使用一个类，这样就可以用一个规则指定所有行的样式。
}

3. 最后将作为单元格的块元素指定属性：

#main{
      display: table-cell;

      vertical-align: top;  //设置垂直对齐          
      ......
}
#sidebar{
      display: table-cell;

    vertical-align: top;  //设置垂直对齐

}//将main和sidebar作为单元格内的内容放入表格中

为什么要增加垂直对齐？如果没有增加垂直对齐方式，你会看到浏览器中默认的对齐方式为中间对齐。当然有些情况下这可能正是你想要的！垂直对齐可以设置为top（顶端对齐），middle（中间对齐）或bottom（底端对齐）。

布局定位

css中有四种布局定位，分别是静态定位（static）、绝对定位（absolute）、固定定位（fixed）和相对定位（relative）。static是默认的定位类型，也就是流式定位。下面我们介绍另外三种。

绝对定位的工作方式

下面先搞清楚绝对定位会做些什么，另外是怎么做的。这里有一个简短的css，使用绝对定位来指定sidebar<div>的位置。

#sidebar{
      position: absolute; //使用position属性指定这个元素要绝对定位
      top: 100px;  //设置距页面上边100像素
      right: 200px; //设置距页面右边200像素
      width: 280px; //设置宽度为280像素
}

现在来看这个css会做什么：一个元素绝对定位时，浏览器首先要做的是将它从流中完全删除，然后浏览器将这个元素放置在top和right属性指定的位置上（也可以使用bottom和left指定位置）。在这里，边栏会放在距页面上边100像素、距页面右边200像素的位置上。我们还设置了<div>的宽度，这与设置浮动元素样式时一样。

被设置为绝对定位的元素会被精确的放在页面上的某个位置。在它下面，页面正常流中的所有元素根本不知道页面上有这个绝对定位元素，这与浮动元素有所不同，因为流中的元素会调整它们的内容来适应浮动元素的边界。不过 绝对定位元素对其他元素没有任何影响。

固定定位的工作方式

与绝对定位相比，固定定位很简单。使用固定定位时，也像绝对定位一样要为元素指定你希望的位置，不过这个距离是距浏览器窗口边界的一个偏移量，而不是距页面边界的距离。这就有一个有趣的效果，一旦采用固定定位方式放置内容，它就会一直留在你原先指定的位置，不再移动，即使你滚动页面它也原地不动。

先假设有一个<div>,id为"coupon"。可以把这个<div>固定在距视窗上方300像素，距左边100像素的一个位置上，就像这样：

#coupon{
      position: fixed; //设置为固定定位
      top: 300px;    //距浏览器上边300像素
      left: 100px;   //距浏览器左边100像素
}

相对定位

相对定位与绝对定位类似，只是元素仍然在页面流中（还在它原本的位置上），然后按你指定的量偏移。可以使用top、left、bottom或right偏移元素，就像对元素绝对定位一样。

多个元素叠加时出现的顺序

每个 定位元素都有一个"z-index"属性，这是元素在一个虚拟的z轴上的顺序（可以认为这个z轴从屏幕指向你），要这样使用这个属性：

#div1{
     z-index: 0;
     ....
}
#div2{
     z-index: 1;
}
//div2会显示在div1的上面

我们无需知道z-index的值，只要在需要用到的时候自行设置就好。