IFE 基础学院 第五六天:盒模型和浮动

2018/09/15 FrontEnd

学习目标:掌握 CSS 盒模型以及通过浮动进行简单的布局。

[TOC]

学习 CSS 布局

第五天和第六天 三种简历

日期,今天的学习总用时,今天学习的目标是什么,是否达成

  • 2018.09.15 - 2018.09.24
  • 零碎的几段时间,大概 8 小时吧

学习内容

  • 盒模型
  • 浮动
  • 清除浮动

学习笔记

盒模型

MDN 盒模型

浏览器渲染网页布局时,它会算出每个框的内容要用什么样式,周围的洋葱层有多大,以及框相对于其它框放在哪里。

默认情况下,content的width 被设置为可用空间的100%(在margin, border, padding占据了它们的空间后剩下的空间的宽度)——如果您更改了浏览器窗口的宽度,那么这些框将会变大或变。

注意:

  1. 盒子的高度会忽略百分比设置,而是总会采用盒子内容的高度,除非给它设置了一个绝对高度(例如,像素或者 em)
  2. border 也会忽略百分比宽度设置
  3. margin 坍塌,据说两个盒子挨在一起,距离会是两个 margin 中最大的那个

overflow 溢出

当 box 小于内容时,默认内容会显示在盒子外边,看起来不太舒服。我们可以通过设置 overflow 属性来修改溢出时的显示方式,可选的值有三个:

  1. auto: 内容过多时,隐藏溢出的内容,出现滚动条允许滚动
  2. hidden:隐藏溢出的内容
  3. visible:默认的值,溢出的内容会显示到边框外边

盒/框类型

MDN 上翻译成“框类型”,我还是觉得叫“盒类型”舒服。

可以通过设置 display 属性来改变盒类型,属性值有很多,先看常见的三种:

		<!-- 和段落中的文本一样,可以跨行 --!>
		.inline{
			display: inline;
		}
		
		<!-- 单独一行 --!>
		.block{
			display: block;
		}

		<!-- 介于 inline 和 block 直接,可以在文中,但不会跨行--!>
		.inline-block{
			display: inline-block;
		}

