# 让盒子浮动起来吧

# 课程目标

学习并掌握盒模型基础概念,了解盒模型与替代模型的区别以及如何进行切换.
初步了解 CSS 布局内容，掌握正常布局流特点。
掌握 Float 浮动属性,学习如何创建浮动特性,比如首字下沉、浮动图像，和多个列在网页布局。
学习文字溢出处理，掌握 BFC 特性，以及如何使用 BFC。
实践掌握浮动产生高度塌陷现象，以及清除浮动的各种方法
学习 CSS 伪元素，伪类选择器含义和用法
复习 CSS 文本,边框,字体,背景等样式。

# 阅读学习

# 盒模型

在学习布局之前我们必须先要学习一个基础概念———盒模型：

如果文字看的太累了，可以在这里更加直观感受盒模型

Interactive Box-Model Diagram (opens new window)

今天需要重点掌握 margin，padding,boder，box-sizing 这几个属性,前面我们已经学习过这几个属性了，今天再复习一下。

# 浮动和清除浮动

# 伪元素和伪类选择器

# 编码一

实现如下图所示，首字下沉的下沉效果

你需要使用伪元素
下沉效果需要结合浮动属性实现。
给首字母设置合适的字体颜色以及大小

HTML 模板代码

<p>
  I am in the Great Sahara Desert for the third sundown in a row. Fouad and I
  pass back and forth a sun-bleached map of the stars. It’s more of a tug-of-war
  to be honest. With what remains of the daylight, we commit to memory the
  positions of spots on the page. We hope to find some correlation in its
  negative, which slides overhead as the sun rapidly dies.
</p>

# 编码二

参考示例图 (opens new window),利用浮动实现文字类似报纸一样文字包裹图片效果,并且处理文字溢出以及图片溢出

将我们给出的尺寸为 1920 × 1080 的示例图片 (opens new window)添加到 img 元素之中，要求图片仍然保持原比例。
让 article 元素居中显示在页面中垂直居中显示，并且添加一个背景颜色#eee，以及盒子阴影
溢出处理:让文字内内容不要溢出，乖乖呆在盒子内部。
使用浮动特性让文字包裹图片，如示例图 (opens new window)
思考如何清除浮动让文字又恢复到图片下面，不要包裹图片,如示例图 (opens new window)

<!--图片设置固定宽度 练习溢出处理-->
<article style="width:600px;height:300px">
  <div>
    <!--图片设置固定大小为170像素 练习图片处理-->
    <img src="picture.jpg" style="width:170px;height:170px;" />
  </div>
  <div>
    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. 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.
  </div>
</article>

# 编码三

利用浮动创建一个首页布局，css 要求如下

示例图分为头部、底部、左侧，主体内容，右侧
头部和底部各自占领屏幕所有宽度。
上下部之间的部分是一个三栏布局,左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器
中间三列区域的高度取决于三个子元素中最高的高度，三列等高。
调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期
清除浮动尝试用多种方法，体会它们之间的区别

# 要求

注意各项属性在不同浏览器中的兼容性
请注意代码风格的整齐、优雅
HTML 及 CSS 代码结构清晰、规范
代码中含有必要的注释

# 自测问题

学习之后，对下列问题进行自我回答来检验自己本次学习的理论知识掌握程度。

盒模型是什么？请说说你的理解。
标准盒模型和 IE 盒模型计算宽度区别在哪里？
box-sizing有哪些取值？能实现什么效果？

.my-box {
  width: 200px;
  border: 20px solid;
  padding: 20px;
}

你觉得my-box这个元素的宽度为多少？
如果增加box-sizing: border-box;这一行，my-box 这个元素宽度又是多少？
什么是 float ?它能实现什么效果？
清除浮动有哪些方式？试试比较它们的区别?
:after 和 :before 是什么选择器？它们的作用是什么？

# 总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

日期，今天的学习总用时，今天学习的目标是什么，是否达成
哪些东西今天了解得比较透彻，说说自己的理解
哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

# 相关阅读

← 制作一些有趣的效果浮动实战任务 →