【Web基础】-盒子模型/页面设计-CSS+HTML-绝对定位/相对定位

已于 2022-05-13 11:27:50 修改
阅读量1.5k 收藏 35
点赞数 2
分类专栏： Web基础 文章标签： css html 定位
于 2021-05-23 21:04:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51978362/article/details/116836634
版权

普歌 -【Web基础】 - 盒子模型/页面设计

前言

本文将以一个盒子模型的案例来完成对CSS相关知识的总结

以下是本篇文章正文内容，内容为个人见解，仅供参考。

概念图及效果图

在这里插入图片描述

在这里插入图片描述

接下来开始实现吧

实操

  • 要完成一个复杂的盒子模型可以进行分步处理，首先可以绘制最外层边框
    在这里插入图片描述
/*样式*/
<style type="text/css">
	.First{
            width:1690px;
            height: 900px;
            border: solid 10px grey;
            margin: 0 auto;
            background-color: khaki;
            position: absolute;
            left: 50%;
            transform:translate(-50%);
        }
</style>
/*代码*/
<div class="First"></div>
  • 然后划分左右两大区域
    在这里插入图片描述
/*样式*/
<style type="text/css">
	.SecondLeft{
            float: left;
            width: 530px;
            height: 860px;
            margin: 20px 0 20px 20px;
            background-color: #fff;
     }
     .SecondRight{
            float: right;
            width: 1100px;
            height: 860px;
            margin: 20px;
            background-color: #fff;
     }
</style>
/*代码*/
<div class="SecondLeft"></div>
<div class="SecondRight"></div>
  • 接下来细分左边的上下区域
    在这里插入图片描述
/*样式*/
<style type="text/css">
        .SLtop{
            width: 528px;
            height: 228px;
            border: 1px solid black;
            background-color: green;
        }
        .SLbottom{
            width: 528px;
            height: 608px;
            border: 1px solid black;
            margin-top: 20px;
            background-color: green;
        }
</style>
/*代码*/
<div class="SLtop"></div>
<div class="SLbottom"></div>
  • 再次将右边上下区域进行划分
    在这里插入图片描述
/*样式*/
<style type="text/css">
         .SRtop{
            width: 1098px;
            height: 328px;
            border: 1px solid black;
            background-color: green;
            margin-bottom: 20px;
        }
        .SRbottom{
            width: 1100px;
            height: 510px;
            background-color:violet;
        }
</style>
/*代码*/
<div class="SRtop"></div>
<div class="SRbottom"></div>
  • 再将右下的区域划分左右
    在这里插入图片描述
/*样式*/
<style type="text/css">
         .SRBleft{
            float: left;
            width: 538px;
            height: 508px;
            border: 1px solid black;
            margin-right: 20px;
            background-color: green;
            position: absolute;
        }
        .SRBright{
            float: right;
            width: 540px;
            height: 510px;
            background-color:cornflowerblue;
        }
</style>
/*代码*/
<div class="SRBleft"></div>
<div class="SRBright"></div>
  • 最后将蓝色区域划分上下
    在这里插入图片描述
/*样式*/
<style type="text/css">
        .SRBRtop{
            width: 538px;
            height: 243px;
            border: 1px solid black;
            background-color: green;
            margin-bottom: 20px;
        }
        .SRBRbottom{
            width: 538px;
            height: 243px;
            border: 1px solid black;
            background-color: green;
        }
</style>
/*代码*/
<div class="SRBRtop"></div>
<div class="SRBRbottom"></div>
至此大部分处于标准文档流下的盒子便部署完成了，接下来部署小块的盒子
  • 7号盒子的设置可以用相对定位来定位，其并未脱离标准文档流
    在这里插入图片描述
/*样式*/
<style type="text/css">
        .seven{
            width: 198px;
            height: 148px;
            border: 1px solid black;
            background-color: orange;
            position: relative;
            left: 50px;
            top: 75px;
        }
</style>
/*代码*/
<div class="seven"></div>
  • 8号盒子覆盖于所有盒子之上，需要用绝对定位来设置，该种方式会脱离标准文档流

在这里插入图片描述

/*样式*/
<style type="text/css">
        .eight{
            width: 248px;
            height: 148px;
            border: 1px solid black;
            background-color: orange;
            position: absolute;
            top: -50px;
            left: 1400px;
        }
</style>
/*代码*/
<div class="eight"></div>
  • 9号盒子也对部分盒子进行了压盖，所以也要进行绝对定位，但是注意其也被其他盒子压盖，所以要注意盒子的放置顺序
    在这里插入图片描述
/*样式*/
<style type="text/css">
        .nine{
            width: 248px;
            height: 148px;
            border: 1px solid black;
            background-color: orange;
            position: absolute;
            bottom: -50px;
            left: 640px;
        }
