css3之布局

css3布局

1.display:

display属性用来规定是否/如何显示元素

块级元素（block element）：

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）；

例：

• div
• h1-h6
• p
• form
• header
• footer
• section

行内元素（inline element）：

内联元素不从新行开始，仅占用所需的宽度；

例：

• span
• a
• img

display：none：

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。

默认情况下，script元素使用display：none；

小技巧：

通过覆盖默认的display值来做到把行内元素更改为块元素，反之亦可；

li {
	display: inline;
}//把li转换为行内元素

span {
  display: block;
}//把span转换为块元素

注：设置元素的display属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

-display:none和visibility:hidden的区别：

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中：

visibility:hidden; 也可以隐藏元素；但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：

CSS Display/Visibility属性：

属性	描述
display	指定应如何显示元素。
visibility	指定元素是否应该可见。

2.-width和max-width：

设置块级元素的 width 将防止其延伸到其容器的边缘。然后，您可以将外边距设置为 auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配；

注意：当浏览器窗口小于元素的宽度时，上面这个 <div> 会发生问题。浏览器会将水平滚动条添加到页面。

在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要；

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}此div元素宽度为500px，外边距设置为auto

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}//此div元素最大宽度为500px，外边距设置为auto

3.定位：

position属性：

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

• static
• relative
• fixed
• absolute
• sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position：static：

HTML元素默认情况下的定位方式（静态）；

静态定位的元素不受top，bottom，left和right属性的影响；

position：static；的元素不会以任何特殊方式定位，始终根据页面的正常流进行定位；

div.static {
  position: static;
  border: 3px solid #73AD21;
}

position：relative：

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

position：fixed：

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

position：absolute：

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

注：“被定位的”元素是其位置除 static 以外的任何元素。

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

实现效果：

position：sticky：

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

在此例中，在到达其滚动位置时，sticky 元素将停留在页面顶部（top: 0）：

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

重叠元素：

在对元素进行定位的时候，他们可以与其它元素重叠。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

元素可以设置正或负的堆叠顺序：

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

**注意：**如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

图片实现效果：

定位图像中的文本：

大致意思就是子绝父相的应用；

所有CSS定位属性：

属性	描述
bottom	设置定位框的底部外边距边缘。
clip	剪裁绝对定位的元素。
left	设置定位框的左侧外边距边缘。
position	规定元素的定位类型。
right	设置定位框的右侧外边距边缘。
top	设置定位框的顶部外边距边缘。
z-index	设置元素的堆叠顺序。

4.溢出：

overflow：

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

• visible - 默认。溢出没有被剪裁。内容在元素框外渲染
• hidden - 溢出被剪裁，其余内容将不可见
• scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
• auto - 与 scroll 类似，但仅在必要时添加滚动条

注释：overflow 属性仅适用于具有指定高度的块元素。

注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 “overflow:scroll”）。

overflow：visible：

默认情况下，溢出是可见的(visible)，这意味着它不会被裁剪，而是在元素框外渲染：

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

overflow：hidden：

如果使用hidden值，溢出会被裁剪，其余内容被隐藏：

div {
  overflow: hidden;
}

overflow：scroll：

如果将值设置为scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）：

div {
  overflow: scroll;
}

overflow：auto：

auto 值类似于 scroll，但是它仅在必要时添加滚动条（即在溢出的部分添加滚动条）：

div {
  overflow: auto;
}

overflow-x和overflow-y：

overflow-x和overflow-y属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

• overflow-x 指定如何处理内容的左/右边缘。
• overflow-y 指定如何处理内容的上/下边缘。

div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}

总结：

属性	描述
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容，不管有没有溢出，都会显示滚动条
hidden	超出部分被修剪，不再显示
auto	超出部分修剪，浏览器会显示滚动条一边查看其余内容，只有当内容溢出，才显示滚动条
visible	默认值。内容不会被修剪，超出部分呈现在元素框之外

5.浮动和清除：

CSS float 属性规定元素如何浮动。

CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

float属性：

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

• left - 元素浮动到其容器的左侧
• right - 元素浮动在其容器的右侧
• none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
• inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

clear属性：

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

• none - 允许两侧都有浮动元素。默认值
• left - 左侧不允许浮动元素
• right- 右侧不允许浮动元素
• both - 左侧或右侧均不允许浮动元素
• inherit - 元素继承其父级的 clear 值

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

clearfix：

自清除子元素浮动

先说第一个问题和解决方案。

div 布局的一个非常让新手头疼的问题就是，如果一个父元素中包含若干个子元素，那么当给所有的子元素都设置了浮动（ e.g float: left ），那么父元素的高度就会为0。

