CSS3-页面布局基础二——Box Model、边距折叠、内联与块标签

一、盒子模型（Box Model）

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>盒子模型</title>

        <style type="text/css">

            #box{

                width: 100px;

                height: 100px;

                margin: 20px;

                padding: 20px;

                border: 10px solid blue;

            }

        </style>

    </head>

    <body>

        <div id="box">

            Box Model

        </div>

    </body>

</html>

结果：

1.1、宽度测试

计算最大宽度，示例如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>盒子模型</title>

        <style type="text/css">

            #box{

                width: 800px;

                padding: 10px;

                border: 5px solid blue;

                margin: 10px;

            }

            .sbox{

                display: inline-block;

                padding: 10px;

                margin: 10px;

                border: solid 10px coral;

                background: lightblue;

                width: ?;

            }

        </style>

    </head>

    <body>

        <div id="box">

            <div class="sbox">Left</div><div class="sbox">Right</div>

        </div>

    </body>

</html>

要达到如下效果，请问?处最大可以设置为多少像素？

答案：

width：340

1.2、溢出测试

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>盒子模型</title>

        <style type="text/css">

            #box{

                width: 800px;

                padding: 10px;

                border: 5px solid blue;

                margin: 10px;

                height: 100px;

            }

            #box #innerBox{

                background: lightblue;

                height:50px ;

                width: 100%;

                padding: 10px;

                margin: 10px;

                border: 10px solid lightcoral;

            }

        </style>

    </head>

    <body>

        <div id="box">

            <div id="innerBox">

                innerBox

            </div>

        </div>

    </body>

</html>

请问运行时innerBox是否会超出box，如果会，超出多少？

可见部分=850-815=35，还有10个margin不可见，45px

如果不想让innerBox超出，则应该删除其100%的宽度设置，去掉width:100%，一般不要设置，多此一举。

1.3、box-sizing属性

设置或检索对象的盒模型组成模式

content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>盒子模型</title>

        <style type="text/css">

            #box{

                width: 100px;

                height: 100px;

                padding: 10px;

                border: 10px solid blue;

                margin: 10px;

            }

        </style>

    </head>

    <body>

        <div id="box">

            Box Model

        </div>

    </body>

</html>

当box-sizing: border-box时的宽度设置会包含border与padding，但不包含margin，但margin也会占用位置

1.4、利用CSS画图

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>盒子模型 - 三角形</title>

        <style type="text/css">

            #box{

                width: 0;

                height: 0;

                border: 100px solid blue;

                border-color: blue transparent transparent transparent;

                /*设置边线的颜色，transparent表示透明的颜色，按上右下左的顺时钟方向*/

            }

        </style>

    </head>

    <body>

        <div id="box">

        </div>

    </body>

</html>

结果：

心型代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            #heart {

                position: relative;

                width: 100px;

                height: 90px;

            }

            #heart:after,#heart:before {

                position: absolute;

                content: "";

                left: 50px;

                top: 0;

                width: 50px;

                height: 80px;

                background: red;

                border-radius: 50px 50px 0px 0px;

                transform: rotate(-45deg);

                transform-origin: 0 100%;

            }

            #heart:after {

                left: 0;

                transform: rotate(45deg);

                transform-origin: 100% 100%;

            }

        </style>

    </head>

    <body>

        <div id="heart">

        </div>

    </body>

</html>

结果：

二、边距折叠

2.1、概要

外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）
相邻：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系，如：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #div1{

                border: 3px solid blue;

                height: 200px;

                background: lightcoral;

            }

            #div2{

                height: 100px;

                background: lightgreen;

                margin-top: 20px;

            }

            #div3{

                height: 50px;

                width: 50%;

                background: lightblue;

                margin-top: 20px;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <div id="div2">

                <div id="div3">

                </div>

            </div>

        </div>

    </body>

</html>

结果：

因为div2与div3的外边距是相邻的（是父子关系的相邻），当div2 margin-top为20,div3的margin-top也为20,此时div2与div3的外边距会合并，就是折叠。

如果想让div3的margin-top生效，可以破坏相邻的限制，示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #div1{

                border: 3px solid blue;

                height: 200px;

                background: lightcoral;

            }

            #div2{

                height: 100px;

                background: lightgreen;

                margin-top: 20px;

                border: 1px solid green;

            }

            #div3{

                height: 50px;

                width: 50%;

                background: lightblue;

                margin-top: 20px;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <div id="div2">

                <div id="div3">

                </div>

            </div>

        </div>

    </body>

