《HTML5权威指南》之使用盒模型

1.为元素应用内边距

应用内边距会在元素内容与边框之间添加空白，我们也可以为内容盒的每个边界单独设置内边距，下面列出padding属性的相关值：

属性                      说明                      值padding-top             为顶边设置内边距            长度值或者百分数padding-right           为右边设置内边距            长度值或百分数padding-bottom          为底边设置内边距            长度值或者百分数padding-left            为左边设置内边距            长度值或者内边距    padding                 简写属性

示例代码：

<style type="text/css">    p {        padding-top: 0.5em;        padding-right: 0.5em;        padding-left: 0.5em;        padding-bottom: 0.4em;    }</style>

如果需要设置简写属性，可以设置一个值，两个值，四个值，一个值表示，所有的内边距一样，如果设置两个值，说明顶边内边距和底边内边距是一样的，左边和右边的内边距是一样的。

2.为元素设置外边距

外边距是元素边框和页面上围绕在它周围的所有东西之间的空白区域。围绕在它周围的东西包括其他元素和它的父元素。
下面说明控制外边距的属性：

属性              说明                      值   margin-top      为顶边设置外边距            长度值或者百分数margin-right    为右边设置外边距            长度值或者百分数margin-bottom   为底边设置外边距            长度值或者百分数margin          简写属性

示例代码：

<style type="text/css">    img {        border: 4px solid black;        backgroud: lightgray;        padding:4px;        margin: 4px 20px;    }</style>

3.控制元素尺寸

浏览器会基于页面上内容的流设置元素的尺寸，使用尺寸相关的属性可以改变浏览器的元素默认尺寸：

属性                      说明                              值width                   设置元素的高度和宽度              auto,长度值或百分数height  min-width               为元素设置最小可接受宽度和高度     auto,长度值或百分数min-height      max-width               为元素设置最大可接受的宽度和高度    auto,长度值或百分数max-heightbox-sizing              设置尺寸调整应用元素盒子的哪一部分   content-box,padding-box,border-box,margin-box

前三个属性值都是auto。
示例代码：

head内结构：<style type="text/css">    div {        width: 75%;        height: 100px;        border: thin solid black;    }    img {        backgroud: lightgray;        border: 4px solid  black;        margin: 2px;        height: 50%;    }    #first {        box-sizing: content-box;        width: 50%;    }</style>body内结构：<div>    <img id="first" src="./test.png"></img> </div>

其中div元素设置为75%，意思是将div元素的宽度设置为其所在父元素的宽度的75%。

3.1.设置最小和最大尺寸

可以使用最小和最大相关属性为浏览器调整元素尺寸设置一定的限制，示例代码如下：

<style type="text/css">    img {        backgroud: lightgray;        border: 4px solid black;        margin: 2px;        box-sizing: border-box;        min-width: 100px;        width:  50%;        max-width: 200px;    }</style>

上述代码使img元素的宽度为其父元素的50%，但是最大不超过200px,至少为100px。

4.处理溢出内容

如果我们固定元素的尺寸，可能会存在溢出的问题，这时可以使用overflow属性来处理溢出的内容，说明如下：

属性              说明overflow-x      设置水平方向和垂直方向水平溢出的方式overflow-yoverflow        简写属性

下面说明了这三个属性的取值说明：

值           说明auto        浏览器自行处理溢出内容，通常，如果内容被剪掉就显示滚动条，否则就不显示hidden      多余的部分直接剪掉，只显示内容盒里面的内容no-content  如果内容无法全部显示，则全部移除no-display  如果内容无法全部显示，则隐藏全部内容scroll      为了让用户看到内容，浏览器会添加滚动机制visible     默认值，不管是否溢出，都显示元素内容

5.控制元素的可见性

可以通过属性visibility属性控制元素的可见性,具体说明如下：

值               说明collapse        元素不可见，且在页面布局中不占据空间hidden          元素不可见，但在页面中占据空间visible         默认值，元素在页面上可见

