盒子模型
3.盒子模型
本篇的主要内容如下：
- 盒子模型
- 外边距
- 内边距
- 盒子类型
- 内容溢出
- 盒子阴影（自学）
- 浮动布局
- 清除浮动
- 定位布局
- 行内、块状与行内块状元素（自学）
- 背景图片
- 渐变背景
- 圆角边框
盒子模型
现代 Web 前端的布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子与它们的摆放控制，会发现再复杂的页面也不过如此。
盒子是一个概念，也可以说是容器，可以在里面放置网页中需要显示的内容，文档中每一个元素都会产生一个盒子，盒子拥有很多属性，比如 width、height、padding、border 和 margin 等。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>
宽和高：width/height
这里讲的宽和高，指的是元素内容区域的宽和高，而不是盒子的实际宽度和高度。
元素的宽度指 width 的属性值，高度指 height 的属性值。属性值单位可以为长度单位或百分比，取值为正值。
边框：border
任何元素都可以定义边框，并都能够很好地显示出来。边框在网页布局中就是用来分割模块的。可以为边框指定样式、颜色或宽度。宽度属性值可以指定长度值，比如 2px 或 0.l em 或者使用 3 个关键字(thin、 medium (默认值)和thick)之一”。颜色可以省略，浏览器会根据默认值来解析。 当为元素各边框定义不同颜色时，边角会平分来划分颜色的分布。
边框有 border、border-style、border-width、border-color、border-top、border-right、border-bottom、border-left 八种常用属性，如下所示：
border 简写属性，用于把针对四个边的属性设置在一个声明中
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为四个边分别设置颜色
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中
border-left 简写属性，用于把左边框的所有属性设置到一个声明中
border-right 简写属性，用于把右边框的所有属性设置到一个声明中
border-top 简写属性，用于把上边框的所有属性设置到一个声明中border-style 值：
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .p1 { border: 8px solid #f00; }.p2 { border-top: green solid 5px; border-bottom: cornflowerblue solid 5px; border-left: greenyellow solid 5px; border-right: purple solid 5px; } .p3 { border-width: 14px; border-color: aqua; border-top-style: dotted; border-right-style: dashed; border-bottom-style: solid; border-left-style: double; } .p4 { border-color: aqua; border-width: 14px; border-top-style: groove; border-right-style: ridge; border-bottom-style: inset; border-left-style: outset; } </style>
</head>
<body>
<p class="p1">两个不同的边界样式</p>
<p class="p2">两个不同的边界样式</p>
<p class="p3">两个不同的边界样式</p>
<p class="p4">两个不同的边界样式</p>
</body>
</html>
外边距：margin
外边距相当于文档中的页边距，是元素边框边缘与相邻元素之间的距离，主要用来分割各种元素，设置元素之间的距离。
定义元素外边距使用 margin 属性，属性值单位可以为长度单位或百分比，取值可以为正值或负值。根据实际需要灵活地设置元素的 margin 值可以实现各种复杂的网页布局。同时外边距还有专门设置某一方向上外边距的属性：margin-top、magin-right、margin-bottom、margin-left 四种属性，关于外边距的属性说明如下所示。
margin 在一个声明中设置所有外边距属性
margin-bottom 设置元素的下外边距
margin-left 设置元素的左外边距
margin-right 设置元素的右外边距
margin-top 设置元素的上外边距下面的声明在 h1 元素的各个边上设置了1/4 英寸宽的空白。
h1{margin:0.25in;}下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素(px)。 这些值的顺序是从上外边距(top) 开始围着元素顺时针旋转计算的。
h1 {margin : 10px 0px 15px 5px;}另外，还可以为 margin 设置一个百分比数值。百分比数是相对于父元素的 width 计算的。下面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
p {margin : 10%;}简写规则：
在 Web 前端开发中，有时需要输入一些重复的值，如下所示:
p {margin: 0.5em 1em 0.5em 1em;}这种情况下可以使用值复制，不必重复地键入相同的数字。上面的规则与下面的规则是等价的。
p {margin: 0.5em lem;}规则如下
- 如果为外边距指定了 3 个值，则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。
- 如果给定了 2 个值，第 4 个值会从第 2 个值复制得到，第 3 个值(下外边距)会从第 1 个值(上外边
距)复制得到。 - 如果只给定一个值，那么其他 3 个外边距都由这个值(上外边距)复制得到。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin测试</title>
<style>
p {
background-color:yellow;
}
p.margin {
margin:100px 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>外边距合并：
外边距合并（叠加）是一个相对简单的概念。但是在对网页进行布局时，会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并， 如图所示。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和下外边距，或者上边距，或者下边距也会发生合并，如图所示。
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距 与下外边距就碰到了一起，它们会发生合并，如图所示。
如果空元素外边距遇到另一个元素的外边距，也会发生合并，如图所示。这就是一系列的
。
段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
解决上面描述的外边距合并问题行之有效的办法是合理的利用内边距与外边距组合使用，因为外边距和内边距不会合并。
注意：
1、只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
2、当为行内元素（节元素 span、a）定义外边距时，只能看到左右外边距对布局的影响，但是上下外边距犹如不存在一般，不会对周围元素产生影响。对于块级元素来说，外边距都能够很好地被解析，如 div 。可以用"display:block"属性来改变元素的表现形式以保证元素对外边距的支持。
练习：按照设计图完成编码
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
#box1 {
width: 500px;
height: 300px;
background: pink;
margin: 40px auto;
}#box2 { width: 450px; height: 270px; background: turquoise; margin: 0 auto; } #box3 { width: 400px; height: 240px; background: burlywood; margin: 0 auto; } #box4 { width: 350px; height: 210px; margin: 0 auto; background: chartreuse; } #box5 { width: 300px; height: 180px; margin: 0 auto; background: cyan; } #box6 { width: 250px; height: 150px; margin: 0 auto; background: cornflowerblue; text-align: center; line-height: 150px; color: white; font-size: 40px; } </style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5">
<div id="box6">爱我中华</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
内边距：padding
内边距就是元素包含的内容与元素边框内边沿之间的距离。定义内边距使用 padding 属性，属性值单位可以为长度单位或百分比，取值可以为正值，但不允许使用负数值。内边距有 padding、padding-top、padding-right、padding-bottom、padding-left 五种属性，如下所示：
padding 在一个声明中设置所有内边距属性
padding-bottom 设置元素的下内边距
padding-left 设置元素的左内边距
padding-right 设置元素的右内边距
padding-top 设置元素的上内边距如果希望所有 h1 元素的各边都有 10 像素的内边距，代码如下所示:
h1 {padding; 10px;}还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。
h1 {padding: 10px 0.25em 2px 20%;}也可通过使用单边内边距属性，分别设置上、右、下、左内边距，实现的效果与上面的简写规则是完全相同的。
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2px;
padding-left: 20%;
}注意：
1.百分数值是相对于其父元素的 width 计算的，
这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
2.上下内边距与左右内边距参照一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
内边距与外边距差异
- 当元素没有定义边框时，可以把内边距当作外边距来使用，用来调节元素与其他元素之间的距离。由于外边距相邻时会出现重叠现象，而且比较复杂，使用内边距来调节元素之间的距离往往不用考虑边距重叠的问题。
- 当为元素定义背景时，对于外边距区域来说，背景图像是不显示的，它永远表现为透明状态：而内边距区域却可以显示背景。
- 行内元素的内边距能够影响元素的高度，而外边距不存在这样的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}h1 { margin-top: 20px; padding: 10px; width: 500px; height: 200px; background: aqua; } span { padding: 20px; background: gray; } </style>
</head>
<body>
<h1>H1</h1>
<span>span</span>
</body>
</html>
练习：按照设计图完成编码
参考答案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子和边练习</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}.dotted { border: 2px dotted #000000; width: 200px; height: 200px; } .blue-solid { border: 2px solid #0000ff; width: 170px; height: 170px; margin: 13px; } .pink-box { background-color: #ffa0df; width: 104px; height: 104px; padding: 23px; margin: 10px; } .double { border: 2px double #ffffff; width: 100px; height: 100px; } .box-green { display: block; background-color: #adff2f; border: 2px solid #ffff00; width: 50px; height: 50px; margin: 23px; } </style></head>
<body>
<div class="dotted">
<div class="blue-solid">
<div class="pink-box">
<p class="double">
<span class="box-green"></span>
</p>
</div>
</div>
</div>
</body>
</html>
盒子类型：display
CSS 提供了 display 属性来控制盒子的类型，盒子的基本类型如下所示。
none 此元素不会被显示
block 此元素将显示为块级元素，并且前后会带有换行符
inline 默认。此元素会被显示为行内元素，元素前后没有换行符
inline-block 行内块元素
list-item 此元素会作为列表显示
table 此元素会作为块级表格来显示(类似<table>), 表格前后带有换行符
inline-table 此元素会作为内联表格来显示(类似<table>), 表格前后没有换行符
table-row-group 此元素会作为一一个或多个行的分组来显示(类似<tbody>)
table- column-group 此元素会作为一个或多个列的分组来显示(类似<colgroup> )
table-column 此元素会作为一个单元格列显示(类似<col>)
table-cell 此元素会作为一个表格单元格显示( 类似<d>和<th>)
table-caption 此元素会作为一个表格标题显示(类似<caption> )
inherit 规定应该从父元素继承display 属性的值
run-in 分配对象为块对象或基于内容之上的内联对象1.none
display 属性可指定为 none 值，用于设置目标对象隐藏，一旦该对象隐藏，其占用的页面空间也会释放。
2.block
block 类型的盒子会占据一行，允许通过 CSS 设置高度和宽度。一些元素默认就是 block 类型，
比如 div、p 等。使用该属性也可以将行内元素(节元素）如： span 标签转换为块元素。
3.inline
inline 类型的盒子不会占据一行(默认允许在一行放置多个元素)， 即使用 CSS 设置宽度和高度也不会起作用。一些元素默认就是 inline 类型，比如 span、a。
4.inline-block
通过为 display 属性设置 inline-block，即可实现这种盒子类型，它是 inline 和 block 的综合体，
inline-block 类型既不会占据一行，也支持 width 和 height 指定宽度和高度外边距和内边距，同时也不会有边距合并问题。
通过使用 inline-block 类型可以非常方便地实现多个 div 元素的并列显示。
注意：与浮动不同的是 div 之间的空格会占用位置如果想解决这个问题，需要在父类上添加样式 display: table;。
5.list-item（不常用）
list-item可以将目标元素转换为类似 ul 的列表元素，也可以同时在元素前添加列表标志。
6.inline-table（不常用）
在默认情况下，table 元素属于 block 类型，也就是说，该元素默认占据一行，它的左边不允许出现其他内容，它的右边也不允许出现其他内容。该元素可通过 width、height 设置宽度和高度。
CSS 为 table 元素提供了一个 inline-table 类型，它允许设置表格的 width、height 值，而且允许表格的左边、右边出现其他内容。
7.run-in（不常用）
run-in 类型有点相似于 inline 类型，run-in 类型的元素希望显示在它后面的元素内部：如果 run-in
类型的元素后面紧跟一个 block 类型的元素，那么 run-in 类型的元素将被放入后面的元素中显示。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1 {
display: none;
}span { display: block; width: 200px; height: 100px; background: gray; } .inline { display: inline; } .content { display: table; } .content .inline-block { display: inline-block; width: 100px; background: peru; } </style>
</head>
<body>
<h1>不显示的H1</h1>
<span>span</span>
<div class="inline">测试inline</div>
<div class="content">
<div class="inline-block">1</div>
<div class="inline-block">2</div>
<div class="inline-block">3</div>
</div>
</body>
</html>
练习：按照设计图完成编码
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子和边练习</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}.content { margin: 10px auto; border: 2px dotted #000000; width: 600px; height: 400px; display: table; } .card { background: #907e35; display: inline-block; width: 180px; height: 180px; margin: 10px; text-align: center; color: white; line-height: 180px; font-size: 100px; } </style></head>
<body>
<div class="content">
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
<div class="card">D</div>
<div class="card">E</div>
<div class="card">F</div>
</div>
</body>
</html>
内容溢出
在样式中指定了盒子的宽度和高度，就可能出现内容在盒子中容纳不下的情况，这时可以使用 overflow 属性来指定如何显示盒子中容纳不下的内容。同时，与 ovrflow 属性相关的还有 overflow-x
属性、overflow-y 属性及 text-overflow 属性。
1.overflow
使用 overflow 属性来指定对于盒子中容纳不下的内容的显示方法。overflow 有 visible、hidden、scroll、auto、inherit 五种属性值，如下所示：
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容不会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承overflow 属性的值2.overflow-x 和 overflow-y
如果使用 overlow-x 属性或 overflow-y 属性，可以单独指定在水平方向上或垂直方向上内容超出盒子的容纳范围时的显示方法，使用方法与 overflow 属性的使用方法相似。
overflow-x 和 overflow-y 有 visible、hidden、scroll、auto、no-display、no-content 六种属性值，如下所示：
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.overflowTest1 {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
margin-top: 20px;
}.overflowTest2 { margin-top: 20px; background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: hidden; } .overflowTest3 { margin-top: 20px; background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: scroll; } .overflowTest4 { margin-top: 20px; background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow-y: scroll; } </style>
</head>
<body>
<div class="overflowTest1">
<p>这里的文本内容会溢出元素框。</p>
</div>
<div class="overflowTest2">
<p>这里的文本内容会溢出元素框。</p>
</div>
<div class="overflowTest3">
<p>这里的文本内容会溢出元素框。</p>
</div>
<div class="overflowTest4">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>
</body>
</html>
盒子阴影（自学）
在 CSS3 中，可以使用 box-shadow 属性让盒子在显示时产生阴影效果。
box-shadow 属性
box-shadow 属性可以为所有盒模型的元素整体增加阴影，是一个复合属性。该属性值如下所示。
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的尺寸
color 可选。阴影的颜色。请参阅CSS颜色值
inset 可选。将外部阴影(outest) 改为内部阴影案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 300px;
height: 50px;
border: 1px solid black;
margin: 30px;
}.box1 { box-shadow: -10px -8px 6px #444; } .box2 { box-shadow: 10px 8px #444; /*右下阴影，不指定模糊程度*/ } .box3 { box-shadow: 10px 8px 20px #444; /*右下阴影，增大模糊程度*/ } .box4 { box-shadow: 10px 8px 10px -10px red; /*右下阴影，缩小阴影区域*/ } .box5 { box-shadow: 0 0 10px 7px red inset; /*右下阴影，缩小阴影区域*/ } </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
浮动布局
网页的布局主要通过 float 属性来实现，float 属性定义元素在哪个方向浮动，属性值有以下四种:
left 定义向左浮动。
right 定义向右浮动。
none 为 float 属性的默认值，表示元素不浮动，并会显示其在页面中出现的位置。
inherit 规定应该从父元素继承 float 属性值。浮动元素特性
当一个元素被设置为浮动元素后，元素本身的属性也会发生一些改变，具体如下所示。
①空间的改变。当网页中一个元素被定义为浮动显示时，该元素就会自动收缩自身体积为最小状态。如果该元素被定义了高度或宽度，则该元素将以设置的高度与宽度进行显示；如果浮动元素包含了其他对象，则元素体积会自动收缩到仅能容纳所包含的对象大小；如果没有设置大小或没有任何包含对象，浮动元素将会缩小为一个点，甚至不可见。
②位置的改变。当网页中的一个元素浮动显示时，由于所占空间大小的变化，会使得其自动地向左或向右浮动直到碰到其父级元素的边框或内边距，或者碰到相邻浮动元素的外边距或边框时才会停下来。
③不能撑起父元素。当元素浮动之后，它原来的位置就会被下面的对象上移填充掉。它自身的宽高再不能撑起父元素。这是它和 inner-block 的主要区别。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.content {
background: gray;
}.content .float-left, .float-right { width: 100px; height: 50px; background: aqua; text-align: center; line-height: 50px; font-size: 30px; } .float-left { float: left; } .float-right { float: right; } </style>
</head>
<body>
<div class="content">
<div class="float-left">1</div>
<div class="float-left">2</div>
<div class="float-left">3</div>
<div class="float-right">4</div>
</div>
</body>
</html>
练习：
1.使用浮动按照设计图完成如下编码。
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>章节练习</title>
<style>
* {
margin: 0;
padding: 0;
}body { background-color: black; color: white; text-align: center; } h2 { padding: 20px; } .content { width: 400px; margin: 10px auto; border: white solid 1px; } .inputBox { height: 50px; font-size: 30px; line-height: 50px; text-align: right; padding: 10px 10px; } .buttonGroup button { width: 90px; height: 90px; background-color: white; border: none; float: left; margin: 5px; line-height: 90px; font-size: 30px; border-radius: 4px; } .cleanFloat { clear: left; padding: 10px; } </style></head>
<body>
<div class="content">
<h2>超级计算器</h2>
<hr>
<p class="inputBox" id="inputBox">12(52+3)</p>
<hr>
<div class="buttonGroup">
<button>C</button>
<button>←</button>
<button>(</button>
<button>)</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button></button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>-</button>
<button>0</button>
<button>.</button>
<button>=</button>
<button>+</button>
</div>
<div class="cleanFloat">
中国制造@
</div>
</div>
</body>
</html>
清除浮动
浮动布局打破了原有网页元素的显示状态，会产生一些布局问题。CSS 为了解决这个问题，又定义了 clear 属性，用来解决浮动布局中页面杂乱无章的现象。
clear 属性规定元素的哪一侧不允许存在其他浮动元素，属性值有五种情况。
left、right、both: both 分别规定在左侧不允许浮动元素、在右侧不允许浮动元素 和在左右两侧均不允许浮动元素。
none 为 clear 元素的默认值，允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。元素浮动以后，其所在的位置会被下方不浮动的元素填充掉，而有些时候这样的填充会破坏页面布局，clear 元素可以解决这个问题。在不需要浮动元素中添加 clear 属性值，会使不浮动元素显示在浮动元素的下边距边界之下。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style>
div {
border: 1px solid #F00;
height: 50px;
}.left, .middle, .right { float: left; width: 33%; } .left { height: 100px; } .footer { clear: left; } </style>
</head>
<body>
<div >头部信息</div>
<div class="left">左栏信息</div>
<div class="middle">中栏信息</div>
<div class="right">右栏信息</div>
<div class="footer">脚部信息</div>
<div>test</div>
</body>
</html>
定位布局
CSS 定义了 position 属性来控制网页元素的定位显示，它与 float 属性协同作用，实现了网页布局的精确性和灵活性的高度统一。float 和 position 是 CSS 布局中最基本、最重要的两个技术概念， 是最为基础的布局属性。
(1)定位坐标值
为了灵活地定位页面元素，CSS 定义了四个坐标属性：top、right、bottom 和 left。通过这些属性的联合使用，可包含块的四个内顶角来定位元素在页面中的位置。
top 属性表示定位元素项边外壁到包含块元素顶部内壁的距离。
right 属性表示定位元素右边外壁到包含块元素右侧内壁的距离。
left 属性表示定位元素左边外壁到包含块元素左侧内壁的距离。
bottom 属性表示定位元素底边外壁到包含块元素底部内壁的距离。
(2) position
position 属性用于确定元素的位置，该属性可将图片放置到任何位置，也可以使导航始终显示于页面最上方。CSS 的定位核心正是基于这个属性实现的。属性值有五种情况。
①static
static 为 position 的默认属性值，没有定位，元素出现在正常流中(忽略 top、bottom、left、right 或者 z-index 声明)。
任何元素在默认的状态下都会以静态定位来确定自己的位置，所以当没有定义 position 时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态位置下，开发人员无法通过坐标值(top、bottom、left 和right)来改变它的位置。
②absolute
absolute 可用于生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 left、top、right、bottom 属性进行设置。 当 position 属性取值为 absolute 时，程序就会把元素从文档流中拖出来，根据某个参照物坐标来确定显示位置。绝对定位是网页精准定位的基本方法。
③fixed
fixed 可用于生成固定定位的元素，即相对于浏览器窗口进行定位。元素的位置通过 top、right、bottom、left 属性进行定位。 固定定位是绝对定位的一种特殊形式， 它是以浏览器作为参照物来定义网页元素的。如果定义某个元素固定显示而不受文档流的影响，也不受包含块的位置影响，它始终以浏览器窗口来定位自已的显示位置不管浏览器的滚动条如何滚动，也不管浏览器窗口大小如何变化，该元素都会显示在浏览器窗口内。
④relative
relative 可用于生成相对定位的元素，相对于其正常位置进行定位。例如，"left:20px" 会向元素的左侧位置添加 20 像素。 相对定位是一种折中的定位方法， 是在静态定位和绝对定位之间取的一个平衡点。所谓相对定位就是使被应用元素不脱离文档流，却能通过坐标值以原始位置为参照物进行偏移。 虽然，相对定位元素偏移了原始位置，但是它的原始位置所占据的空间仍被保留，并没有被其他元素挤占。认识并理解这一属性特别重要，这是因为在开发中经常需要校正元素的显示位置，但并不希望因为这些校正元素的修改而影响到其他元素的显示位置。
⑤inherit
inherit 用于从父元素继承 position 属性的值。
(3)定位层叠
Css 可通过 z-index 属性来排列不同定位元素之间的层叠顺序。该属性可以设置为任意的整数值， 数值越大，所排列的顺序就越靠上(前)。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
body {
height: 1000px;
}* { margin: 0; padding: 0; } div { width: 100px; height: 100px; background: gray; font-size: 50px; line-height: 100px; text-align: center; color: white; } .box1 { position: static; top: 10px; } .box2 { position: absolute; top: 0; right: 0; z-index: 1000; } .box7 { position: absolute; top: 0; right: 0; } .box4 { position: fixed; bottom: 0; right: 0; } .box5 { position: relative; left: 150px; } </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
</body>
</html>
练习：（默写 30 分钟）
1.按照如下设计图完成样式排版。
2.使用两种方式按照设计图完成如下编码：素材下载
第一题参考代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Sina</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}body { font-family: "微软雅黑"; font-size: 14px; color: black; } .container { width: 600px; height: 200px; margin-top: 10px; margin-left: 10px; } .web-title { font-size: 16px; text-align: left; text-decoration: underline; color: blue; } .red { color: red; } .underline { text-decoration: underline red; } .web-content { margin-top: 15px; } .linked { margin-top: 15px; color: green; } .grey { color: grey; } </style>
</head>
<body>
<div>
<p><font>新浪</font>博客首页--<font>新浪网</font></p>
<p><font>新浪公司</font>是一家服务于中国及全球华人社群的网络媒体公司，
成立于1998年12月，由王志东创立，现任董事长曹国伟，服务大中华地区与海外华人，新浪拥有多家地区性网站。
新浪通过门户网站新浪网、新浪移动和社交媒体微博，帮助广大用户通过电脑和移动设备获得专业媒体和
用户自生成的多媒体内容（UGC）并与友人进行兴趣分享。</p>
<p>blog.sina.com.cn/2014-07-07 <font>-百度快照-评价</font></p>
</div>
</body>
</html>
第二题参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}.section { background: #081b30; width: 800px; } .container { padding: 30px 50px; width: 700px; display: table; } .col-lg-4 { width: 155px; overflow: hidden; display: inline-block; padding: 10px 10px; } .sport_product { padding-top: 5px; width: 155px; height: 190px; background: #fff; text-indent: 10px; } .sport_product img { display: block; width: 130px; margin: 10px auto; } .sport_product h3 { color: #e7087e; text-align: right; width: 140px; } </style>
</head>
<body>
<div>
<div>
<div>
<div>
<img src="img/1.jpg">
<h3> ☆<strong>50</strong></h3>
<h4>风景1</h4>
</div>
</div>
<div>
<div>
<img src="img/2.jpg">
<h3> ☆<strong>50</strong></h3>
<h4>风景2</h4>
</div>
</div>
<div>
<div>
<img src="img/3.jpg">
<h3> ☆<strong>50</strong></h3>
<h4>风景3</h4>
</div>
</div>
<div>
<div>
<img src="img/4.jpg">
<h3> ☆<strong>50</strong></h3>
<h4>风景4</h4>
</div>
</div>
<div>
<div>
<img src="img/5.jpg">
<h3> ☆<strong>50</strong></h3>
<h4>风景5</h4>
</div>
</div>
<div>
<div>
<img src="img/1.jpg">
<h3> ☆<strong>50</strong></h3>
<h4>风景6</h4>
</div>
</div>
<div>
<div>
<img src="img/5.jpg">
<h3> ☆<strong>50</strong></h3>
<h4>风景7</h4>
</div>
</div>
<div>
<div>
<img src="img/1.jpg">
<h3> ☆<strong>50</strong></h3>
<h4>风景8</h4>
</div>
</div>
</div>
</div>
</body>
</html>
行内、块状与行内块状元素(自学)
HTML 可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用 display 属性能够将三者任意转换：
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
行内元素
行内元素最常使用的就是 span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
行内元素特征：
(1)设置宽高无效
(2)对 margin 仅设置左右方向有效，上下无效；padding 设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
块状元素
块状元素代表性的就是 div，其他如 p、nav、aside、header、footer、section、article、ul-li、address 等等，都可以用 div 来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
块状元素特征：
(1)能够识别宽高
(2)margin 和 padding 的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征：
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
背景图片：background-image
属性可以为元素指定背景图像。如果图像包括透明区域，下面的内容将会显示出来。为防止这一点， 网页设计者通常将 background-image 属性和 background-color 属性一起使用。背景颜色显示在背景图像下面，提供了不透明的背景。background-image 属性需要一个 URL 来选择作为背景的图像。 用作背景图像的图片类型可以为浏览器支持的任何格式，通常为 GIF、JPG 和 PNG 格式。
b{background-image:url(img.png);background-color:#fff;}
body{ background-image:url(img.gif);}
注意：透明背景的图片一般常见的有两种格式分别是 png 或者 gif 格式，但是 gif 格式更多的不是体现在透明方面，一般主要体现在动画上。
背景重复：background-repeat
属性决定当背景图像比元素的空间小时将如何排列。该属性的默认值为 repeat，这将让图像在水平和垂直两个方向上平铺。当该属性取值为 repeat-x 时，背景图像将仅仅在水平方向上平铺；当该属性取值为 repeat-y 时，背景图像将仅仅在垂直方向上平铺；当该属性取值为 no-repeat 时，背景图像将不会平铺。
p{background-image:url(img.gif);background-repeat:repeat-x;}
.titleup{background-image:url(img.gif);background-repeat:repeat-y;}
body{background-image:ur(img.gif);background-repeat:no-repeat;}背景定位：background-position
指定背景图像在元素的画布空间中的定位方式，有三种方法指定位置， 具体内容如下所示:
为图像的左上角指定一个绝对距离，通常以像素为单位。
可以使用水平和垂直方向的百分比来指定位置。
可以使用关键字来描述水平和垂直方向的位置。水平方向上的关键字为 left、center 和 right，垂直方向上的关键字为 top、center 和 bottom。在使用关键字时，未指明的方向上默认的取值为 center。
具体语法如下：
p{background-image:url(img.gif);background-position: l0px l0px;}
p{background-image:url(img.gif); background-position:20% 20%;}
body{background-image:url(img.gif);background-position:center center;}注意：
1.如果仅仅设置了一个关键字，那么第二个关键字将取默认值 center。因此，在上面的例子中，关键字 center 只需用一次即可。
2.background 属性也可用于全面设置背景样式。该属性是一个复合属性，可用于同时设置背景色、背景图片、背景重复模式等。为更好地控制背景，一般不建议通过该属性来控制背景。
背景大小：background-size
在 CSS3 中，可以使用 background-size 属性来指定背景图像的尺寸。使用 background-size 属性指定背景图像尺寸的方法如下
background-size:40px 20px;其中，40px 为背景图像的宽度，20px 为背景图像的高度，中间用半角空格进行分隔。如果要维持图像比例的话，可以在设定图像宽度与高度的同时，将另一个参数设定为 auto 。
渐变背景
1.线性渐变
linear-gradient() 函数的属性规定了创建渐变效果的开始位置与颜色。
以下示例从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色
background:linear-gradient(red, yellow, blue);以下示例演示了从右往左左侧开始的线性渐变，从红色开始，转为黄色：
background:linear-gradient(to left,#0f0 0%,#f00 50%,#00f 90%);以下实例演示了从左上角到右下角的线性渐变：
background:linear-gradient(to bottom right, red , yellow);以下实例演示了线性渐变指定一个角度：
background:linear-gradient(180deg, red, yellow);2.径向渐变
为了创建一个径向渐变，必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
颜色结点均匀分布的径向渐变：
background:radial-gradient(red, yellow, green);形状为圆形的径向渐变：
background:radial-gradient(circle, red, yellow, green);圆角边框：border-radius
使用 border-radius 属性指定盒子的圆角。
border-radius: 3px;在 border-radius 属性中，可以指定两个半径，具体语法如下所示:
div{border-radius: 40px 20px;}针对这种情况，各种浏览器的处理方式并不一致。在 Chrome 浏览器和 Safari 浏览器中，会绘制出一个椭圆形边框，第一个半径为椭圆的水平方向半径，第二个半径为椭圆的垂直方向半径。在 Firefox 浏览器与 Opera 浏览器中，将第一个半径作为边框左上角与右下角的圆半径来绘制，将第二个半径作为边框左下角与右上角的圆半径来绘制。
练习：
1.按照设计图完成编码：素材下载
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
body {
background: url("img/timg.jpg");
}
.form {
width: 400px;
padding: 15px;
margin: 100px auto;
background: rgba(233, 233, 233, 0.3);
border-radius: 6px;
text-align: center;
color: #222;
}
.form-group {
display: table;
margin-top: 20px;
}
.col-xs-2 {
color: white;
display: inline-block;
width: 100px;
text-align: right;
font-size: 20px;
}
.col-xs-10 {
width: 300px;
display: inline-block;
text-align: left;
text-indent: 20px;
}
.form-control {
width: 200px;
height: 40px;
font-size: 20px;
border: none;
text-indent: 10px;
border-radius: 5px;
}
.col-xs-12 {
width: 400px;
text-align: center;
}
.col-xs-12 p {
color: #a54f4f;
text-align: left;
}
.btn {
width: 300px;
background: #4b67c2;
color: #fff;
border: none;
height: 50px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<form action="login" method="post">
<h2>用户管理系统</h2>
<br>
<hr>
<div>
<label for="inputEmail3">账号</label>
<div>
<input type="text" id="inputEmail3" name="loginName" placeholder="登录名"
required>
</div>
</div>
<div>
<label for="inputPassword3">密码</label>
<div>
<input type="password" id="inputPassword3" name="loginPassword" placeholder="密码"
required>
</div>
</div>
<br>
<hr>
<div>
<div>
<p>账号密码错误</p>
<button type="submit">登录</button>
</div>
</div>
</form>
</body>
</html>
浙公网安备 33010602011771号