关于CSS你应该知道的基础知识 - 盒模型篇

OnlyLing 发布于2019-08-02 10:13 / 980人阅读

摘要：浏览器渲染引擎通过盒模型的方式来布局元素。应用后元素的外边框增加了宽度。应用后元素内的内容和边框之间产生了相应的空间。上面的代码在中的计算结果如下上栗中，我们将盒子四个方向的都设置成了。关于盒模型的高度，可以通过属性来设置。

浏览器渲染引擎通过盒模型的方式来布局html元素。我们可以将每一个html元素都看做是一个盒子，每一个盒子都有长和款，多个这样的盒子组成了我们的网页。

Margin，Border，Padding

每一个盒子都会有margin，border和padding属性。我们可以通过CSS来指定这三个属性的大小。例如：

.box {
  margin: 40px;
  padding: 20px;
  border: black 2px solid;
  text-align: center
}


  
    box
  
  
    box
  
  
    box

box class被应用后的样式如下：

margin 应用后元素与元素之间产生了相应的空间。

border 应用后元素的外边框增加了宽度。

padding 应用后元素内的内容和边框之间产生了相应的空间。

我们同样可以通过Chrome的Developer Tools来验证相应的属性。上面的代码在Developer Tools中的计算结果如下：

上栗中，我们将盒子四个方向的margin都设置成了40px。我们还可以只修改上下左右中的其中一个或几个。

/* 具体指定上右下左的margin */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

/* 以简写的方式指定margin，依次为上，右，下，左 */
.box {
  margin: 10px 20px 30px 40px;
}

/* 以简写的方式指定margin，依次为上下，左右 */
.box {
  margin: 10px 20px;
}

padding设置的语法与margin相同，这里就不列出了。border的设置比较特殊，有机会会找专门一个章节来介绍。

这里还有一个小技巧，就是如果想将一个元素水平居中，可以将它的margin-left和margin-right属性设置成auto。即左右两边的margin根据当前窗口宽度自动调节到合适大小。

Margin 塌陷

下面这块代码中，盒模型的计算结果和我们预期的不太一样：

.box1 {
  margin-bottom: 30px;
  border: black 2px solid;
  text-align: center
}

.box2 {
  margin-top: 60px;
  border: black 2px solid;
  text-align: center
}


  
    box 1
  
  
    box 2

如果按照前面的解释，box1和box2这间的空间应该是30px + 60px = 90px，但实际上只有60px。原因是浏览器渲染元素时，垂直方向相邻的元素margin值只会取设置的较大的那个值。这就是Margin Collapsing。在上栗中，最后计算结果是60px。通过Chrome的工具，我们可以验证，如下图：

橘黄色部分为两个盒元素的margin区域。图例中可以看出margin的高度不是两个元素marign相加，而是取较大的那个。

block元素和inline元素

html元素中，有一些元素是block元素，即元素的宽度会占满整个窗口的宽度，例如div。还有一些是inline元素，即元素的宽度是根据自己内容需要计算出来的宽度，且会紧贴在前一个inline元素的后面，例如span。


  
    我是block
  
  
    我是inline
  
  
    我是inline
  
  
    我是block

我们可以通过display属性还改变元素的默认显示属性。例如想将一个span以block形式展现，只需将其设置成display: block;

还有一点需要注意的是，以inline形式展现的元素，是不受上下margin属性控制的，如果想给一个inline元素设置margin-top和margin-bottom则需要将display设置成inline-block.


  我是inline


  我是inline

上下margin不起作用

.inline {
  margin: 20px;
  border: red 1px solid;
}

上下margin起作用

.inline {
  margin: 20px;
  border: red 1px solid;
  display: inline-block;
}

盒模型长度和宽度的计算

盒模型的长度可以通过width属性还设置，例如width: 200px。我们来看一个例子：

.box {
  margin: 10px auto;
  padding: 10px;
  border: red 1px solid;
  text-align: center;
  width: 200px;
}

box

我们设置了元素宽度是200px，但通过Developer Tools查看到最后的结果是222px。原因是浏览器渲染引擎默认理解width属性是内容加上padding的宽度，整个元素宽度还要加上border和margin，即200px + 2 * 10px (margin) + 2 * 1px (border) = 222px。

这种对width属性的处理很多时候会带来一些不便，因为我们无法准确的知道最后的元素到底有多宽。要解决这个问题，可以通过设置box-sizing: border-box;，这样元素最后整体宽度就是我们设置的宽度了。如下图：

我们在引用一些CSS框架时，大多数框架都会将所有元素的box-sizing设置成border-box。有兴趣的同学可以看看Bootstrap等框架的源码。

* {
  box-sizing: border-box;
}

关于盒模型的高度，可以通过height属性来设置。而如何将设置垂直居中，还是建议使用flex-box来实现，网上关于flex-box的资料很多，有兴趣的话可以去看看。

云服务器超融合服务器你应该知道你知道数据分析知道你盒模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52202.html

关于CSS你应该知道的基础知识 - 盒模型篇

摘要：浏览器渲染引擎通过盒模型的方式来布局元素。应用后元素的外边框增加了宽度。应用后元素内的内容和边框之间产生了相应的空间。上面的代码在中的计算结果如下上栗中，我们将盒子四个方向的都设置成了。关于盒模型的高度，可以通过属性来设置。浏览器渲染引擎通过盒模型的方式来布局html元素。我们可以将每一个html元素都看做是一个盒子，每一个盒子都有长和款，多个这样的盒子组成了我们的网页。 Margi...

Jrain 2019-08-30 15:53 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
容易忽略的七个CSS知识点

摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...

elina 2019-08-29 18:47 评论0 收藏0
容易忽略的七个CSS知识点

摘要：样式声明通过一个称为级联的过程来解释和决定。级联级联可能是中最容易被弄错的属性之一。因此很容易认为元素的视觉边界等于其宽度，但情况并非如此。如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结...

chanthuang 2019-08-02 16:16 评论0 收藏0
HTML+CSS复习之CSS基础篇

摘要：内容简述关于，确实太繁杂了，内容多。写好不易，基本上就这个调了。里面有许多属性是可以继承的，注意了，继承一定是继承父级元素的样式在这里我就列出可以继承的属性，和不能继承的属性啦不可继承的和。内联元素可继承。每个浏览器可能表现不一样。内容简述关于CSS，确实太繁杂了，内容多。写好不易，基本上就这个调了。大家肯定听过CSS奇淫技巧吧，关于这个我还没有去深入了解，只是说普通的效果啥的，我...

Salamander 2019-08-29 12:38 评论0 收藏0