您的位置：首页 > Web前端 > CSS

CSS页面布局篇

2015-07-31 22:58 465 查看

一、CSS盒模型

定义：CSS盒模型四CSS可视化格式化系统的基石，是理解样式表如何的核心

1、区域与边界：

内容区：元素内容benshen
内边距（padding）：内容区和边框之间的区域
边框(border)：一到多个围绕元素内容和内边距的线
外边距（margin）：在元素边框的外面。外边距总是透明的

2、高度和宽度
使用width和height属性可以设置块级元素或者内嵌可替换元素（例如图像）的大小
a、可设置：div、p、form、hr、h1-6、列表等（块级元素）
img内嵌可替换元素
b、不可设置：a、span、label（内嵌文本元素）

3、外边距（margin）
定义：围绕在元素边框之外的可选区域
属性值：margin-top、margin-right、margin-bottom、margin-left
CSS代码缩写： //中间使用空格分开的
a、body { margin 2px ;} //所有的margin都设为2px
b、body { margin 2px 4px ;} //上下margin为2px，左右为4px
c、body { margin 2px 4px 3px ;} //上margin为2px，左右margin为4px，下margin为3px
d、body { margin 2px 4px 4px 3px;} //上下左右的margin分别为：2px,4px,4px,3px
外边距的通用规则

总是透明的
元素可以有负外边距
正常文档流值得相邻块级元素的垂直（top和bottom）外边距将会重合，即两元素之间空白是外边距中较大的那一个

4、边框（border）
定义：是围绕着内容区和padding区画的一条线
特征：样式、宽度、颜色

边框显示样式

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

属性值解释：none : 　无边框。与任何指定的border-width值无关

hidden : 　隐藏边框。IE不支持

dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线

dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线

solid : 　实线边框

double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

groove : 　根据border-color的值画3D凹槽

ridge : 　根据border-color的值画菱形边框

inset : 　根据border-color的值画3D凹边

outset : 　根据border-color的值画3D凸边
边框样式属性：border-top-style
、border-bottom-style、 border-left-style 、border-right-style
属性缩写：border-style

边框的宽度

边框宽度属性：border-top-width 、border-bottom-width、 border-left-width 、border-right-width
属性缩写：border-width

边框颜色

边框颜色属性：border-top-color 、border-bottom-color、 border-left-color 、border-right-color
属性缩写：border-color

例题：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
border-color: black;
border-width:4px;
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html></span>

输出结果：

5、内边距（padding）
定义：是内容区和边框之间的可选区域
注：padding不允许有负值，不会重合

二、百度首页制作

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p2 {
float: right;
margin:18px 13px;
word-spacing: 20px;
}
.b {
float: right;
background-color: dodgerblue;
color: white;
padding: 6px 6px;
margin:12px 0 ;
}
.c {
margin: 0 auto;
width: 600px;
}
.d {
margin: 10px 280px;
height: 36px;
width: 600px;
}
.e {
float: right;
background-color: dodgerblue;
color: white;
padding: 12px 25px;
margin: -52px 339px 0;
}
.f {
margin:180px 499px;
}
.g {
margin: -170px 450px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<a class="b">更多产品</a>
</div>
<div class="p2">
<a href="#" style="color: black"><b>新闻</b></a>
<a href="#" style="color: black"><b>hao123</b></a>
<a href="#" style="color: black"><b>地图</b></a>
<a href="#" style="color: black"><b>视频</b></a>
<a href="#" style="color: black"><b>贴吧</b></a>
<a href="#" style="color: black">登录</a>
<a href="#" style="color: black">设置</a>
</div>

<div class="c">
<img src="baidu.png">
</div>
<div>
<input type="text"  class="d">
<a class="e">百度一下</a>
</div>
<div class="f">
<a style="color: blue" href="#" >把百度设为主页</a>
<a style="color: blue" href="#"> 关于百度</a>
<a style="color: blue" href="#">About Baidu</a>
</div>
<div class="g">
<p style="color: slategrey">©2015Baidu
<a href="#" style="color: grey">使用百度必读</a>
<a href="#" style="color: grey">意见反馈</a>
<span style="color: slategrey">京ICP证030173号</span>
</p>
</div>
</div>
</div>
</body>
</html></span>

输出结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航