盒子模型知识点一

最新推荐文章于 2025-05-08 18:48:09 发布

绿皮车的忧伤

最新推荐文章于 2025-05-08 18:48:09 发布

阅读量155

点赞数

文章标签： html css html5

本文链接：https://blog.youkuaiyun.com/greentrainsad/article/details/127386442

版权

本文详细介绍了HTML元素的文档流概念，包括块元素和内联元素的特点，以及行内块元素的存在状态。同时，深入探讨了CSS中的盒子模型，解释了内容区、内边距、边框和外边距的概念，以及它们如何影响元素布局。通过具体的例子展示了边框和内边距的设置方法，并讨论了外边距在调整元素位置中的作用。此外，还解答了一个经典面试题，强调了盒子模型在网页布局中的重要性。

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

1.什么是文档流

文档流（normal flow）

网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层

文档流是网页最底层

我们创建的元素默认情况下，都在文档流中

元素分为两种状态：在文档流中，脱离文档流。

元素在文档流中的特点：

块元素

1:会独占一行

2:块元素的宽度默认是父元素的100%

3:块元素的高度默认是被内容撑开的

内联元素（行内元素）

1:不会独占一行

2:宽度高度默认都是被内容撑开的，不能自己定义宽高

行内块元素

1、不会独占一行，可以设置宽高

一旦元素通过某种方式，例如浮动、绝对定位等等，脱离文档流，则原来在文档流中划分元素类型，特点都不复存在

2.什么是盒子模型

关于盒子模型有一个经典的面试题：

什么是盒子模型，为什么要用盒子模型，影响盒子模型的大小因素有哪些？

答：把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里所以我们把所有的元素都想成盒子，矩形，只需要考虑大小即可

用盒子模型方便网页的布局，对开发非常有利

盒子模型也叫盒模型、盒子模型、框模型（box model）

盒子模型是有内容区、内边距、边框、外边距四个部分组成，比如买一台冰箱回来，冰箱就相当于内容区，装冰箱的泡沫就相当于内边距，装冰箱的箱子就相当于边框，箱子与你自己的距离就相当于外边距。

注意：影响盒子大小的因素：内容区，内边距，边框会影响盒子的大小，外边距不会影响

内容区(content)

元素中所有的子元素和文本内容都在内容区中排列

默认情况：设置width，height都是内容区宽高

<div class="box1">
      <div class="box2"></div>
    </div>

3.盒子模型边框

边框（border）元素设置边框

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

设置边框必须指定三个样式边框大小、边框的样式、边框的颜色

边框大小：border-width

边框样式：border-style

边框颜色：border-color

 border-width: 20px;
 border-style: solid;
 border-color:blue

border-style ,border-color都可以单独设置某一边的样式

border-bottom-width
border-top-width
border-left-width
border-right-width

border-bottom-color
border-top-color
border-left-color
border-right-color

border-width 和border-color后可跟多个值，大家要注意这种写法

四个值上右下左

三个值上左右下

二个值上下左右

一个值上下左右

border-width：2px 3px 4px 5px;

这行代码的意思就是上边框的宽度为了2px,右边框的宽度为3px,下边框的宽度为4px，左边框的宽度为5px border-color同理，就不一一说明了

注意：边框的大小如果省略，有默认值，大概1-3px ，不同的浏览器默认大小不一样；设置边框的颜色默认值是黑色

边框的样式

border-style 可选值

默认值：none

实线 solid

虚线 dashed

双线 double

点状虚线 dotted

重点掌握简写的方法：

  border: blue solid 10px;

4.内边距

内边距 padding 是内容区和边框之间的距离，会影响到整个盒子的大小

1、 padding-top: ; 上内边距

padding-left:; 左内边距

padding-right:; 右内边距

padding-bottom:; 下内边距

2、padding简写可以跟多个值

四个值上右下左

三个值上左右下

二个值上下左右

一个值上下左右

举例：现在有一个需求：创建一个子元素box2占满box1，box2把内容区撑满了

<body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>

.box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
      border: 10px transparent solid; 
      }

.box2 {
        width: 50%;
        height: 50%;
        background-color: yellow;
        padding: 100px;
      }

5.外边距

外边距不会影响到盒子的大小可以控制盒子的位置

margin-top:; 正值元素向下移动负值元素向上移动

margin-left:; 正值元素向右移动负值元素向左移动

margin-bottom:; 正值元素自己不动，其靠下的元素向下移动，负值元素自己不懂，其靠下的元素向上移动

margin-right: ; 正值负值都不动

简写 margin 可以跟多个值规则跟padding一样

margin-top: -100px;
margin-left: -100px;
margin-bottom: -100px;
margin-right: -100px;

今天的分享就到这里啦，大家还有是不明白的，欢迎在评论区留言哦~