网页布局-盒子

熬只小饼干

已于 2022-06-07 17:10:00 修改

阅读量1.1k

点赞数 1

文章标签： css html

于 2022-06-05 16:40:45 首次发布

本文链接：https://blog.csdn.net/m0_54486934/article/details/125131918

版权

本文深入探讨了网页布局的核心——盒子模型，包括盒子模型的定义、标准盒子模型的构成，详细讲解了边框样式属性的设置、内边距和外边距的影响，以及如何实现块级元素的水平居中和处理外边距合并问题。通过实例解析，帮助理解CSS布局中的关键概念。

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

1.网页布局本质

首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
最后把网页元素比如文字图片等等，放入盒子里面。
以上两步就是网页布局的本质

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局本质</title>
    <style>
        /* 2.使用css来定义盒子的大小，宽度和高度，确定位置
        比如，第一部分在最上边，第二部分（左边）和第三部分（右边）在网页下边 */
        #one{
            width: 100%;
            height: 100px;
            background-color: red;
        }
        #two{
            width: 200px;
            height: 100px;
            background-color: green;
            float: left;
        }
        #three{
            width: 1000px;
            height: 100px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <!-- 1.将网页划分成一个一个的盒子：矩形 -->
    <div id="one">1</div>
    <div id="two">2</div>
    <div id="three">3</div>
</body>
</html>

2.盒子模型

2.1所谓盒子模型:

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

2.2标准盒子模型:

盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。

盒子里面的文字和图片等元素是内容区域

盒子内容与边框的距离是内边距(类似单元格的cellpadding)

盒子与盒子之间的距离是外边距（类似单元格的cellspacing)

盒子的厚度我们称为盒子的边框

盒子有宽度width和高度height

盒子按照左上角来进行定位:left和top

3.设置盒子边框的样式属性

border:border-width ll border-style ll border-color

border-width:设置边框线的粗细，一般以”**px”格式来设置，**代表数字

border-style:设置边框线的形状

none:没有边框线 solid:实线 dotted:点划线 dashed:虚线

border-color:边框线的颜色

边框实质上有4个方向,每个方向可以单独设置

border-top:上边框

border-bottom:下边框

border-left:左边框

border-right:右边框

设置表格的边框线

border-collapse：边框线合并，表格和单元格的边框线进行合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta char

最低0.47元/天解锁文章

熬只小饼干

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
网页布局-盒子

1.网页布局本质2.盒子模型2.1所谓盒子模型:2.2标准盒子模型:3.设置盒子边框的样式属性4.内边距（内容与边框之间的距离）5.padding不撑大盒子的情况6.外边距7.块级盒子水平居中8.外边距合并
复制链接

扫一扫