</style>
/*代码*/
<div class="nine"></div>
在完成每一个盒子的样式设计后，下面需要总体设计，直接上代码！ 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        .First{
            width:1690px;
            height: 900px;
            border: solid 10px grey;
            margin: 0 auto;
            background-color: khaki;
            position: absolute;
            left: 50%;
            transform:translate(-50%);
        }
        .SecondLeft{
            float: left;
            width: 530px;
            height: 860px;
            margin: 20px 0 20px 20px;
            background-color: #fff;
        }
        .SLtop{
            width: 528px;
            height: 228px;
            border: 1px solid black;
            background-color: green;
        }
        .SLbottom{
            width: 528px;
            height: 608px;
            border: 1px solid black;
            margin-top: 20px;
            background-color: green;
        }
        .SecondRight{
            float: right;
            width: 1100px;
            height: 860px;
            margin: 20px;
            background-color: #fff;
        }
        .SRtop{
            width: 1098px;
            height: 328px;
            border: 1px solid black;
            background-color: green;
            margin-bottom: 20px;
        }
        .SRbottom{
            width: 1100px;
            height: 510px;
            background-color:violet;
        }
        .SRBleft{
            float: left;
            width: 538px;
            height: 508px;
            border: 1px solid black;
            margin-right: 20px;
            background-color: green;
            position: absolute;
        }
        .SRBright{
            float: right;
            width: 540px;
            height: 510px;
            background-color:cornflowerblue;
        }
        .SRBRtop{
            width: 538px;
            height: 243px;
            border: 1px solid black;
            background-color: green;
            margin-bottom: 20px;
        }
        .SRBRbottom{
            width: 538px;
            height: 243px;
            border: 1px solid black;
            background-color: green;
        }
        .seven{
            width: 198px;
            height: 148px;
            border: 1px solid black;
            background-color: orange;
            position: relative;
            left: 50px;
            top: 75px;
        }
        .eight{
            width: 248px;
            height: 148px;
            border: 1px solid black;
            background-color: orange;
            position: absolute;
            top: -50px;
            left: 1400px;
        }
        .nine{
            width: 248px;
            height: 148px;
            border: 1px solid black;
            background-color: orange;
            position: absolute;
            bottom: -50px;
            left: 640px;
        }
    </style>
</head>
<body>
    <div class="First">
        <div class="SecondLeft">
            <div class="SLtop"></div>
            <div class="SLbottom"></div>
        </div>
        <div class="SecondRight">
            <div class="SRtop">
                <div class="seven"></div>
            </div>
            <div class="SRbottom">
                <div class="nine"></div>
                <div class="SRBleft"></div>
                <div class="SRBright">
                    <div class="SRBRtop"></div>
                    <div class="SRBRbottom"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="eight"></div>
</body>
</html>

总结

什么是盒模型？

  • css moudle这一术语是用来设计和布局时使用的
  • 所有的HTML元素都可以看作是盒子
  • 盒模型包括：外边距（margin），边框（border），内填充（padding），实际内容
  • 块级元素都具备盒子模型的特征

盒模型的属性和特征

  • 内容具有宽高
  • 内容的页边距（padding）
    代表盒子边框到内容的距离
    padding内设置一个值：代表 “上下左右”
    padding内设置两个值：代表 “上下” “左右”
    padding内设置三个值：代表 “上” “左右” “下”
    padding内设置四个值：代表 “上” “右” “下” “左”
  • 内容的外边距（margin）
    margin垂直方向上会出现外边距合并，外边距塌陷，所以在设置时如果在上面设置了margin-bottom，那么在下面就不用设置margin-top
  • 内容的边框（border）
    粗细（width）
    样式（style）
    颜色（color）

定位

  • 静态定位 position：static；
  • 相对定位 position：relative；
    不脱离标准文档流，可以调整元素
    参考点：以原来的位置为参考点
  • 绝对定位 position：absolute；
    脱离标准文档流，不在页面占位置
    层级越高的，会出现压盖现象
    参考点：相对于最近的非static祖元素定位，如果没有非static祖元素，那么以页面根元素左上角进行定位
    推荐使用 “子绝父相” 的布局方法
  • 固定定位 position：fixed；
    脱离标准文档流
    一旦设置固定定位，在页面中滚动网页时，其位置固定不变
    参考点：以浏览器的左上角为参考
至此文章就结束啦，欢迎在评论区留言
同时也祝看完本篇的你在未来的时间里收获更多知识！
  • 作者：CEMER216
  • 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。