</html>

2.2、垂直方向外边距合并计算

2.2.1、参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>边距折叠</title>

    </head>

    <body>

        <div style="height:90px; margin-bottom:99px; width:90px; background-color: red;">X</div>

        <div style="height:90px; margin-top:100px; width:90px; background-color: blue;">Y</div>

    </body>

</html>

2.2.2、参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>边距折叠</title>

    </head>

    <body>

        <div style="height:90px; margin-bottom:-10px; width:90px; background-color: red;">X</div>

        <div style="height:90px; margin-top:-30px;width:70px; background-color: blue;">Y</div>

    </body>

</html>

2.2.3、参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>参与折叠的 margin 中有正值，有负值</title>

    </head>

    <body>

        <div style="height:90px; margin-bottom:-30px; width:90px; background-color: red;">X</div>

        <div style="height:90px; margin-top:30px;width:70px; background-color: blue;">Y</div>

    </body>

</html>

2.3、边距折叠简单应用

代码示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #div0 {

                width: 490px;

                height: 90px;

                border: 5px solid dodgerblue;

                margin: 0 auto;

                padding: 10px;

            }

            #div0 .subItem {

                float: left;

                width: 90px;

                height: 90px;

                background: orangered;

                margin-right: 10px;

            }

        </style>

    </head>

    <body>

        <div id="div0">

            <div style="margin-right: -10px;">

                <div class="subItem">1</div>

                <div class="subItem">2</div>

                <div class="subItem">3</div>

                <div class="subItem">4</div>

                <div class="subItem">5</div>

            </div>

        </div>

    </body>

</html>

效果：

三、内联与块标签

3.1、行内标签与块标签区别

html中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素，许多人也把行内称为内联，所以叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别，区别如下：

常用的块级有：div,p,h1~h6,ul,li,dl,dt,dd... 常用的行内有：span，font,b,u,i,strong,em,a,img,input，其中img和input为行内块元素。

更多块级与内联元素：

内联元素（行内元素）内联元素(inline element)

 a - 超链接

 abbr - 缩写

 acronym - 首字

 bdo - bidi override

 big - 大字体

 br - 换行

 cite - 引用

 code - 计算机代码(在引用源码的时候需要)

 dfn - 定义字段

 em - 强调

 i - 斜体

 img - 图片

 input - 输入框

 kbd - 定义键盘文本

 label - 表格标签

 q - 短引用

 samp - 定义范例计算机代码

 select - 项目选择

 small - 小字体文本

 span - 常用内联容器，定义文本内区块

 strike - 中划线

 strong - 粗体强调

 sub - 下标

 sup - 上标

 textarea - 多行文本输入框

 tt - 电传文本

 u - 下划线

 var - 定义变量

块元素(block element)

 address - 地址

 blockquote - 块引用

 center - 举中对齐块

 dir - 目录列表

 div - 常用块级容易，也是css layout的主要标签

 dl - 定义列表

 fieldset - form控制组

 form - 交互表单

 h1 - 大标题

 h2 - 副标题

 h3 - 3级标题

 h4 - 4级标题

 h5 - 5级标题

 h6 - 6级标题

 hr - 水平分隔线

 isindex - input prompt

 menu - 菜单列表

 noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容

 noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）

 ol - 排序表单

 p - 段落

 pre - 格式化文本

 table - 表格

 ul - 非排序列表

可变元素，可变元素为根据上下文语境决定该元素为块元素或者内联元素。

 applet - java applet

 button - 按钮

 del - 删除文本

 iframe - inline frame

 ins - 插入的文本

 map - 图片区块(map)

 object - object对象

 script - 客户端脚本

行内标签与块标签特性示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>块级标签与行内标签</title>

        <style type="text/css">

            #div1,

            #div2 {

                background: lightblue;

            }

            span {

                width: 100px;

                /*无效*/

                height: 20px;

                /*无效*/

                margin: 20px;

                /*水平方向有效，垂直方向无效*/

                padding: 20px;

                /*水平方向有效，垂直方向无效*/

            }

            #div3{

                width: 500px;

                border: 1px solid #ADD8E6;

                word-break: break-all;

            }

        </style>

    </head>

    <body>

        <h2>块级标签与行内标签</h2>

        <div id="div1">div1</div>

        <div id="div2">div2</div>

        <div id="div3">

            <span id="span1">span1</span>

            <span id="span2">span2</span>

            <span id="span3">span3</span>

            <span id="span4">spanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspan4</span>

        </div>

    </body>