比如有这样的 html 代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

如果子元素没有浮动，那么显示是这样的：

但是一旦所有子元素都浮动了，那么父元素的高度变为0，就成了这样的恶心效果：

解决办法：

在HTML中添加clearfix

<div class="container clearfix">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

.clearfix:after {
   content: " ";
   display: block;
   clear: both;
}

注：使用 display: table 而不是这里的 display: block ，可以同样解决这个问题。

box sizing：

假如不指定 CSS box-sizing 属性：

默认情况下，元素的宽度和高度是这样计算的：

• width + padding + border = 元素的实际宽度
• height + padding + border = 元素的实际高度

这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。

如果使用 CSS box-sizing 属性：

box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。

如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框：

由于使用 box-sizing: border-box; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。

下面的代码能够确保以这种更直观的方式调整所有元素的大小。许多浏览器已经在对许多表单元素使用 box-sizing: border-box;（但并非全部 - 这就是为什么 input 和 textarea 在 width: 100%; 时看起来不同）。

将其应用于所有元素是安全且明智的：

* {
  box-sizing: border-box;
}

6.-display:inline-block：

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

下例展示 display: inline、display: inline-block 以及 display: block 的不同行为：

span.a {
  display: inline; /* span 的默认值 */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

效果图：

使用 inline-block 来创建导航链接：

display 的一种常见用法：inline-block 用于水平而不是垂直地显示列表项。下例创建了一个水平导航链接：

.nav {
  background-color: yellow; 
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

7.水平和垂直对齐：

居中对齐元素：

要是块元素水平居中，用margin: auto;。

设置元素的宽度将防止其延伸到容器的边缘。

然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

注：如果未设置width属性（或将其设置为100%），则居中对齐无效；

居中对齐文本：

如果仅需在元素内居中文本，用 text-align: center;；

.center {
  text-align: center;
  border: 3px solid green;
}

居中对齐图像：

如需居中图像，请将左右外边距设置为auto，并将其设置为块元素：

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

左对齐和右对齐：

对齐元素的一种方法是用position: absolute; :

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

注：绝对定位的元素将从正常流中删除，并可能出现元素重叠；

对齐元素的另一种方法是用float 属性：

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

注：如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。联系前面的知识，我们可以用clearfix hack来解决。

我们可以向包含元素添加 overflow: auto;，来解决此问题：

.clearfix {
  overflow: auto;
}

垂直对齐：

最简单的方法：用padding来指定上下内边距：

.center {
  padding: 70px 0;//盒子高度的一半
  border: 3px solid green;
}

另一个技巧：用line-height，使其值等于height属性值；

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* 如果有多行文本，请添加如下代码：*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

技巧++：用position和transform属性：

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

最后一个技巧：使用flexbox将内容居中。请注意，IE10 以及更早的版本不支持 flexbox：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

8.组合器，伪类，伪元素，属性选择器：

内容参考css3选择器一文。

9.透明度：

opacity 属性指定元素的不透明度/透明度。

透明图像

opacity 属性的取值范围为 0.0-1.0。值越低，越透明：

透明悬停效果

opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

使用 RGBA 的透明度

如果您不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

透明盒中的文本：

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>这是一些位于透明框中的文本。</p>
  </div>
</div>

</body>
</html>

代码解释：

首先，我们创建一个带有背景图像和边框的 div元素（class=“background”）。

然后，我们在第一个 div 中创建另一个 div（class=“transbox”）。

div class=“transbox” 有背景色和边框 - 这个 div 是透明的。

在透明的 div 内，我们在 p 元素内添加了一些文本。

10.导航栏：

导航栏 = 链接列表

导航栏需要标准 HTML 作为基础。

在我们的实例中，将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表，因此使用 ul 和 li元素会很有意义：

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

ul {
  list-style-type: none;//删除项目符号（小圆点）
  margin: 0;
  padding: 0;//删除浏览器默认设置
}

垂直导航栏

如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 元素的样式：

li a {
  display: block;
  //将链接显示为块元素可以使整个链接区域都可以被点击（而不仅仅是文本），我们还可					以指定宽度等
  width: 60px;//默认情况下，块元素会占用全部可用宽度，我们需要指定宽度。
}

我们还可以设置

• 的宽度，并删除 的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。这将导致与我们之前的例子相同的结果：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 

li a {
  display: block;
}

示例：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* 鼠标悬停时改变链接颜色 */
li a:hover {
  background-color: #555;
  color: white;
}

实现效果：

还有具体的实例操作见CSS 垂直导航栏 (w3school.com.cn)

水平导航栏

有两种创建水平导航栏的方法：使用行内或浮动列表项：

行内列表项：构建水平导航栏的一种方法是，除了上一章中的“标准”代码外，还要将

• 元素指定为 inline：

• li {
    display: inline;
  }
  

  浮动列表项：创建水平导航栏的另一种方法是浮动

• 元素，并为导航链接规定布局：

• li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  提示：如需全宽的背景色，请将 background-color 添加到

  • 而不是每个 元素：

  其余具体的细节操作见CSS 水平导航栏 (w3school.com.cn)

  11.下拉菜单，精灵图，图片库

  上述内容偏实践，参见CSS 图像精灵 (w3school.com.cn)

  12.网站布局

  网站通常分为页眉，菜单，内容和页脚：

  

  上图为最常见的布局结构。

  页眉

  页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称：

  .header {
    background-color: #F1F1F1;
    text-align: center;
    padding: 20px;
  }
  

  结果如下：

  

  导航栏

  导航栏包含链接列表，以帮助访问者浏览您的网站：

  /* navbar 容器 */
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  /* Navbar 链接 */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* 链接 - 悬停时改变颜色 */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  

  结果如下：

  

  内容

  使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）：

  • 1-列布局（通常用于移动浏览器）
  • 2-列布局（通常用于平板电脑和笔记本电脑）
  • 3-列布局 （仅用于台式机）

  

  我们将创建 3 列布局，并在较小的屏幕上将其更改为 1 列布局：

  /* 创建三个相等的列，它们彼此相邻浮动 */
  .column {
    float: left;
    width: 33.33%;
  }
  
  /* 在列后清除浮动 */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* 响应式布局 - 使三列堆叠，而不是在较小的屏幕（宽度为 600 像素或更小）上并排 */
  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }
  }
  

  提示：如需创建 2 列布局，请将宽度更改为 50％。如需创建 4 列布局，请使用 25％。

  提示：您是否想知道 @media 规则如何工作？参见 CSS 媒体查询

  提示：创建列布局的一种更现代的方法是使用 CSS Flexbox。但是，Internet Explorer 10 和更早版本不支持它。如果需要 IE6-10 支持，请使用浮动（如上所示）。

  不相等的栏

  主要内容（main content）是您网站上最大、最重要的部分。

  列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：

  .column {
    float: left;
  }
  
  /* 左和右列 */
  .column.side {
    width: 25%;
  }
  
  /* Middle column */
  .column.middle {
    width: 50%;
  }
  
  /* 响应式布局 - 使三列堆叠，而不是并排 */
  @media screen and (max-width: 600px) {
    .column.side, .column.middle {
      width: 100%;
    }
  }
  

  

  页脚

  页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：

  .footer {
    background-color: #F1F1F1;
    text-align: center;
    padding: 10px;
  }
  

  结果如下：

  

  13.单位

  直接进行汇总：

  绝对单位

  绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

  不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。

  单位	描述	TIY
  cm	厘米	试一试
  mm	毫米	试一试
  in	英寸 (1in = 96px = 2.54cm)	试一试
  px *	像素 (1px = 1/96th of 1in)	试一试
  pt	点 (1pt = 1/72 of 1in)	试一试
  pc	派卡 (1pc = 12 pt)	试一试

  ** 像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。

  相对单位

  相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

  单位	描述	TIY
  em	相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）	试一试
  ex	相对于当前字体的 x-height(极少使用)	试一试
  ch	相对于 “0”（零）的宽度	试一试
  rem	相对于根元素的字体大小（font-size）	试一试
  vw	相对于视口*宽度的 1%	试一试
  vh	相对于视口*高度的 1%	试一试
  vmin	相对于视口*较小尺寸的 1％	试一试
  vmax	相对于视口*较大尺寸的 1％	试一试
  %	相对于父元素	试一试

  提示：em 和 rem 单元可用于创建完美的可扩展布局！

  视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米。

  浏览器支持

  表格中的数字注明了完全支持该长度单位的首个浏览器版本。

  长度单位	Google	ie	Firefox	safari	opera
  em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
  ch	27.0	9.0	1.0	7.0	20.0
  rem	4.0	9.0	3.6	4.1	11.6
  vh, vw	20.0	9.0	19.0	6.0	20.0
  vmin	20.0	12.0	19.0	6.0	20.0
  vmax	26.0	16.0	19.0	7.0	20.0

  14.CSS特异性

  从 0 开始，为 style 属性添加 1000，为每个 ID 添加 100，为每个属性、类或伪类添加 10，为每个元素名称或伪元素添加 1。