昼伏夢想家
关注
  • 2
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端-CSS盒子模型
qq_53584660的博客
06-08 1955
1.盒子的概念页面中的每一个标签，都可以看做是一个盒子，通过盒子的视角更方便的进行布局浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子2.盒子模型CSS中规定每个盒子分别由 内容区域（content）、 内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型3.记忆：可以联想现实中的包装盒（电脑包装做类比，电脑+填充泡沫+外包装盒） 如果是两个内容： 想让两个内容之间有间距，代码应该加margin：外边距
Web前端基础知识：CSS盒子模型、绝对定位和相对定位
weixin_43589021的博客
03-17 3111
一：CSS盒子模型 CSS盒子模型概念：CSS盒子模型包含了内容（content）、内边距（padding）、边框（border）、外边距（margin）、宽度（width）、高度（height）几个要素，如图（图为标准盒子模型）  Content：所写的内容； Padding：边框内的距离，设置时一般是上右下左的顺序，例如padding:10px(上)，20px(右)，30px(下)，...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
热门推荐
weixin_62443409的博客
05-27 1万+
上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。
【Web前端】CSS-盒子模型
亮点菌
09-08 5420
网页布局的核心本质： 就是利用 CSS 摆盒子。 网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容
Web前端基础---CSS样式--盒子模型--浮动与定位
愚者的博客
06-14 872
Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。即<div> 标签。 CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的head部分，也可以将样式声明在一个专门
HTML + CSS 连载 | 16 - 盒子模型的外边距
JingnanJia的博客
10-23 1502
padding 和 margin 的使用场景，padding 更多的是内容与边框之间的距离，margin 是兄弟元素之间的距离，如果像这个例子中，里面的 box 距离外面的 box 在左边和上边都有一定距离的话，使用 margin 和 padding 都可以实现，但是推荐使用 padding，更加语义化。原本应该是绿色的盒子与红色的盒子会根据绿色盒子的顶部有一定的间距，但是实际情况是绿色盒子和红色盒子之间没有间距，反而是绿色盒子的父元素即红色盒子的上外边距为设置的外边距。
Web网页设计-盒子模型
qq_55439444的博客
10-27 4124
盒子模型就是把页面中的HTML元素看作一个方形的盒子，也可以理解为一个盛装内容的容器。 每个盒子都由元素的内容、内边距(padding)、边框(border)和外边框(margin)组成。
CSS笔记（八）盒子模型-----定位
weixin_45904557的博客
03-10 2999
1.当某个元素可以自由的在盒子内移动，并且压住其它盒子 2.当我们滚动窗口时，盒子是固定屏幕某个位置的 以前的标准流和浮动无法实现上述效果 所以， 浮动和定位的区别： 1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子 定位： 将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定
[C1进阶之路-Web基础] 盒子模型
Nick 的笔记
04-23 1229
​ 🍹欢迎各路大佬来到 Nick 主页指点 ☀️本期文章将学习 [C1进阶之路-Web基础] 盒子模型，我是博主Nick。✨ ✨我的博客主页：Nick_Bears 🌹꧔ꦿ 🌹꧔ꦿ博文内容如对您有所帮助，还请给个点赞 + 关注 + 收藏✨ 🍋 注：资料来源于C1进阶考试资料 ​
从HTML和CSS开始-第4/12部分-布置第一个Web页面
04-08
在本教程中，“从HTML和CSS开始 - 第4/12部分 - 布置第一个Web页面”，我们将深入探讨如何使用HTML和CSS构建一个基本的Web布局。这是一系列面向初学者的指南，旨在帮助您掌握这两种语言的基础知识，从而为创建网页...
Day05-CSS布局-盒子模型
07-06
在网页设计中，CSS（Cascading Style Sheets）布局扮演着至关重要的角色，而盒子模型是理解CSS布局的基础。本文将深入探讨“Day05-CSS布局-盒子模型”这一主题，详细介绍盒子模型的工作原理、相关属性以及在HTML元素...
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例2-5 CSS3盒子模型
01-04
特别是，我们将深入理解CSS3的盒子模型，这是CSS布局的基础。 CSS3盒子模型，全称为CSS盒模型，它定义了网页元素如何占用空间并排列。每个HTML元素可以看作一个矩形框，包括内容区域（content）、内边距（padding）...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1419
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS 的工作原理
07-25 1055
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
xcLeigh
07-25 2648
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
秃鹰算法BES优化Transformer-LSTM负荷数据回归预测【含Matlab源码 6405期】.zip
08-01
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Transformer-LSTM预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Transformer-LSTM预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Transformer-LSTM预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Transformer-LSTM预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Transformer-LSTM预测 4.4.5 萤火虫算法FA/差分算法DE优化Transformer-LSTM预测 4.4.6 其他优化算法优化Transformer-LSTM预测
EtherCAT协议（中文版）完整1-6册
08-01
ETG1000_1_CHN_Overview_V1i0i2_C01 ETG1000_2_CHN_EcatPhysicalLayer_V1i0i2_C01 ETG1000_3_CHN_EcatDLLServices_V1i0i2_C01 ETG1000_4_CHN_EcatDLLServices_V1i0i2_C01 ETG1000_5_CHN_EcatALServices_V1i0i2_C01 ETG1000_6_CHN_EcatALProtocols_V1i0i2_C01 ETG1000_6_V1i0i3_S_R_EcatALProtocols
大数据中心建设方案.pptx
最新发布
08-01
大数据中心建设方案.pptx
韩顺平讲解：HTML+CSS+JS网页设计深度解析
笔记涵盖了块级元素、行内元素、标准流盒子模型以及浮动定位等核心概念，这些都是构建响应式和美观页面布局的关键。通过学习，开发者可以熟练运用div+css进行网页布局，例如模仿sohu首页的布局，理解并实践盒子模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值