《HTML5与CSS3基础教程》第十一章学习笔记 用CSS进行布局

第11章 用CSS进行布局

11.1 开始布局的注意事项

1. 内容与显示分离
2. 选择合适的布局方式
   1. 固定布局
   2. 响应式布局：亦称为流式页面
3. 使用多个浏览器对页面进行测试

11.2 构建页面

• 构建页面
  • 恰当的使用article、aside、nav、section、header、footer、div
  • 使用标题元素h1~h6
  • 使用合适的语义标记剩余的内容，如段落、表和列表
  • 添加注释

11.4 对默认样式进行重置或标准化

• 抹平差异的方法主要有两种（只使用其中一种即可）。
  • 使用CSS重置（reset）开始主样式表，如Eric Meyer创建的Meyer重置http://meyerweb.com/eric/tools/css/reset/。另外还有其他的一些重置样式表。
  • 使用Nicolas Gallagher和Jonathan Neal创建的normalize.css开始主样式表。该样式表位于http://necolas.github.com/normalize.css/（最新版本使用Download按钮）。

11.5 盒模型

- **内容区域**
- **内边距(padding)**：内容区域周围的空间
- **边框(border)**：内边距的边缘
- **外边距(margin)**：边框外面将元素与相邻隔开的不可见区域

• 无设置box-sizing:border-box:长度和宽度等于内边距里面的内容区域
• 有设置box-sizing:border-box:长度和宽度等于除外边距之外的所有元素

11.6 控制元素的显示类型和可见性

• visibility控制元素的可见性,当visiblity属性的值为hidden时，元素及其内容会留下一片空白区域

/* ====隐藏元素==== */
<p>This is the <em style="visibility:hidden">first</em> paragraph</p>
<p>This is the <em style="visibility:hidden">second</em> paragraph</p>

显示效果：隐藏元素，元素及其内容会留下一片空白区域
This is the　　　　paragraph
This is the　　　　　paragraph

• display属性：指定元素的显示方式
  • 块级元素为display:block(对于li元素为display:list-item)
  • 行内元素被设置为display:inline
  • 混合显示方式display:inline-block，让元素与其他内容出现在同一行，同时具有块级元素的属性
  • 删除元素display:none

/* ====块级元素==== */
<p>This is the <em style="display:block">first</em> paragraph</p>
<p>This is the <em style="display:block">second</em> paragraph</p>

显示效果：em元素单独显示在一行
This is the first paragraph
This is the second paragraph

/* ====行内元素==== */
<p>This is the <em style="display:inline">first</em> paragraph</p>
<p>This is the <em style="display:inline">second</em> paragraph</p>

显示效果：em设置为line会忽略任何width、height、margin-top、margin-bottom
This is the first paragraph
This is the second paragraph

/* ====混合元素==== */
<p>This is the <em style="display:inline-block">first</em> paragraph</p>
<p>This is the <em style="display:inline-block">second</em> paragraph</p>

显示效果：em设置为line-block可以设置width、height、margin-top、margin-bottom
This is the first paragraph
This is the second paragraph

<li>列表项目的元素display属性默认值为list-item，会从上往下排列，用inline-block属性覆盖后<li>元素都显示在一行

<ul>
	<li style="display: inline-block;">first</li>
	<li style="display: inline-block;">second</li>
	<li style="display: inline-block;">three</li>
</ul>

显示效果
first second three

/* ====删除元素==== */
<p>This is the <em style="display:none">first</em> paragraph</p>
<p>This is the <em style="display:none">second</em> paragraph</p>

显示效果：将其元素从文档流中完全移除
This is the first paragraph
This is the second paragraph

文档流:
默认情况下，元素会按照它们在HTML中自上而下出现的次序显示（这称为文档流，document flow），并在每个非行内元素的开头和结尾处换行。

11.7 设置元素的高度

提示　不能为显示为行内元素的元素（如短语内容）设置高度或宽度，除非为它们设置display: inline-block或display: block。

提示　width和height不是继承的

• 如果不显式指定宽度和高度，浏览器就会使用auto，对于大多数默认显式为块级元素的元素，$width的auto值==包含块的宽度-元素的内边距-边框-外边距$

简单说来，包含块的宽度指的是父元素给元素留出的宽度

• 如果手动设置width,并将左右外边距都设为auto，那么两个外边距就将设为相等的最大值，例如.page{ margin: 0 auto}

<div style="background-color: khaki;width: 300px;">
	<p style="background:white;width:200px;margin:0 auto;">
		虎扑上有位网友的母去世了，丧葬期间他没流过几次泪，心里头也没有太悲伤的情绪。他很困惑，是不是自己骨子头是个冷血的人。于是他上论坛发了帖子说这个事。帖子里，有人安慰道：“至亲离去的那一瞬间通常不会使人感到悲伤，而真正会让你感到悲痛的是打开冰箱的那半盒牛奶、那窗台上随风微曳的绿箩、那安静折叠在床上的绒被，还有那深夜里洗衣机传来的阵阵喧哗。”
	</p>
</div>

