【web前端开发】超详细讲解CSS盒子模型

二月知野 2023-04-14 原文

文章目录

1.盒子模型介绍

所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型结构图:

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2.内容

作用:利用width和height属性设置内容区域的大小,默认是盒子内容区域的大小
属性值:width和height
取值:数字+px

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
           width: 200px;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

在浏览器中按F12进行检查,就可以看到盒子的内容区域正是我设置的 width: 200px; width: 200px;

3.边框

属性名:border (这是一个复合属性)
属性值:数字+px 线条的种类 颜色(不分先后顺序)

线条的种类有两个最常用的: solid(实线) dashed(虚线)
示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
          height: 120px;
          border: 10px solid red;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

效果:

border也可以给指定的方向设置边框

写法:border-方位名词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
          height: 120px;
          border-left: 3px solid red;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

效果:

4.内边距

属性名:padding
取值:数字+px

padding可以当作复合属性来使用,可以给单独的方向设置内边距,最多取4个值(上下左右)

取值个数	效果
1个	给上下左右同时设置相同的内边距
4个	分别对应盒子的 `上右下左` (顺时针的顺序)
3个	对应盒子的 `上左右下`
2个	对应盒子的 `上下左右`

5.⭐盒子大小计算

盒子的大小只是内容区域的大小吗? -其实并不是
给盒子设置border和padding时,盒子会被撑大
示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
      border: 5px solid #000;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div>这是一个div</div>
</body>
</html>

效果:

这里的盒子就是被border和padding给撑大了

盒子的大小 = 内容区域的大小+2*border的大小+2*padding的大小

如果不想让盒子被撑大,有两种办法:

手动减去border和padding的大小(很麻烦,需要大量的计算)
使用内减模式(浏览器会自动帮我们计算多余的大小,在内容区域减去)

6.⭐内减模式

使用方法:给盒子设置 box-sizing: border-box; 即可

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
      border: 5px solid #000;
      padding: 10px;
      /*使用内减模式*/
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div>这是一个div</div>
</body>
</html>

效果:

这也是CSS3的盒子模型,如果不想让盒子被撑大,建议使用这种方式解决

7.外边距

外边距和内边距的写法一样,可以给四个方向都设置外边距,也可以给单独的方向设置外间距
取值的个数效果都是一样的.掌握内边距的写法,外边距就很容易了

接下来说外边距的两个问题:外边距的合并和外边距的塌陷

外边距的合并

垂直布局的块元素,上下的margin会合并

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
    }
    
    .one{
      margin-bottom: 20px;
    }
    .two{
      margin-top: 20px;
    }
  </style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是一个div</div>
</body>
</html>

给一个div设置下外边距为20px,另一个上边距设置上外边距为20px

最后的显示效果,只有20px,而不是40px

这就是外边距的合并的合并现象

外边距合并时,会取两个margin的最大值
解决方法:尽量避免,只给一个盒子设置外边距就好

外边距的塌陷

互相嵌套的块级元素,子元素的margin-top 会作用在父元素上面

先看案例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .one{
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
    .two{
      width: 100px;
      height: 100px;
      background-color: #4c4c4c;

      margin-top: 50px;
    }
  </style>
</head>
<body>
<div class="one">
  <div class="two"></div>
</div>
</body>
</html>

原本第二个div是设置了外边距的,但是并没有生效,反而是里面的子元素的div把父元素的div一起拉下来了,这就是外边距的塌陷现象

解决方法:

给父元素设置border-top或者padding-top
⭐给父元素设置overflow: hidden;
设置浮动
转成行内块元素

行内元素的垂直外边距

不能通过改变margin和padding来改变行内标签的垂直位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .one{
      margin: 100px;
    }
  </style>
</head>
<body>
<span>这是一个span</span>
<br>
<span class="one">这是一个span</span>
</body>
</html>

效果:

行内元素的margin-top margin-bottom padding-top padding-bottom是不生效的

如果想改变行内元素的垂直位置可以使用行高 line-height

8.⭐清除默认样式

在默认情况下,有些标签是有默认的margin和padding的 ,因此一般做项目时要先把标签的默认样式给清除了

清除默认样式的方法:

margin: 0;
padding: 0;

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .one {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p class="one">这是一个p标签</p>
  <p class="one">这是一个p标签</p>
</body>
</html>

效果:

还有其它的标签也有默认样式,如果要清除默认样式,可以使用通配符选择器

9.⭐版心居中

版心居中就是将内容在浏览器中居中显示,通常页面都是这么布局的

设置方法: margin: 0 auto;

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 70%;
      height:500px;
      background-color: skyblue;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div>这是一个div</div>
</body>
</html>

效果:

根据需求可以调整盒子的高度,这样浏览器的主要内容就在浏览器居中显示了

感谢你的观看!希望这篇文章能帮到你!
专栏:《web前端开发》在不断更新中,欢迎订阅!
“愿与君共勉,携手共进!”

有关【web前端开发】超详细讲解CSS盒子模型的更多相关文章

ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2
我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？最佳答案通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co
ruby-on-rails - Rails - 一个 View 中的多个模型 - 2
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby - 使用 C 扩展开发 rubygem 时，如何使用 Rspec 在本地进行测试？ - 2
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？最佳答案您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah
ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2
我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss
ruby-on-rails - form_for 中不在模型中的自定义字段 - 2
我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢
ruby-on-rails - 如何将验证与模型分开 - 2
我有一些非常大的模型，我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中？说app/models/validations/user_validations.rb。如果可以，有人可以提供示例吗？最佳答案您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:
Ruby Sinatra 配置用于生产和开发 - 2
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？最佳答案根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
ruby-on-rails - Rails 模型——非持久类成员或属性？ - 2
对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？最佳答案将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs