CSS页面布局基础

最新推荐文章于 2022-09-29 16:03:29 发布

Vanrio

最新推荐文章于 2022-09-29 16:03:29 发布

阅读量661

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/Vanrio/article/details/39939069

HTML 专栏收录该内容

11 篇文章

订阅专栏

本文深入讲解CSS盒模型的概念，包括内容区、内边距、边框及外边距的作用及特性，探讨它们如何影响元素布局及网页设计。此外，还提供了具体的代码示例帮助读者更好地理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>