在编写网页代码时,首先应该设计好页面的布局形式,然后再给页面布局填充内容。网页布局与定位,也就是要决定某一个模块安置的具体位置,占据多大的空间。而不是深究模块内部填充的内容:
container:整个大布局的容器
header:页眉部分
navbar:导航条
main:主要内容部分
menu:左侧菜单
content:主要内容
sideba:边条
footer: 页脚
接下来主要介绍盒子模型和定位机制两个部分,盒子模型决定元素是什么样,而定位机制则决定这个元素放在哪。
盒子模型
页面上的一个区域,图片,导航栏,列表,导航栏,段落等等都可以看做是一个盒子模型,页面中所有的元素都可以是盒子,占据着一定的页面空间大小.
1.盒子模型的组成
content: 内容,图片或者文字
height: 高度
width: 宽度
padding: 内边距,位与内容与边框之间的空白距离
border: 边框,盒子的边框
margin: 外边距,边框之外的一段空白距离,可以通过两个盒子的外边距来设置两个盒之间的距离.
一个盒子的实际宽度和高度=content+padding+border+margin组成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#box{
width:300px;/*content的宽*/
height:200px;/*content的高*/
border:1px solid;/*边框1px,实线*/
padding:20px;/*内边距*/
margin:10px;/*外边距*/
}
</style>
</head>
<body>
<div id="box">
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
</body>
</html>
2.盒子模型溢出处理overflow
分量 | 描述 |
---|---|
hidden | 隐藏,超出部分不可见 |
scroll | 显示滚动条 |
auto | 如果有超出,显示滚动条 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#box1{
width:300px;/*content的宽*/
height:100px;/*content的高*/
border:1px solid;/*边框1px,实线*/
padding:20px;/*内边距*/
margin:10px;/*外边距*/
color: blue;
}
#box2{
width:300px;/*content的宽*/
height:100px;/*content的高*/
border:1px solid;/*边框1px,实线*/
padding:20px;/*内边距*/
margin:10px;/*外边距*/
color: blue;
overflow: hidden;
}
#box3{
width:300px;/*content的宽*/
height:100px;/*content的高*/
border:1px solid;/*边框1px,实线*/
padding:20px;/*内边距*/
margin:10px;/*外边距*/
color: blue;
overflow: scroll;
}
#box4{
width:300px;/*content的宽*/
height:100px;/*content的高*/
border:1px solid;/*边框1px,实线*/
padding:20px;/*内边距*/
margin:10px;/*外边距*/
color: blue;
overflow: auto;
}
</style>
</head>
<body>
<div id="box1">
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
<br>
<br>
<br>
<div id="box2">
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
<div id="box3">
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
<div id="box4">
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
</body>
</html>
3.边框border属性
border可以给盒子的边框设置样式,相较于< hr/ >标签它的功能更加丰富,可以设置宽度,高度,样式,颜色等.
属性 | 描述 | 取值 |
---|---|---|
border-width | 边框的宽度 | 单位是px,thin,medium,thick不同浏览器对后三者解析不一样,一般用前者 |
border-style | 边框的样式 | dashed(一个个横线),dotted(点),solid(实线),double(双实线) |
border-color | 边框颜色 | color |
border: | 可以直接将分量全部设置在border下 | border:width,style,color |
另外值得注意的是border包括了top,right,bottom,left四个方向,可以用border-direction来分别设置
水平分割线的制作:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
.line{
height:1px;
width:500px;
border-width:2px;
border-style:solid;
border-color:#FFB6C1;
}
</style>
</head>
<body>
<dir class="line"></dir>
</body>
</html>
效果如下:
4.内边距padding和外边距margin
对于外边距或者内边距浏览器会给他们一个默认的值,我们要先给这两个属性清零,通常采用全局的方式清零:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
padding和margin的4个分量值:
分量 | 描述 | 取值 |
---|---|---|
padding-top/margin-top | 设置上边距 | 20px/15%(百分号相对于外层的盒子) |
padding-right/margin-right | 设置左边距 | 20px/15%(百分号相对于外层的盒子) |
padding-bottom/margin-bottom | 设置下边距 | 20px/15%(百分号相对于外层的盒子) |
padding-left/margin-left | 设置左边距 | 20px/15%(百分号相对于外层的盒子) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding和margin</title>
<style type="text/css">
div{
width:300px;/*content的宽*/
height:200px;/*content的高*/
border:1px solid #00FA9A;/*边框1px,实线*/
margin:10px 10px 20px 10px;/*外边距,有四个分量,中间用空格隔开*/
padding:10px;/*内边距*/
overflow: auto;
}
</style>
</head>
</head>
<body>
<div>
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
<div>
<img src="images/Weixin.png" width=300px height=200px alt="403">
</div>
</body>
</html>
1.div盒子独占一行
2.垂直方向有一个合并的效果
水平居中的设定:
对于文字和图片都可以用text-aling:center来设置
对于盒子或者div水平居中一般设置外边距,margin:0 auto; 来实现这个div区域的水平居中.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding和margin</title>
<style type="text/css">
#newsimagelist{
text-align: center;/*给内容设置水平居中*/
font-size:0;/*否则会有间隙*/
}
#newsimagelist img{/*选择器嵌套*/
height:150px;
width:200px;
margin: 5px;
border: 1px solid #0cf;
padding: 5px;
}
</style>
</head>
</head>
<body>
<div id="newsimagelist">
<img src="images/Weixin.png">
<img src="images/Tencent.png">
<img src="images/Google.png">
</div>
</table>
</body>
</html