5.1 盒模型定义
Web页面上大部分的元素（尤其是块级元素）都可以看作是一个盒子，盒子的结构可以看作一个矩形框，边框（border）、外边距（margin）、内边距（padding）、元素内容（content）
5.2 CSS 元素的高度和宽度
5.3 边距设置和边框设置
5.3.1外边距设置
1.上外边距设置margin-top：length | percent | auto
2.右外边距设置margin-right：length | percent | auto
3.下外边距设置margin -bottom：length | percent | auto
4.左外边距设置margin-left：length | percent | auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#big{
width :450px;
height:200px;
margin:0;
background-color:#FF0 ;
}
#small1,#small2,#small3,#small4{
width:200px;height :50px;
text-align : center;
background-color : #0ff;
}
#small1{
margin-left :20px;margin-bottom :30px ;
}
#small2{
margin-right :20px;margin-top :10px;float: right ;
}
#small3{
margin-bottom : 5px ;
}
#small4{
margin-left :10px ;
margin-top :15px;
}
</style>
</head>
<body>
<div id="big" >
<div id="small1">A:左外边距 20 像素,下外边距 30 像素</div>
<div id="small2">B:右外边距 20 像素,上外边距 10 像素,右浮动</div>
<div id="small3">C:下外边距5 像素</div>
<div id="small4">D;左外边距 10 像素,上外边距 15 像素</div>
</body>
</html>
5.外边距设置 margin：length | percent | auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例5.4</title>
<style type="text/css">
div {
border: solid #0000FF 1px;
width: auto;
margin: 5px;
float:left;
}
.margin1 {
background-color: #9F6;
border: none; /*无边框*/
width: 200px;
height: 80px;
margin: 0px 15px 5px 30px;
}
.margin2 {
background-color: yellow;
border: none;
width: 200px;
height: 80px;
margin: 5px 30px 15px;
}
.margin3 {
background-color: lightgreen;
border: none;
width: 200px;
height: 80px;
margin: 10px 30px;
}
.margin4 {
background-color: #FC0;
border: none;
width: 200px;
height: 80px;
margin: 15px;
}
</style>
</head>
<body>
<div>
<div class="margin1">上、右、下、左外边距分别为: 0px、15px、5px、30px</div>
</div>
<div>
<div class="margin2">上外边距为：5px，下外边距为：15px，左右外边距为：30px</div>
</div>
<div>
<div class="margin3">上、下外边距为10px，左、右外边距为：30px</div>
</div>
<div>
<div class="margin4">上、下、左、右外边距均为：15px</div>
</div>
</body>
</html>
5.3.2 外边距的合并
1.行级元素外边距合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例5.5</title>
<style type="text/css">
body {
margin: 50px;
}
.hb1 {
background-color: yellow;
margin-right: 20px;
padding: 30px;
}
.hb2 {
background-color: lightpink;
margin-left: 30px;
padding: 30px;
}
</style>
</head>
<body>
<span class="hb1">黄色 span</span><span class="hb2">粉红色 span</span>
</body>
</html>
2.块级元素外边距合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例5.6</title>
<style type="text/css">
* {
margin: 50px;
}
.div1 {
background-color: yellow;
margin-bottom: 30px;
padding: 30px;
}
.div2 {
background-color: lightpink;
margin-top: 30px;
padding: 30px;
}
</style>
</head>
<body>
<div class="div1">黄色 div</div>
<div class="div2">粉红色 div</div>
</body>
</html>
5.3.3 内边距设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例5.7</title>
<style type="text/css">
span {
background-color: #FFFF99;
}
div {
border: solid #000000 1px;
width: auto;
height: auto;
margin: 15px;
float: left;
}
.padding1 {
padding-top: 30px;
padding-left: 15px;
}
.padding2 {
padding-bottom: 30px;
padding-right: 30px;
}
.padding3 {
padding: 5px 30px;
}
.padding4 {
padding: 20px;
}
</style>
</head>
<body>
<div class="padding1">
<span>文字元素的上内边距为30px,左内边距为15px</span>
</div>
<div class="padding2">
<span>文字元素的下内边距为30px,右内边距为30px</span>
</div>
<div class="padding3">
<span>文字元素的上、下内边距为5px,左、右内边距为30px</span>
</div>
<div class="padding4">
<span>文字元素的上、右、下、左内边距均为20px</span>
</div>
</body>
</html>
5.3.4 边框设置
1.上边框 border-top:border-style | border-width | border-color
2.右边框border-right:border-style | border-width | border-color
3.下边框border-bottom:border-style | border-width | border-color
4.左边框border-left:border-style | border-width | border-color
5.边框样式
属性值 说明
initial 默认值， 默认没有样式
none 定义无边框
hidden 与 none 相同， 但应用于表时， hidden 用于解决边框冲突
solid 定义实线
dashed 定义虚线
dotted 定义点线
double 定义双线
inherit 定义继承父元素边框样式
groove 定义3D 凹型线边框。其效果取决于 border- color的值
ridge 定义3D 凸型线边框。其效果取决于 border- color的值
inset 定义3D 嵌入式边框。其效果取决于 border- color的值
outset 定义3D 嵌出式边框。其效果取决于 border- color的值
6.边框宽度
initial: 默认值，中等边框
inherit:定义父元素边框宽度
thin:细边框
medium:中等边框
thick：粗边框
7.边框颜色以及新增边框属性
！！！
1.圆角边框 border-radius
2.阴影边框 box-shadow
3.图片绘制边框 border-image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img{
width: 50px;
height: 40px;
}
*{
margin: 0px;
padding: 0px;
}
div{
width: 60px;
height: 50px;
margin: 20px;
border-top: 10px #ff0000 solid;
border-bottom: thin #00ff00 dashed;
border-left: medium #0000FF dotted;
border-right: thick #000000 double;
border-radius: 10px;
<!--阴影 右偏移量 下偏移量 模糊距离 颜色-->
border-shadow: 10px 20px 50px #ff00ff;
border-image: url(img/tp.jpg) 5 10 round;
/* display: inline; */
}
</style>
</head>
<body>
<div><img src="img/bdyx.png"></div>
<div><img src="img/hshwk.png"/></div>
</body>
</html>
上面的代码是用图片来绘制 边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img{
width: 50px;
height: 40px;
}
*{
margin: 0px;
padding: 0px;
}
div{
width: 60px;
height: 50px;
margin: 20px;
border-top: 10px #ff0000 solid;
border-bottom: thin #00ff00 dashed;
border-left: medium #0000FF dotted;
border-right: thick #000000 double;
border-radius: 10px;
<!--阴影 右偏移量 下偏移量 模糊距离 颜色-->
border-shadow: 10px 20px 50px #ff00ff;
/*border-image: url(img/tp.jpg) 5 10 round; */
/* display: inline; */
}
</style>
</head>
<body>
<div><img src="img/bdyx.png"></div>
<div><img src="img/hshwk.png"/></div>
</body>
</html>
5.4 css 元素的定位
1.static定位
static定位是HTML中默认的定位方法，不受top、right、bottom、left影响
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
border: 2px solid red;
width: 300px;
height:250px;
/*position: relative;*/
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
}
.son2{
border: 2px double red;
width: 200px;
height: 25px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">父盒子
<div class="son1">子盒子1：无定位的盒子
</div>
<div class="son2">子盒子2：有定位的盒子</div>
</div>
</body>
</html>
这个就是正常情况下默认的定位，它的实现如下图
2.relative 定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
border: 2px solid red;
width: 300px;
height:250px;
/*position: relative;*/
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
position: relative;
bottom: 10px;
right: 30px;
}
.son2{
border: 2px double red;
width: 200px;
height: 25px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">父盒子
<div class="son1">子盒子1：无定位的盒子
</div>
<div class="son2">子盒子2：有定位的盒子</div>
</div>
</body>
</html>它的实现如下图所示
3.absolute定位
3.1相对浏览器绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
border: 2px solid red;
width: 300px;
height:250px;
/*position: relative;*/
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
position: absolute;
top: 10px;
right: 30px;
}
.son2{
border: 2px double red;
width: 200px;
height: 25px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">父盒子
<div class="son1">子盒子1：无定位的盒子
</div>
<div class="son2">子盒子2：有定位的盒子</div>
</div>
</body>
</html>
3.2 相对父盒子绝对定位
上面是对于浏览器来说的绝对定位，下面则是相对于父盒子来说的绝对定位，对于css中的father和son1都需要做出一点改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
border: 2px solid red;
width: 300px;
height:250px;
position: relative;
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
position: absolute;
top: 10px;
right: 30px;
}
.son2{
border: 2px double red;
width: 200px;
height: 25px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">父盒子
<div class="son1">子盒子1：无定位的盒子
</div>
<div class="son2">子盒子2：有定位的盒子</div>
</div>
</body>
</html>
4.fixed定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
border: 2px solid red;
width: 300px;
height:250px;
/*position: relative;*/
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
position: fixed;
top: 10px;
right: 30px;
}
.son2{
border: 2px double red;
width: 200px;
height: 25px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">父盒子
<div class="son1">子盒子1：无定位的盒子
</div>
<div class="son2">子盒子2：有定位的盒子</div>
</div>
</body>
</html>
5.5 css元素的浮动
在CSS的盒模型布局中，除了使用定位避免按照标准流的方式进行排版的限制性问题，还可以使用浮动来避免，使用浮动(float)和清除（clear）属性设置，可以解决很多页面错位现象。
初始阶段
5.5.1 浮动的添加
for instance:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>right 浮动</title>
<style type="text/css">
.father{
background-color :#FFCCFF ;
border :2px solid red ;
padding :5px ;
}
.father div{
width : 100px;
height :20px ;
padding : 10px ;
margin : 10px ;
border :2px dashed blue ;
background-color :#CCFFFF;
}
.father p{
border: 2px dotted green;
background-color: #ffff99;
}
</style>
</head>
<body>
<div class="father">
<h2>父盒子</h2>
<div style="float:right;">右浮动盒子 1</div>
<div >标准流盒子 2</div>
<div >标准流盒子 3</div>
<p>css 中,有一个 float 属性,默认为 none,也就是标准流通常的情况。若果将 float 属性的值设置为left 或 right,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度确定。</p>
</div>
</body>
</html>
那我若是改为左浮动呢？ 那么只需要把子盒子中float的属性值改为left即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>right 浮动</title>
<style type="text/css">
.father{
background-color :#FFCCFF ;
border :2px solid red ;
padding :5px ;
}
.father div{
width : 100px;
height :20px ;
padding : 10px ;
margin : 10px ;
border :2px dashed blue ;
background-color :#CCFFFF;
}
.father p{
border: 2px dotted green;
background-color: #ffff99;
}
</style>
</head>
<body>
<div class="father">
<h2>父盒子</h2>
<div style="float:left;">左浮动盒子 1</div>
<div >标准流盒子 2</div>
<div >标准流盒子 3</div>
<p>css 中,有一个 float 属性,默认为 none,也就是标准流通常的情况。若果将 float 属性的值设置为left 或 right,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度确定。</p>
</div>
</body>
</html>
那如果我在上面的例子中的三个盒子都改为右浮动会怎么样呢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>right 浮动</title>
<style type="text/css">
.father{
background-color :#FFCCFF ;
border :2px solid red ;
padding :5px ;
}
.father div{
width : 100px;
height :20px ;
padding : 10px ;
margin : 10px ;
border :2px dashed blue ;
background-color :#CCFFFF;
}
.father p{
border: 2px dotted green;
background-color: #ffff99;
}
</style>
</head>
<body>
<div class="father">
<h2>父盒子</h2>
<div style="float:right;">右浮动盒子 1</div>
<div style="float:right;">右浮动盒子 2</div>
<div style="float:right;">右浮动盒子 3</div>
<p>css 中,有一个 float 属性,默认为 none,也就是标准流通常的情况。若果将 float 属性的值设置为left 或 right,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度确定。</p>
</div>
</body>
</html>
显然，它会按照顺序，子盒子1会先相对于父盒子浮动到右侧，然后子盒子2跟上，以此类推。
5.5.2 盒子的浮动清除
元素进行浮动后，下面的内容会往上走，自然就会受到上面元素的影响，可能会遮到，引起不美观或者是看不清的情况，这时候就要用到我们的clear属性了
clear的语法为：clear: left | right | both | none
其中none为默认值，left为清除左边浮动元素，right是清除右边的浮动元素，both为同时清理两边的浮动元素
for instance:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>right 浮动</title>
<style type="text/css">
.father{
background-color :#FFCCFF ;
border :2px solid red ;
padding :5px ;
}
.father div{
width : 100px;
height :20px ;
padding : 10px ;
margin : 10px ;
border :2px dashed blue ;
background-color :#CCFFFF;
}
.father p{
border: 2px dotted green;
background-color: #ffff99;
}
</style>
</head>
<body>
<div class="father">
<h2>父盒子</h2>
<div style="float:right;">右浮动盒子 1</div>
<div style="float:right;">右浮动盒子 2</div>
<div style="float:right;">右浮动盒子 3</div>
<p style="clear: both;">css 中,有一个 float 属性,默认为 none,也就是标准流通常的情况。若果将 float 属性的值设置为left 或 right,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度确定。</p>
</div>
</body>
</html> 
5.6 综合案例---昵心美食空间
这里面的代码还用到了一个滚动界面的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>昵心美食空间</title>
<style type="text/css">
*{
background-color: #ffff99;
}
a{
color: red;
}
.all{
width: 700px;
height: 650px;
margin: 10px auto;
padding: 5px;
background-image: url(img/bg1.JPG);
}
.banner{
width: 700px;
height: 708px;
}
.menu{
width: 690px;
height: 40px;
padding: 5px;
}
.main{
width: 700px;
height: 450px;
margin: 5px 0px;
position: relative;
}
.left,.right{
width: 150px;
height: 440px;
border:1px solid #999;
float: left;
}
.middle{
width: 384px;
height: 450px;
margin: 0px 5px;
float: left;
font-size: 20px;
font-family: "楷体";
font-weight: 700;
color: #00f;
}
.one{
width: 380px;
height: 155px;
border: 1px solid#999;
}
.two{
width: 255px;
height: 100px;
border: 5px double red;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 25px;
}
.three{
width: 380px;
height: 135px;
border: 1px solid #999;
}
.bottom{
width: 700px;
height: 70px;
}
</style>
</head>
<body>
<div class="all">
<div class="banner">
<img src="img/banner.jpg" width="700px" height="70px"/>
</div>
<div class="menu">
<img src="img/menu.jpg" width="690px" height="40px"/>
</div>
<div class="main">
<div class="left">
<marquee direction="up">
<img src="img/mm_1.jpg" width="150px" height="140px"/>
<img src="img/mm_2.jpg" width="150px" height="140px"/>
<img src="img/mm_3.jpg" width="150px" height="140px"/>
</marquee>
</div>
<div class="middle">
<div class="one">
<img src="img/font.jpg" width="25px" height="25px"/>为您推荐
<br><br>
<img src="img/x_1.jpg" width="80px" height="40px"/>
<img src="img/x_2.jpg" width="80px" height="40px"/>
<img src="img/x_3.jpg" width="80px" height="40px"/>
<img src="img/x_4.jpg" width="80px" height="40px"/>
<img src="img/x_5.jpg" width="80px" height="40px"/>
<img src="img/x_6.jpg" width="80px" height="40px"/>
</div>
<center>
<div class="two">
<h1>昵心美食空间</h1>
</div>
</center>
<div class="three">
<img src="img/font.jpg" width="25px" height="25px"/>团购信息
<br>
<a href="#">1.火锅团购</a><br>
<a href="#">2.烧烤自助</a><br>
<a href="#">3.自助餐团购</a><br>
<a href="#">新春特惠</a>
</div>
</div>
<div class="right">
<marquee direction="up">
<img src="img/good_1.jpg" width="150px" height="140px"/>
<img src="img/good_2.jpg" width="148px" height="140px"/>
<img src="img/good_2.jpg" width="148px" height="140px"/>
</marquee>
</div>
</div>
<div class="bottom">
<hr color="#0000ff">
<center style="font-family: '楷体';">版权所有©昵心美食空间<br/>
地址：江门市大学路xxx号 邮编：500000 电话：0750-9999999
</center>
</div>
</div>
</body>
</html>
扫一扫
2072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
