CSS页面布局基础
2014-10-09 21:22
197 查看
CSS盒模型
CSS盒模型是CSS可视化格式化系统的基石，它是理解CSS样式表如何工作的核心概念。盒模型可以用于元素定位和网页布局。
根据CSS盒模型的规定，每个元素（不管是块级元素还是内嵌元素）都会产生一个矩形盒子围绕在元素内容之外，这个盒子我们称为元素盒。在元素盒的内核，是元素的内容本身，称为内容区。内容区的边被称为元素盒的内边缘（ineredge），元素的高度（height）和宽度（weight）是这些内边缘之间的距离。内边距（padding）是内容区和边框（border）之间的区域。边框（border）是一到多个围绕元素内容和内边距的线。
元素的背景颜色和背景图像在内边距区域是可见的，并且延伸到边框下面。
最后，在元素边框的外面，是外边距（margin）。外边距margin区域总是透明的，这意味着父元素的背景是可以看到的。外边距margin区域的外边缘组成了元素的外部边缘。元素盒在页面上占据的总宽度是左边的外边缘到右边的外边缘之间的距离，它包括了内容区域的宽度以及padding、border和margin区域。
总结：
1.border,padding,margin能够直接声明值，但是也可以分别从4个方位声明，分别是top,bottom,left,right。
2.margin可以自由的移动，也就是可以为负值例如-1px。但是padding不可以为负值。
3.常用的border样式为实线solid和虚线dotted，他们还可以同时设置大小和颜色，格式是border：*px边框像素大小 *边框样式 #*边框颜色。
4.正常文档中的相邻块级元素的垂直外边距将会重合，而padding不会。
5.如果我们想让一个元素出现在一个有或者没有明显边框的彩色盒子中，padding属性可以用来在盒子边缘以及内容之间放置一些空白。
例子：通过html和css完成这张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Homework</title>
<style type="text/css">
*
{
color:white;
font-family: Verdana;
}
.first
{
margin:auto;
background: #4FC0E8;
margin-top: 150px;
width: 300px;
height: 70px;
}
.title1
{
text-align: center;
padding-top: 20px;
font-weight: 600;
font-size:16px;
}
.second
{
margin:auto;
background: #4FC0E8;
margin-top: 20px;
width: 300px;
height: 200px;
}
.sound
{
width: 75px;
height: 80px;
}
.title2
{
font-weight: 600;
font-size:16px;
margin-left: 80px;
margin-top: -45px;
}
.text
{
text-align: left;
font-size:13px;
height: 220px;
width: 280px;
margin-top:26px;
margin-left: 15px;
color: #CFE5F3;
}
.ps
{
font-weight:900;
}
.third
{
background: #4FC0E8;
width: 300px;
height: 315px;
margin: auto;
}
.week
{
margin:auto;
margin-top: 20px;
background: #3BAEDA;
width: 300px;
height: 60px;
}
.title3
{
font-weight: 600;
font-size:16px;
text-align: center;
padding-top: 20px;
}
.left
{
margin-left: 20px;
margin-top: -22px;
}
.right
{
margin-left: 250px;
margin-top: -31px;
}
.data
{
text-align: center;
font-size: 9em;
}
.submit
{
margin: auto;
background: #3BAEDA;
width: 160px;
height: 50px;
}
.value
{
font-size: 16px;
text-align: center;
font-weight: 600;
padding-top: 16px;
}
</style>
</head>
<body>
<div class="first">
<div class="title1">
LOAD
MORE
</div>
</div>
<div class="second">
<div class="sound">
<img src="sound.png">
</div>
<div class="title2">
LOREM IPSUM DOLOR
</div>
<div class="text">
Quisque posuere risus erat at scelerisque felis pulvinar quis.Maecenas arcu lorem,laoreet at
dui in, hendrerit mattis mi.Sed eu vehicula lectus felis pulvinar quis.Maecenas arcu lorem,laoreet at posuere risus erat.
<span class="ps">Read More</span>
</div>
</div>
<div class="third">
<div class="week">
<div class="title3">
WEDNESDAY
</div>
<div class="left">
<img src="left.png">
</div>
<div class="right">
<img src="right.png">
</div>
</div>
<div class="data">
26
</div>
<div class="submit">
<div class="value">
ADD EVENT
</div>
</div>
</div>
</body>
</html>
CSS盒模型是CSS可视化格式化系统的基石，它是理解CSS样式表如何工作的核心概念。盒模型可以用于元素定位和网页布局。
根据CSS盒模型的规定，每个元素（不管是块级元素还是内嵌元素）都会产生一个矩形盒子围绕在元素内容之外，这个盒子我们称为元素盒。在元素盒的内核，是元素的内容本身，称为内容区。内容区的边被称为元素盒的内边缘（ineredge），元素的高度（height）和宽度（weight）是这些内边缘之间的距离。内边距（padding）是内容区和边框（border）之间的区域。边框（border）是一到多个围绕元素内容和内边距的线。
元素的背景颜色和背景图像在内边距区域是可见的，并且延伸到边框下面。
最后，在元素边框的外面，是外边距（margin）。外边距margin区域总是透明的，这意味着父元素的背景是可以看到的。外边距margin区域的外边缘组成了元素的外部边缘。元素盒在页面上占据的总宽度是左边的外边缘到右边的外边缘之间的距离，它包括了内容区域的宽度以及padding、border和margin区域。
总结：
1.border,padding,margin能够直接声明值，但是也可以分别从4个方位声明，分别是top,bottom,left,right。
2.margin可以自由的移动，也就是可以为负值例如-1px。但是padding不可以为负值。
3.常用的border样式为实线solid和虚线dotted，他们还可以同时设置大小和颜色，格式是border：*px边框像素大小 *边框样式 #*边框颜色。
4.正常文档中的相邻块级元素的垂直外边距将会重合，而padding不会。
5.如果我们想让一个元素出现在一个有或者没有明显边框的彩色盒子中，padding属性可以用来在盒子边缘以及内容之间放置一些空白。
例子：通过html和css完成这张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Homework</title>
<style type="text/css">
*
{
color:white;
font-family: Verdana;
}
.first
{
margin:auto;
background: #4FC0E8;
margin-top: 150px;
width: 300px;
height: 70px;
}
.title1
{
text-align: center;
padding-top: 20px;
font-weight: 600;
font-size:16px;
}
.second
{
margin:auto;
background: #4FC0E8;
margin-top: 20px;
width: 300px;
height: 200px;
}
.sound
{
width: 75px;
height: 80px;
}
.title2
{
font-weight: 600;
font-size:16px;
margin-left: 80px;
margin-top: -45px;
}
.text
{
text-align: left;
font-size:13px;
height: 220px;
width: 280px;
margin-top:26px;
margin-left: 15px;
color: #CFE5F3;
}
.ps
{
font-weight:900;
}
.third
{
background: #4FC0E8;
width: 300px;
height: 315px;
margin: auto;
}
.week
{
margin:auto;
margin-top: 20px;
background: #3BAEDA;
width: 300px;
height: 60px;
}
.title3
{
font-weight: 600;
font-size:16px;
text-align: center;
padding-top: 20px;
}
.left
{
margin-left: 20px;
margin-top: -22px;
}
.right
{
margin-left: 250px;
margin-top: -31px;
}
.data
{
text-align: center;
font-size: 9em;
}
.submit
{
margin: auto;
background: #3BAEDA;
width: 160px;
height: 50px;
}
.value
{
font-size: 16px;
text-align: center;
font-weight: 600;
padding-top: 16px;
}
</style>
</head>
<body>
<div class="first">
<div class="title1">
LOAD
MORE
</div>
</div>
<div class="second">
<div class="sound">
<img src="sound.png">
</div>
<div class="title2">
LOREM IPSUM DOLOR
</div>
<div class="text">
Quisque posuere risus erat at scelerisque felis pulvinar quis.Maecenas arcu lorem,laoreet at
dui in, hendrerit mattis mi.Sed eu vehicula lectus felis pulvinar quis.Maecenas arcu lorem,laoreet at posuere risus erat.
<span class="ps">Read More</span>
</div>
</div>
<div class="third">
<div class="week">
<div class="title3">
WEDNESDAY
</div>
<div class="left">
<img src="left.png">
</div>
<div class="right">
<img src="right.png">
</div>
</div>
<div class="data">
26
</div>
<div class="submit">
<div class="value">
ADD EVENT
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS页面布局基础2——定位
- css页面布局基础盒模型
- CSS页面布局基础3——元素浮动
- Java Web入门之css页面布局基础知识
- CSS页面布局基础
- css页面布局基础
- CSS页面布局基础1
- CSS基础 - 页面布局
- css页面布局基础
- CSS基础之几种常见的页面布局
- css页面布局基础
- css页面布局基础
- CSS页面布局基础4——元素可见性、溢出和元素重叠问题
- CSS页面布局基础1——盒模型
- DIV+CSS基础教程：浮动(float)页面布局
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- CSS高级教程 页面布局
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题