<div style="background-color: green;width: 300px;">
	<p style="background:khaki;width:200px;margin:0 auto;">
		虎扑上有位网友的母去世了，丧葬期间他没流过几次泪，心里头也没有太悲伤的情绪。他很困惑，是不是自己骨子头是个冷血的人。于是他上论坛发了帖子说这个事。帖子里，有人安慰道：“至亲离去的那一瞬间通常不会使人感到悲伤，而真正会让你感到悲痛的是打开冰箱的那半盒牛奶、那窗台上随风微曳的绿箩、那安静折叠在床上的绒被，还有那深夜里洗衣机传来的阵阵喧哗。”
	</p>
</div>

为什么min-height通常比height更适用

除非你确定元素的内容不会变得更高，最好避免在样式表中指定高度。在大多数情况下，可以让内容和浏览器自动控制高度。这可以让内容在浏览器和设备中根据需要进行流动。
如果设置了高度，随着内容变多，它们有可能撑破元素的盒子，这可能是你预期之外的。在这种情况下，符合标准的浏览器不会自动扩大高度，它们在你指定高度时采用了这个指令，并一直坚持下去。（了解相关示例请参考11.16节。）
不过，如果希望元素至少具有某一特定高度，可以设置min-height。如果内容日后变多，元素的高度会自动按需增长。这是height与min-height的区别，width和min-width也是类似的。
或许你还有所疑虑，实际上，很多原因都会导致内容增长。你的内容或许来自数据库、第三方源或由用户生成的内容。同时，访问者可能增大其浏览器的字体大小，覆盖你指定的样式。

11.8 在元素周围添加内边距

• 内边距padding：元素内容周围，边框以内的空间，可以改变内边距的厚度，不能改变他的颜色或纹理

  • padding-top:x;
  • padding-rigth:x;
  • padding-bottom:x;
  • padding-left:x;

• padding的简记法

值数	含义	实例
一个值	对应四个边	padding:5px
两个值	上下、左右	padding:5px 9px
三个值	上、左右、下	padding:5px 9px 11px
四个值	上、右、下、左（顺时针方向）	padding:5px 9px 11px 0

11.9 设置边框

• `border:在元素周围创建边框，或针对元素的某一遍设置边框，并设置它的厚度、风格和颜色
  • border-top:x;
  • border-rigth:x;
  • border-bottom:x;
  • border-left:x;

边框风格	属性值
无	none
点线	dotted
虚线	dashed
实线	solid
双线	double
槽线	groove
脊线	ridge
凹边	inset
凸边	outset

提示　border简写属性及各个边框属性（border-width、border-style和border-color）均可接受一至四个值。如果使用一个值，那么它会应用于全部四个边。如果使用两个值，那么前一个值会应用于上下两边，后一个值会应用于左右两边。如果使用三个值，那么第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边。如果使用四个值，那么它们会按照时钟顺序，依次应用于上、右、下、左四个边。

提示　要让边框显示出来，至少必须定义边框样式。如果没有定义样式，就不会显示边框。边框样式的默认值是border-style: none。

##　11.10 设置元素周围的外边距

• 外边距(margin)：元素与相邻元素之间的透明空间
  • margin-top:x;
  • margin-rigth:x;
  • margin-bottom:x;
  • margin-left:x;

提示　如果对margin使用一个值，这个值就会应用于全部四个边。如果使用两个值（参见图11.10.6），那么前一个值会应用于上下两边，后一个值会应用于左右两边。如果使用三个值（参见图11.10.3），那么第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边。如果使用四个值，那么它们会按照时钟顺序，依次应用于上、右、下、左四个边。

提示　margin属性的auto值依赖于width属性的值

理解内边距和外边距的em值
当em值用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小的

11.11 使元素浮动

• float：让元素浮动
  • left：元素浮动到左边，其他内容围绕在它右边
  • right：元素浮动到右边，其他内容围绕在它左边
  • none：让元素完全不浮动：此为默认值

详见菜鸟教程关于float

11.12 控制元素浮动的位置

1.让浮动元素的父元素“自清除”

css中clearfix清除浮动的用法

11.12 控制元素浮动的位置

11.13 对元素进行相对定位

11.14 对元素进行绝对定位

11.15 在栈中定位元素

**这三章写的比较好的是菜鸟教程的CSS Position(定位)**另外还提到了本书未提到的sticky定位

11.16 处理溢出

• overflow处理溢出
  • visible：让元素盒子中的所有内容可见，这是默认项
  • hidden：隐藏元素盒子容纳不了的内容
  • scroll：无论元素是否需要，都在元素上添加滚动条
  • auto：让滚动条仅在访问者访问溢出内容时出现

11.17 垂直对齐元素

• 使元素垂直对齐的步骤
  • 输入vertical-align:
  • 输入baseline，使元素的基准线对齐父元素的基准线；
  • 或者输入middle，使元素位于父元素中央；
  • 或者输入sub，使元素成为父元素的下标；
  • 或者输入super，使元素成为父元素的上标；
  • 或者输入text-top，使元素的顶部对齐父元素的顶部；
  • 或者输入text-bottom，使元素的底部对齐父元素的底部；
  • 或者输入top，使元素的顶部对齐当前行里最高元素的顶部；
  • 或者输入bottom，使元素的底部对齐当前行里最低元素的底部；
  • 或者输入元素行高的百分比，可以是正数，也可以是负数；
  • 或者输入某个值（正负均可，单位为像素或em）分别按照特定的值向上或者向下移动元素。

除了表格以外，vertical-align属性仅适用于行内元素，不能应用于块级元素。

11.19 修改鼠标指针

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。