第十六章 边框和盒子
在CSS可视化模型中，所有HTML元素显示为内联盒子或者块盒子，CSS规则中的属性值通过对每个盒子的内容应用样式。影响这些盒子的显示方式。
在第六章中学习了盒子模型，也学习了如何使用margin,padding,border属性影响盒子如何显示，。如前所见，CSS浏览器将所有页面看作一系列嵌套的盒子，块盒子包含内联盒子或其它盒子，内联盒子包含文本等内容，使用标识盒子或者盒子组的选择符，在各盒子基础上应用样式。
边缘属性的简写属性：
值：设置所有四个属性为同一个值。
值1，值2：设置上下边属性为值1，左右边属性为值2.
值1，值2，值3：设置上为值1，左右为值2，下为值3.
值1，值2，值3，值4：上，右，下，左。
设置边距：
Margin属性的值：
大小：设置边距为特定的大小。
百分比：设置边距为包含盒子的宽度的百分比。
auto：自动计算边距
值auto的解释：如果对内联元素设置它，值计算为0.如果对盒子元素的左边距或者右边距设置它。边距设置为包含盒子内所有其他空间，这是将包含盒子移动到某一边。如果左边距和右边距都设置了auto,盒子将在它的包含盒子内居中，上下边距的auto值没有效果。
Padding属性：
Border-width属性：
Medium 设置中等厚度的边框
Thick 设置粗边框
Thin 设置细边框
大小 设置边框的宽度为一特定的大小
Border-style属性：
Dashed 虚线边框
Dotted 点划线边框
Double 双实线边框
Groove 边框具有雕刻效果
Inset 整个盒子具有雕刻效果
Solid 单实线
除了更改边缘的属性，也可以设置某些盒子根本不显示，或者显示方式不同，控制它的属性是display,visibility.
Display属性的值：
Block 显示为块盒子
Inline 显示为内联元素
Inline-block 显示内联元素为内联盒子，但是盒子的内容显示为好像它是块盒子
List-item 显示为列表项
None 不显示盒子或者它的子盒子
Visibily和display都影响盒子的显示，不同的地方在于：visibility在页面上为没有显示的盒子留出空间，。Display不留出空间。
Visibily属性值：
Hidden 不显示盒子但保留空间
Visible 正常显示盒子
如何通过margin属性对齐盒子？
方法如下：首先不要使用text-align,除非想对齐盒子的内容，改为使用margin-left和margin-right:
.left{margin-right:auto;}
第十七章 设计表格样式
HTML中的表是Web开发的重要部分，用于每件事情，从日程表到日历到页面布局，尽管CSS为页面的可视化设计提供替换表格的能力，更普遍的情形是为了最好的效果，共同使用表格和CSS样式。在Web中，表格无所不在，可视化构成格式化输出的主要方式，在HTML中，它们最初用于纯数据，但已经发展成为基本页面布局子语言。
在第二十章，将介绍如何从Web设计完全消除表格页面元素的定位，而只使用CSS。
CSS表格模型基于表格模型。
HTML表格通过<table>元素定义，在该元素的打开和关闭标签之内，可以发现由许多<tr>标签指定的表格行，每一行由一个或者多个表格单元格组成，或者是<td><th>.通过<thead><tbody><tfoot>元素，将表格行聚焦成组，可以构造更复杂的表格，<thead>标签用于指定表格标题行，如果打印的表格超过一页纸，<thead>应该在每个页面的顶端重复，<tfoot>是表格标题行的补充，用<tbody>标签标记的表格正文部分，将相关行集合在一起。
Table-layout属性用来指定表格的自动或固定布局属性值如下：
Auto：让浏览器决定表格单元格的设置。
Fixed:显示指定每个表格单元格的宽度。
通知浏览器正在使用固定布局后，需要使用width定义每一列的宽度，width的值可以是绝对值或百分比。
Table{table-layout:fixed;
Width:90%;
}
表格边框，填充，和间距
显示或隐藏空单元格
只能对表格元素设置为empty-cells属性：它的有效值如下：
Hide:空白单元格的边框不显示，
Show：显示空白单元格的合适边框
折叠边框：
对单元格边框可以折叠或者保持分开，对table元素设置border-cellapse属性值：
Collapse:将晦气边框折叠在一起，
Separate：保持将边框分开。
分开的边框，表格单元格也可以与它们之间的空白一起显示，设置border-collapse为separate,在HTML中，单元格之间的间距通过cellspacing属性设置，在CSS中，同样的效果通过border-spacing来设置。。
属性性：
大小：设置水平和垂直为同一个值
大小，大小：分别设置水平和垂直为不同的值
表格标题：
HTML中caption标签给出标题，它是表格的标签，’
使用caption-side属性可以设置将标题放在表格盒子的不同边。
Bottom:底边
Top:标题出现在表格之前
设计列的样式：
要指定一列或一组列，使用<col><colgroup>
通过在实例中添加<col><colgroup>扩展日程表标记，紧邻<caption>标签后，添加以下行：
<colgroup>
<col id=”time”>
</colgroup>
<colgroup id=”days”>
<col id=”mon”>
<col id=”tue”>
</colgroup>
几乎任何其他的样式可以对块元素设置的都可以对表格单元使用，主要的例外是表格单元绝不会有边距属性。
使用text-align设置水平对齐
使用vertical-align设置垂直对齐
第十八章 调整盒子大小和偏移量
在HTML中，通过height，width属性来设置显示盒子的大小，它们是控制内容盒子尺寸的CSS的属性的名称。
通过CSS设置width,height,只能设置内容宽度，不是盒子所占据的实际大小，真正的盒子包括边距，边框和任何边距设置。
有时可能不想设置尺寸的具体大小，相反，可能想要列灵活的设计，允许尺寸的大小在两个值之间变化。Min-width,max-width,min-height,max-height.
内容溢出：
如果盒子的高度还没有通过height属性设置，则高度自动计算，但是如果height属性已经设置，将会发生溢出。
要更改当盒子溢出时发生的情况，可以设置overflow属性的值：
Auto: 浏览器决定
Hidden: 溢出内容不显示
Scroll: 使用可滚动盒子提供对所有内容的访问
Visible: 溢出内容延伸到盒子之外
相对定位：CSS提供几种将盒子放在屏幕上的方法，已经学过了float属性，也可以使用position.来指定盒子在屏幕上的位置。
根据相对定位放置的盒子，可相对于盒子通常出现的位置定位，根据偏移量来修改，这个偏移量由top,bottom,left,right.
Position值如下：
Absolute: 相对包含盒子给盒子定位
Fixed: 相对于包含盒子给盒子定位，即使页面滚动，也不移动它。
Relative: 相对于它的通常位置给盒子定位
Static: 把盒子放在它通常应该放在的地方
正 left值将盒子向右移动。
Position的默认值为static.
除了调整盒子大小，也可以使用相对定位，移动它们离开它们的原始位置，设置position属性为relative,开启该盒子的相对定位，使用四个偏移属性，调整盒子的位置。
相对定位，绝对定位和固定定位的区别？
相对定位总是涉及根据盒子的原始位置来移动 盒子，总是保留盒子在而已中的空间，绝对定位和固定定位相对于包含块，而不是盒子的原始位置来放置盒子，这两种类型的定位都保留盒子通常出现的空间。如果需要对盒子的定位进行小的移动，相对定位有效。
第十九章，绝对定位和固定定位
无论何时在页面包含HTML元素，它都会产生一个显示盒，通常，根据文档结构以及该盒子是内联盒子还是块盒子，可以将这些盒子一个接一个的或者一个套一个的放置，这在CSS规范中称作为普通流，打断内容普通流的方法之是是使用浮动属性，用户有两种其它类型的定位的都可以使用，叫作绝对定位，固定定位。
这些方法也使用position,top.right,left,bottom
将postion设为absolute后，用户从文本的普通流中取出幸免于难，并将它相对定位到其他盒子，这被称为包含块。已经定位的元素依据属性top,left,right,bottom相对于包含块设置。
在绝对定位中，显示盒相对于包含盒设置，具有某个数量的偏移，盒子移出了普通流，实际上，甚至没有给它分配绝对定位的盒子通常占用的空间，相反，它在其它的地方出一， 甚至很可能覆盖了现有的内容。
绝对定位的包含块最初设置为 body标签的盒子，绝对定位元素相对放置于页面的余下部分，但是，如果定位了元素的祖 先盒子，用absolute,relative,fixed定位，那么定位盒子就变成新的绝对定位的包含块。
不像相对定位，绝对定位没有给定目标在原始预留适当空间。
在上例中，#mars盒子定位为right:2em,top:6em.这不是相对于原始位置，而是相于它所在的包含块，要本例 中，包含块为body.然后，例子的右边设置为距离浏览器显示区2em,盒子上边设为由顶部向下6em.
分层的内容：
正如在丛林狼漫画示例 中见到的，使用绝对或相对定位可以将内容定位到已经被其它内容占据的位置，通常称作层。
每一层都以HTML源代码出现 的顺序旋转，后面的层放在前面层的上面，这个属性可以用z-index属性改变，它的值 是指示分层顺序的数字，较低的数字在底部，较高的数字在顶部。
固定定位：
在固定定位中，即使页面余下部分移动，放置在屏幕上的盒子也不会移动，漂浮于内容的其它部分之上，根据固定定位旋转的盒子与整个页面有关。
在CSS可视化模型中，所有HTML元素显示为内联盒子或者块盒子，CSS规则中的属性值通过对每个盒子的内容应用样式。影响这些盒子的显示方式。
在第六章中学习了盒子模型，也学习了如何使用margin,padding,border属性影响盒子如何显示，。如前所见，CSS浏览器将所有页面看作一系列嵌套的盒子，块盒子包含内联盒子或其它盒子，内联盒子包含文本等内容，使用标识盒子或者盒子组的选择符，在各盒子基础上应用样式。
边缘属性的简写属性：
值：设置所有四个属性为同一个值。
值1，值2：设置上下边属性为值1，左右边属性为值2.
值1，值2，值3：设置上为值1，左右为值2，下为值3.
值1，值2，值3，值4：上，右，下，左。
设置边距：
Margin属性的值：
大小：设置边距为特定的大小。
百分比：设置边距为包含盒子的宽度的百分比。
auto：自动计算边距
值auto的解释：如果对内联元素设置它，值计算为0.如果对盒子元素的左边距或者右边距设置它。边距设置为包含盒子内所有其他空间，这是将包含盒子移动到某一边。如果左边距和右边距都设置了auto,盒子将在它的包含盒子内居中，上下边距的auto值没有效果。
Padding属性：
Border-width属性：
Medium 设置中等厚度的边框
Thick 设置粗边框
Thin 设置细边框
大小 设置边框的宽度为一特定的大小
Border-style属性：
Dashed 虚线边框
Dotted 点划线边框
Double 双实线边框
Groove 边框具有雕刻效果
Inset 整个盒子具有雕刻效果
Solid 单实线
除了更改边缘的属性，也可以设置某些盒子根本不显示，或者显示方式不同，控制它的属性是display,visibility.
Display属性的值：
Block 显示为块盒子
Inline 显示为内联元素
Inline-block 显示内联元素为内联盒子，但是盒子的内容显示为好像它是块盒子
List-item 显示为列表项
None 不显示盒子或者它的子盒子
Visibily和display都影响盒子的显示，不同的地方在于：visibility在页面上为没有显示的盒子留出空间，。Display不留出空间。
Visibily属性值：
Hidden 不显示盒子但保留空间
Visible 正常显示盒子
如何通过margin属性对齐盒子？
方法如下：首先不要使用text-align,除非想对齐盒子的内容，改为使用margin-left和margin-right:
.left{margin-right:auto;}
第十七章 设计表格样式
HTML中的表是Web开发的重要部分，用于每件事情，从日程表到日历到页面布局，尽管CSS为页面的可视化设计提供替换表格的能力，更普遍的情形是为了最好的效果，共同使用表格和CSS样式。在Web中，表格无所不在，可视化构成格式化输出的主要方式，在HTML中，它们最初用于纯数据，但已经发展成为基本页面布局子语言。
在第二十章，将介绍如何从Web设计完全消除表格页面元素的定位，而只使用CSS。
CSS表格模型基于表格模型。
HTML表格通过<table>元素定义，在该元素的打开和关闭标签之内，可以发现由许多<tr>标签指定的表格行，每一行由一个或者多个表格单元格组成，或者是<td><th>.通过<thead><tbody><tfoot>元素，将表格行聚焦成组，可以构造更复杂的表格，<thead>标签用于指定表格标题行，如果打印的表格超过一页纸，<thead>应该在每个页面的顶端重复，<tfoot>是表格标题行的补充，用<tbody>标签标记的表格正文部分，将相关行集合在一起。
Table-layout属性用来指定表格的自动或固定布局属性值如下：
Auto：让浏览器决定表格单元格的设置。
Fixed:显示指定每个表格单元格的宽度。
通知浏览器正在使用固定布局后，需要使用width定义每一列的宽度，width的值可以是绝对值或百分比。
Table{table-layout:fixed;
Width:90%;
}
表格边框，填充，和间距
显示或隐藏空单元格
只能对表格元素设置为empty-cells属性：它的有效值如下：
Hide:空白单元格的边框不显示，
Show：显示空白单元格的合适边框
折叠边框：
对单元格边框可以折叠或者保持分开，对table元素设置border-cellapse属性值：
Collapse:将晦气边框折叠在一起，
Separate：保持将边框分开。
分开的边框，表格单元格也可以与它们之间的空白一起显示，设置border-collapse为separate,在HTML中，单元格之间的间距通过cellspacing属性设置，在CSS中，同样的效果通过border-spacing来设置。。
属性性：
大小：设置水平和垂直为同一个值
大小，大小：分别设置水平和垂直为不同的值
表格标题：
HTML中caption标签给出标题，它是表格的标签，’
使用caption-side属性可以设置将标题放在表格盒子的不同边。
Bottom:底边
Top:标题出现在表格之前
设计列的样式：
要指定一列或一组列，使用<col><colgroup>
通过在实例中添加<col><colgroup>扩展日程表标记，紧邻<caption>标签后，添加以下行：
<colgroup>
<col id=”time”>
</colgroup>
<colgroup id=”days”>
<col id=”mon”>
<col id=”tue”>
</colgroup>
几乎任何其他的样式可以对块元素设置的都可以对表格单元使用，主要的例外是表格单元绝不会有边距属性。
使用text-align设置水平对齐
使用vertical-align设置垂直对齐
第十八章 调整盒子大小和偏移量
在HTML中，通过height，width属性来设置显示盒子的大小，它们是控制内容盒子尺寸的CSS的属性的名称。
通过CSS设置width,height,只能设置内容宽度，不是盒子所占据的实际大小，真正的盒子包括边距，边框和任何边距设置。
有时可能不想设置尺寸的具体大小，相反，可能想要列灵活的设计，允许尺寸的大小在两个值之间变化。Min-width,max-width,min-height,max-height.
内容溢出：
如果盒子的高度还没有通过height属性设置，则高度自动计算，但是如果height属性已经设置，将会发生溢出。
要更改当盒子溢出时发生的情况，可以设置overflow属性的值：
Auto: 浏览器决定
Hidden: 溢出内容不显示
Scroll: 使用可滚动盒子提供对所有内容的访问
Visible: 溢出内容延伸到盒子之外
相对定位：CSS提供几种将盒子放在屏幕上的方法，已经学过了float属性，也可以使用position.来指定盒子在屏幕上的位置。
根据相对定位放置的盒子，可相对于盒子通常出现的位置定位，根据偏移量来修改，这个偏移量由top,bottom,left,right.
Position值如下：
Absolute: 相对包含盒子给盒子定位
Fixed: 相对于包含盒子给盒子定位，即使页面滚动，也不移动它。
Relative: 相对于它的通常位置给盒子定位
Static: 把盒子放在它通常应该放在的地方
正 left值将盒子向右移动。
Position的默认值为static.
除了调整盒子大小，也可以使用相对定位，移动它们离开它们的原始位置，设置position属性为relative,开启该盒子的相对定位，使用四个偏移属性，调整盒子的位置。
相对定位，绝对定位和固定定位的区别？
相对定位总是涉及根据盒子的原始位置来移动 盒子，总是保留盒子在而已中的空间，绝对定位和固定定位相对于包含块，而不是盒子的原始位置来放置盒子，这两种类型的定位都保留盒子通常出现的空间。如果需要对盒子的定位进行小的移动，相对定位有效。
第十九章，绝对定位和固定定位
无论何时在页面包含HTML元素，它都会产生一个显示盒，通常，根据文档结构以及该盒子是内联盒子还是块盒子，可以将这些盒子一个接一个的或者一个套一个的放置，这在CSS规范中称作为普通流，打断内容普通流的方法之是是使用浮动属性，用户有两种其它类型的定位的都可以使用，叫作绝对定位，固定定位。
这些方法也使用position,top.right,left,bottom
将postion设为absolute后，用户从文本的普通流中取出幸免于难，并将它相对定位到其他盒子，这被称为包含块。已经定位的元素依据属性top,left,right,bottom相对于包含块设置。
在绝对定位中，显示盒相对于包含盒设置，具有某个数量的偏移，盒子移出了普通流，实际上，甚至没有给它分配绝对定位的盒子通常占用的空间，相反，它在其它的地方出一， 甚至很可能覆盖了现有的内容。
绝对定位的包含块最初设置为 body标签的盒子，绝对定位元素相对放置于页面的余下部分，但是，如果定位了元素的祖 先盒子，用absolute,relative,fixed定位，那么定位盒子就变成新的绝对定位的包含块。
不像相对定位，绝对定位没有给定目标在原始预留适当空间。
在上例中，#mars盒子定位为right:2em,top:6em.这不是相对于原始位置，而是相于它所在的包含块，要本例 中，包含块为body.然后，例子的右边设置为距离浏览器显示区2em,盒子上边设为由顶部向下6em.
分层的内容：
正如在丛林狼漫画示例 中见到的，使用绝对或相对定位可以将内容定位到已经被其它内容占据的位置，通常称作层。
每一层都以HTML源代码出现 的顺序旋转，后面的层放在前面层的上面，这个属性可以用z-index属性改变，它的值 是指示分层顺序的数字，较低的数字在底部，较高的数字在顶部。
固定定位：
在固定定位中，即使页面余下部分移动，放置在屏幕上的盒子也不会移动，漂浮于内容的其它部分之上，根据固定定位旋转的盒子与整个页面有关。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
