网页设计（四）——DIV+CSS布局3

最新推荐文章于 2024-06-17 10:13:21 发布

csyzcyj

最新推荐文章于 2024-06-17 10:13:21 发布

阅读量5k

点赞数 12

分类专栏：网页基础文章标签： css html 前端

本文链接：https://blog.csdn.net/csyzcyj/article/details/107285198

版权

本文深入探讨CSS布局，包括盒子模型参数设置、外边距合并及定位概念。通过实例演示，详细解释了CSS相对定位、绝对定位和浮动的用法，帮助读者理解网页设计中的关键布局技巧。

摘要由CSDN通过智能技术生成

前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~

网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。

DIV+CSS布局

CSS 盒子模型参数设置

在CSS中，可以使用下面的语段示例来设置div的宽度(width)、高度(height)、外边距(margin)、内边距(padding)

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

结构如图所示：

具体每种参数的语法格式为：(下面仅举例，可举一反三)

border-color:top right bottom left

border-style:top right bottom left

padding:top right bottom left

margin:top right bottom left

border-width:top right bottom left

例如:“border-color: red black white red” 表示设置上边界颜色为红色，右边界颜色为黑色，下边界为白色，左边界为红色

再如:“padding：10px 10px 10px 10px” 表示各padding边界宽度为10px

CSS 盒子模型参数设置——实例9

HTML代码如下：

<html>
<head>
<style type="text/css">
.im{
width:100px;
height:100px;
border-style:solid;
border-width:10px;
border-color:red black green orange;
margin:100px 10px 0px 0px;
}
</style>
</head>
<body>
<div class="im">
CSS盒子模型参数设置	
</div>
</body>
</html>

打开HTML效果如图：

注意到这里使用了内部样式表，这部分代码提取出来如下：

.im{

width:100px;

height:100px;

border-style:solid;

border-width:10px;

border-color:red black green orange;

margin:100px 10px 0px 0px;

}

</style>

其中，紫色部分的颜色顺序如下，可以与上图对照起来理解：

CSS外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图࿱

最低0.47元/天解锁文章

csyzcyj

关注

12
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
网页设计（四）——DIV+CSS布局3

前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。DIV+CSS布局CSS 盒子模型参数设置在CSS中，可以使用下面的语段示例来设置div的宽度(width)、高度(height)、外边距(margin)、..
复制链接

扫一扫

专栏目录