</html>

使用display设置元素的显示方式

语法如下：

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

如果display设置为none，float及position属性定义将不生效；
如果position既不是static也不是relative或者float不是none或者元素是根元素，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；
IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：
全兼容的inline-block：

div {
display: inline-block;
*display: inline;
*zoom: 1;
}

3.2、隐藏

可以使用3种办法让元素隐藏：

a)、使用CSS的display:none，不会占有原来的位置

b)、使用CSS的visibility:hidden，会占有原来的位置

c)、使用HTML5中的新增属性hidden="hidden"，不会占有原来的位置

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>隐藏</title>

        <style type="text/css">

        div{

            width: 100px;

            height: 100px;

            border: 2px solid blue;

            margin: 10px;

            font-size: 30px;

        }

        #div1

        {

            display: none;

        }

        #div2{

            visibility: hidden;

        }

        </style>

    </head>

    <body>

        <div id="div0">div0</div>

        <div id="div1">div1</div>

        <div id="div2">div2</div>

        <div id="div3" hidden="hidden">div3</div>

        <div id="div4">div4</div>

    </body>

</html>

3.3、行内块标签

当元素的样式display为inline-block属性时就被设置成了行内块标签，同时拥有行内标签与块标签的特性，不再占整行；可以设置宽度，高度；padding与margin都有效。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>inline-block</title>

        <style type="text/css">

        div,span{

            width: 100px;

            height: 100px;

            border: 2px solid blue;

            font-size: 30px;

            display: inline-block;

            margin: 10px;

            padding: 10px;

        }

        </style>

    </head>

    <body>

        <div id="div0">div0</div><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div>

        <p>

            <span>span1</span><span>span2</span><span>span3</span>

        </p>

    </body>

</html>

3.4、菜单示例

使用display属性结合图片实现网页中的图片菜单：

代码示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>menu</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            #menu {

                width: 1004px;

                margin: 0 auto;

                margin: 10px;

                background: #348200;

                font-size: 0px;

                background: url(img/menubg.jpg) repeat-x;

                height: 49px;

                line-height: 49px;

            }

            #menu a {

                display: inline-block;

                width: 96px;

                height: 49px;

                line-height: 49px;

                background: url(img/menu.jpg) no-repeat;

                color: white;

                font-size: 13px;

                text-decoration: none;

                text-align: center;

                margin-right: 1px;

            }

            #menu a:hover {

                background-image: url(img/menunow.jpg);

            }

            #divLeft {

                width: 25px;

                height: 49px;

                line-height: 49px;

                background: url(img/menuleft.jpg) no-repeat;

                float: left;

            }

            #divRight {

                width: 25px;

                height: 49px;

                background: url(img/menuright.jpg) no-repeat;

                float: right;

            }

            #divTime {

                width: 260px;

                height: 49px;

                font-size: 14px;

                text-align: center;

                float: left;

            }

            #divMenu{

                float: right;

            }

        </style>

    </head>

    <body>

        <div id="menu">

            <div id="divLeft" class="iDiv"></div>

            <div id="divTime" class="iDiv">

                <div>

                时间：2016/11/24 下午2:49:56

                </div>

            </div>

            <div id="divRight" class="iDiv">

            </div>

            <div class="iDiv" id="divMenu">

                <a href='index.html'>网站首页</a>

                <a href='articleList/15.html'>公司简介</a>

                <a href='productList/11.html'>产品展示</a>

                <a href='articleList/17.html'>养殖技术</a>

                <a href='articleList/18.html'>娃娃鱼介绍</a>

                <a href='productList/18.html'>企业资质</a>

                <a href='productList/19.html'>友情链接</a>

            </div>

        </div>

    </body>

</html>

四、略

五、作业

1.1、请使用CSS3画出一个三角形、梯形、心形

1.2、请按要求完成如下面试题

1.3、完成一个小游戏，用户点击屏幕上不停飞动的心形，点击越多分数越高，分数越高时出现的心越多，也可以增加一些不应该点击的形状在其中，点击时扣分。（选做）

2.1、请完成娃娃鱼网站，要求兼容多种不同的浏览器（IE/Chrome/Firefox）,必须使用cssreset，素材在示例中。

作业代码：

作业示例：