默认状态下display属性值,块级元素(比如 divdisplay: block ,行内元素(比如 spandisplay: inline

改变盒模型

MDN 链接

box-sizing 属性可以调整盒模型。

默认盒模型中,获取一个 box 的宽度、高度等于 它的 with + padding * 2 + margion * 2。

如果你想获取一个 box,让它的宽高只等于本身,就可以为它设置 box-sizing: border-box

居中

为元素设置这样的属性,就可以让它在父容器内居中:

		.center{
			margin: 0 auto;
			width: 700px;
		}

原因是:marginauto (在这种情况下)共享父容器左右边距之间的可用空间,使它居中。

浮动

浮动被设计出来的初衷是用于——文字环绕效果。

虽然有更新的更好的布局技术可用,我们将在本模块的后面探讨。但浮动仍然是人们的旧爱,因为它们可以支持到 Internet Explorer 4。

从一个浮动例子中学到的:

浮动元素会脱离正常的文档布局流,在正常布局中位于该浮动元素之下的内容,会围绕着浮动元素,填满其右侧的空间。

浮动与多列布局

浮动通常用于创建多个列布局。

<!DOCTYPE html>
<html>
<head>
	<title>float 多列</title>
	<style type="text/css">
		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;
		}
	</style>
</head>
<body>
	<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>
</html>

因为 div 默认的 display 是 block,所以只设置第一个浮动,第二个不会顶上去。

使用浮动可以使可视化布局与源顺序不同,这在视觉受损的人借助屏幕阅读器听内容时,可能会感到困惑。

清除浮动

所有在浮动下面的、自身不浮动的内容,都将围绕浮动元素进行排列,这可能会导致某些问题。

clear 意味着 “此处停止浮动”,这个元素和源码中后面的元素将不再浮动。

如果布局因为增加 padding 和 border 在一行放不下,可以考虑使用 box-sizing: border-box 修改盒模型。

高度坍塌:浮动元素在父元素中所占的有效高度为 0,非浮动元素的外边距不能用于在它和浮动元素之间创建间距。

清除浮动2

知乎 那些年我们一起清除的浮动

what-methods-of-clearfix-can-i-use

  • 普通流/文档流
  • 浮动的元素不会影响到块级框的布局,只会影响内联框(通常是文本)

清除浮动的 6 种方法:

  1. 添加额外标签,赋予 clear:both 属性
  2. 使用 br 标签,它自身有 clear=“all | left | right | none” 属性
  3. 父元素设置 overflow:hidden 或者 overflow:auto
  4. 父元素也设置浮动
  5. 父元素设置 display:table
  6. 使用 :after 伪元素,通过 content`` 在元素后面生成一个块级元素

3 和 6 是现代浏览器都支持的。

使用 3 如果你想要支持IE6,你就需要再加入如下样式:


.clearfix {
  overflow: auto;
  zoom: 1;
}

6:

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

适配范围比较广的:

Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

总结:

  • 在支持 BFC 的浏览器(IE8+,firefox,chrome,safari)通过创建新的 BFC 闭合浮动;
  • 在不支持 BFC 的浏览器 (IE6-7),通过 *zoom: 1 触发 hasLayout 闭合浮动。

不建议通过在 HTML 中增加标签来解决问题,最好是在 CSS 中解决。

BFC(Block formatting contexts 块级格式上下文)

流体式布局,中栏放在后面的原理就是:让中栏“流”入左右栏之间的空间中。

普通流体元素 BFC 后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文。

BFC元素特性表现原则就是:内部子元素再怎么翻江倒海、翻云覆雨,都不会影响外部的元素。

什么时候会触发 BFC 呢?常见的如下:

  1. float 的值不为 none
  2. overflow 的值为 auto,scroll或hidden
  3. display 的值为 table-cell, table-caption, inline-block 中的任何一个
  4. position 的值不为 relative 和 static

我们对 BFC 声明家族大致过了一遍,能担任自适应布局重任的也就是:

  1. overflow:auto/hidden IE7+
  2. display:inline-block IE6/IE7
  3. display:table-cell IE8+

练习

第一版简历,学习到了:

  • 粗体字和示例不一致,最后在 html 里加了 <html lang="zh-CN"> 才变正常
  • div 和 span 的使用场景略微熟悉了一些
  • 尽量把重复的、笨拙的标签改成用 css 选择器实现

第二版简历,学习到了:

  • padding margin 不起作用,是因为浮动元素和非浮动元素不在一个层级,让第二个也浮动就起作用了
  • 在父标签里通过 color 指定内部元素文字颜色
  • 分块的时候,用百分比确定每个块的长、宽

第三版简历,学习到了:

  • 多个浮动元素要想单独占据一行,宽度要撑满,这些浮动元素的宽度加起来要达到百分之百,不给其他元素留缝隙
  • 或者给挤进缝隙的元素增加一个 clear:both 清除浮动
  • 组合选择器中,伪类前需要加空格,不然没效果
  • 有些情况下宽度设置 100% 后会跑到下一行,是因为默认的盒模型宽度没包括边距和 border,修改 box-sizing 即可
.detail p :first-child, .history-detail p :first-child{
	font-weight: 700;
	font-size: 1.1em;
	margin-right: 10px;
}

:first-child 这个伪类,只有当元素是其父元素的第一个子元素时才能匹配。

三个版本对比

在教程的最后,要求使用同一份 HTML 代码配合不同的样式都能实现想要的效果:

请你把resume.html中引用的css文件从style_3.css改回style_1.css或者style_2.css,看一下样式是否还健在?

如果没有,请对HTML或CSS代码进行相应调整,保证,无论是用 style_1.css 还是 style_2.css 或是 style_3.css,都可以保证页面按照设计稿的要求呈现。

也就是说同一份 HTML,可以在改变 CSS 代码的情况下,实现不同样式,达到 HTML 结构内容和 CSS 样式的解耦。

我的一、二、三版本 HTML 代码对比如下:

可以看到,第一个版本的 HTML 完全没有层级,基本上所有元素都是在一个级别平铺下来。虽然最后也实现了想要的效果,但后面根本无法拓展成新的样式。

第二个版本稍微加了一两层,把顶部和内容部分区分开来,但内容部分还是一大团代码,没有层级,看起来也很费劲。

第三个版本把内容部分也分了层级,把不同级别的内容用 div 分开,布局上关联的部分都放到了一起。

使用第三种 HTML 布局后,实现不同的样式变得简单,只要适当的使用浮动和清除浮动即可实现不同的排版,达到了内容和样式的解耦!

以后开发页面时,也要实现先把内容分好层级,尽量不要没有层级都堆在一块!

回顾

请反复确认你是否掌握了以下概念:

  1. 盒模型的概念
  2. inline、block 和 inline-block 的概念
  3. 内外边距,宽度,高度,box-sizing 等属性
  4. 浮动,清除浮动
  5. 如何使用浮动进行布局

浮动导致的高度坍塌问题

Search

    Table of Contents