第五天和第六天：三种简历？-IFE

第五天和第六天：三种简历？

日期	总用时	学习目标
2018.08.01-2018.08.02	8h	见下文

学习目标

• CSS 盒模型
• CSS 浮动
• CSS 调试
• 完成指定格式的三种简历

学习内容

• 第五天和第六天：三种简历？
• MDN Web开发入门

学习笔记

框模型

CSS框模型（译者注：也被称为“盒模型”）是网页布局的基础 ——每个元素被表示为一个矩形的方框，框的内容、内边距、边界和外边距像洋葱的膜那样，一层包着一层构建起来。浏览器渲染网页布局时，它会算出每个框的内容要用什么样式，周围的洋葱层有多大，以及框相对于其它框放在哪里。在理解如何创建 CSS 布局之前，你需要理解框模型——这就是本文中我们将要学习的内容。

框属性

• width 和 height

  width 和 height 设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框。

  注意: 还有其他属性可以更巧妙地处理内容的大小——设置大小约束而不是绝对的大小。这些属性包括min-width、max-width、min-height 和 max-height。

• padding

  padding 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。

• border

  CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边，例如 border: 1px solid black; 但这个简写可以被各种普通书写的更详细的属性所覆盖：

  • border-top, border-right, border-bottom, border-left: 分别设置某一边的边界厚度／风格／颜色。
  • border-width, border-style, border-color: 分别仅设置边界的厚度／风格／颜色，并应用到全部四边边界。
  • 你也可以单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color，等。
  • 边框半径：border-radius，border-top-left-radius，border-top-right-radius，border-bottom-left-radius和 border-bottom-right-radius。
  • 边界图像:border-image

最后，让我们看一下CSS中最新的(和复杂的)操作，用于操作边界—— border-image。这里的想法是，有时创建复杂的用户界面特性需要一个复杂的界面设计，而不仅仅是一个纯色。这可能是通过在另一个较大的元素的顶部覆盖一个元素，然后将背景图像应用到底部元素，伪造一个复杂的边界来创建的。或者在极端情况下，您甚至可能需要创建一个包含9个元素的3 x 3网格，其中的中心元素作为您的内容，以及周围的8个元素，将边界元素应用于它们。

border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-repeat: round;

• border-image-repeat

  • stretch：默认;侧面的图像被拉伸来填满边界。这通常看起来很糟糕和像素化，所以不推荐。
  • repeat：边图像被重复，直到边界被填满。根据具体情况，这可能看起来不错，但您可能会看到一些难看的图像片段。
  • round： 边的图像被重复，直到边界被填满，它们都被稍微拉伸，这样就不会出现碎片。
  • space：边图像被重复，直到边界被填满，每个拷贝之间添加了少量的间隔，这样就不会出现任何片段。这个值只在Safari(9+)和Internet Explorer(11+)中得到支持
• border-image-width：只调整边界图像，而不是边界——如果这个设置小于border-width，它会在边界的外面，而不是填满它。如果它更大，那么它就会扩展到边界之外，并开始重叠在内边距/内容上。
• border-image-outset：定义边界内部和内边距之间的额外空间的大小——有点像“边界填充”。如果需要的话，这是一种简单的方法，可以将边界图像移出一点。

• margin

  外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。其表现与 padding 很相似；简写属性为 margin，单个属性分别为 margin-top、margin-right、margin-bottom 和 margin-left。

• 溢流(Overflow )

当你使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用overflow属性来控制这种情况的发生。它有一些可能的值，但是最常用的是：

• auto: 当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。
• hidden: 当内容过多，溢流的内容被隐藏。
• visible: 当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为）

• 背景剪裁 (Background clip)

  • border-box:到边界最外面
  • padding-box:包含到内框
  • content-box:只包含到内容
• 轮廓(Outline)

一个框的 outline 是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多，但是并不改变框的尺寸（更准确的说，轮廓被勾画于在框边界之外，外边距区域之内）

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

框类型

• 块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box）
• 行内框（ inline box）与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。

• 行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。（在下面的示例中，行内块状框会放在第二行文本上，因为第一行没有足够的空间，并且不会突破两行。然而，如果没有足够的空间，行内框会在多条线上断裂，而它会失去一个框的形状。）

  <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
     Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
  </p>
  
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
    Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
  </p>
  
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
    Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
  </p>

  p {
    padding : 1em;
    border  : 1px solid black;
  }
  
  span {
    padding : 0.5em;
    border  : 1px solid green;
  
    /* That makes the box visible, regardless of its type */
    background-color: yellow;
  }
  
  .inline       { display: inline;       }
  .block        { display: block;        }
  .inline-block { display: inline-block; }

盒的高级属性

• 设置宽和高的约束

  width: 70%;
  max-width: 1280px;
  min-width: 480px;

• 完全改变盒模型

  .two {
   box-sizing: border-box;
   }

  padding 和 border 并没有添加到总宽度和高度上; 反而，他们占用一些内容的空间，使内容更小，并保持总体尺寸相同。

• 不常见的盒子显示（display）类型

  • display: table — 允许你像处理table布局那样处理非table元素，而不是滥用HTML- 的<table>标签来达到同样的目的。了解更多相关信息，请查看 CSS tables.
  • display: flex — 允许你处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。了解更多相关信息，请查看 Flexbox.
  • display: grid — 给出一种简单实现CSS网格系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网格框架，我们的 CSS Grids 文章讲述了如何去运用传统的CSS网格框架。

调试 CSS

1. 开发者工具->Elements
2. 点击左侧html，右侧出现此元素相关的css
3. 修改css，直接会体现在页面中

浮动

• 浮动基础

  <h1>Simple float example</h1>
  
  <img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf">
  
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
  
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

  body {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
  }
  
  p {
    line-height: 2;
    word-spacing: 0.1rem;
  }
  
  img {
    float: left;
    margin-right: 30px;
  }

• 多列浮动布局

  <h1>2 column layout example</h1>
  <div>
    <h2>First column</h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
  </div>
  
  <div>
    <h2>Second column</h2>
    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div

  body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  }
  
  div:nth-of-type(1) {
  width: 48%;
  float: left;
  }
  
  div:nth-of-type(2) {
    width: 48%;
    float: right;
  }

• 清除浮动

  footer {
  clear: both;
  }

clear 可以取三个值：

• left：停止任何活动的左浮动
• right：停止任何活动的右浮动
• both：停止任何活动的左右浮动

待深入的知识

Chrome开发者工具

作业

• 简历1
• 简历2
• 简历3

疑问

Flag

系统的学习前端，坚持66天