6.设置元素的盒类型

display属性提供了一种改变元素盒类型的方式，这会相应改变元素在页面上的布局方式。下表显示的是display允许的值：

值               说明inline          盒子显示为文本行中的字block           盒子显示为段落inline-block    盒子显示为文本行list-item       显示为列表项，通常具有项目符号或者其他标记符号run-in          盒子类型取决于周围的元素compact         盒子的类型为块或者标记盒(跟list-item类型产生的类似)flexbox         这个值跟弹性盒布局有关table           这些值跟表格中的元素布局有关inline-tabletable-row-grouptable-header-grouptable-footer-grouptable-rowtable-column-grouptable-columntable-celltable-captionruby            这些值跟ruby注释的文本有关ruby-base       ruby-textruby-base-groupruby-text-groupnone            元素不可见，且在页面布局中不占空间

6.1.认识块级元素

将display属性设置为block会创建一个块级元素，块级元素可以理解为在该元素前后都放置了换行符。自成一段。
示例代码如下：

<style type="text/css">    span {        display: block;        ...    }</style>

6.2.认识行内元素

将display属性设置为inline会创建一个行内元素，它在视觉上跟周围元素没啥区别，行内元素可以理解为将该元素的左右两边挨着其他元素，不用另起一段。
示例代码：

<style type="text/css">    p {        display: inline;    }</style>

p元素在正常情况下是会另起一段，然而上面的p元素不会另起一段，紧挨着其他元素。

6.3.认识行内块级元素

将display设置为inline-block值会创建一个其特征混合了块和行内元素的元素，具体来说，它具有块元素的特征，比如height,width,padding等，又具有行内元素的特征，即不会另起一段。

示例代码：

<style type="text/css">    span {        display: inline-block;    }</style>

6.4.认识插入元素

display属性值为run-in会创建一个这样的元素： 其盒子的类型取决于周围的元素，通常浏览器会应对以下三种情况：

• 如果插入元素包含一个display属性值为block的元素，那么插入元素就是块级元素。比如 div元素包含一个p元素，那么div元素也是一个块级元素。
• 如果插入元素的相邻兄弟元素是块级元素，那么插入元素就是兄弟元素中的第一个行内元素。
• 其他情况下，插入元素均作为块级元素

这里对第二个情况进行说明一下：

<style type="text/css">     p {        display: block;    }    span {        dispaly: run-in;    }</style>body内结构：<span>    content1</span><p>     content2</p>

显示的结果是span元素内容紧挨着p元素内容，span元素作为行内元素处理。

<style type="text/css">     p {        display: inline;    }    span {        dispaly: run-in;    }</style>body内结构：<span>    content1</span><p>     content2</p>

显示结果是span元素和p元素各另起一段，span元素作为块元素处理

6.5.隐藏元素

将display元素属性值设置为none，就是不为元素创建任何类型的盒子，这时元素在页面内不占据任何空间。

7.创建浮动盒

可以使用float属性创建浮动盒，浮动盒将元素的左边界或者右边界移动到包含块或者另一个浮动盒的边界。下面总结资格属性：

属性              说明                      值float           设置元素的浮动样式           left,right,none

对值进行说明：

值               说明left            移动元素，使其左边界挨着包含块的左边界，或者是另一个浮动元素的右边界right           移动元素，使其右边界挨着包含块的右边界，或者是另一个浮动元素的左边界none            元素位置固定

如果设置多个浮动元素，它们会一个挨着一个堆叠在一起。如果不想让元素堆叠在一起，那么可以使用clear属性。值说明如下：

值           说明left        元素的左边界不能挨着另一个浮动元素right       元素的右边界不能挨着另一个浮动元素both        元素的左右边界都不能挨着另外的浮动元素none        元素的左右边界可以挨着另外的浮动元素

示例代码：

<style type="text/css">    p {        clear: left;    }</style>