CSS之border margin padding

最新推荐文章于 2020-10-30 18:27:42 发布

最新推荐文章于 2020-10-30 18:27:42 发布 · 178 阅读

标签

#CSS #XHTML #HTML

css学习专栏收录该内容

2 篇文章

订阅专栏

本文通过一个简单的实例详细介绍了如何使用CSS中的div、float、margin及padding等属性进行网页布局。通过定义不同元素的样式，实现了一个包含左右两部分的header布局。

拿到一个页面，首先要将根据页面排版将它划分成若干个div,由于div是自动换行的，于是我们想到用float,margin来确定div的位置（如果你没有css基础，可以看看我前面的文章，下载css入门文档看看）.

下面是我练习的一个简单例子:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link type="text/css" rel="stylesheet" href="demo.css"/>
<title>无标题文档</title>
</head>

<body>
<div id="header">
    <div class="header_left"><p>Hello CSS</p></div>
	<div class="header_right"><h1>右边内容fgdsgsdfgfdsgdsfgdsfgsdfgfdsgfdsgsdfgsdg</h1></div>
</div>
</body>
</html>

你可以看到页面效果很简单，就是用一个header这个大盒子，装着两个小盒子header_left,header_right.那么我们该如何定义这些盒子的样式呢？（这里我就不解释定义css的原则了）

1.首先定义body的样式:

body{
font-size:14px;
font-weight:bold;

/*定义页面的背景图片*/
background:url(img/bg.jpg) 0 0 repeat-x;
}

根据css2.0帮助手册，你可以知道background拥有5个常用属性：背景颜色，背景图片，是否重复，是否滚动，图片坐标

2.定义大盒子header样式：

#header{
background:#FFFFFF;
width:760px;
height:140px;
border: yellow 1px solid;
}

这段代码应该没什么难度吧。

3.定义左边的盒子header_left的样式：

.header_left{
width:480px;
height:120px;
background-color:#006666;
color:#FFFFFF;
float:left;
margin:10px 0px 10px 2px;
border: #00FF00 1px solid;
}

这里要注意float属性，因为div默认是自动换行的，我们要用header装着header_left并且让header_left左靠齐就需要这样处理。margin是这里要着重说的属性，它的四个值就是代表header_left左边的盒子与外层header盒子上，右，下，左的距离。border是盒子的边框。

3.定义右边盒子header_right的样式：

.header_right{
width:270px;
height:120px;
float:right;
background-color:#000000;
color:#FFFFFF;
border: red 1px solid;
margin:10px 2px 0px 0px;
}

和左边盒子样式差不多，如果你还不是很明白，你可以把上面margin的四个值改大点看看效果。

4.定义左边盒子里标签p的样式：

.header_left p{
   font-size:24px;
   font-weight:bold;
   padding:50px 0px 50px 150px;
}

这里要主要是padding属性，它表示标签p里的内容距离左边盒子header_left的上，右，下，左边的距离。

5.定义右边盒子里h1标签的样式：

.header_right h1{
font-size:24px;
padding:50px;
overflow:hidden;
}

这里主要是说overflow属性，根据帮助知道它有auto(自动),hidden(如果内容超过边框就隐藏),scoll(内容超出显示滚动条)几个常用属性，可以自己分别试一试。

这个例子很简单，但我觉得只要看懂这个例子就明白border,margin,padding这几个属性了。demo将以附件上传.同时提供一个css2.0中文帮助手册。我今天也是第四天学习css,做点笔记，如果你有什么心得，大家可以相互学习学习。