css基础知识复习盒子模型

这节来学习css的盒子模型。盒子模型非常重要,是以后我们写页面经常用到的一个知识点。如果盒子模型弄不明白,那你要按照设计图画出一个页面来,恐怕要费很大的力气。

我个人的经验是,掌握不了盒子模型,一个页面布局要花上你预计的三倍以上的时间,如果你要写的和设计图一摸一样的话。

不说废话了,下面进入正题。

什么是盒子模型?

本节一进来就给大家祭上了一张大图,仔细看,它像什么呢?

我个人觉得它很像一个相框,大家可以借助像框来理解盒子模型。

margin

margin是盒子模型的外边距,用来推开其它的盒子。它一般简写为

它可以拆分为上下左右四个属性,上面的简写属性与下面的拆分属性效果相同,如下:

如果上面的四个值都是相等的,那直接用来搞定就可以。但是有时后四个值不一样,又不想拆分开写时,还有一种简写方法,如下:

这个简写方法的顺序依次为上右下左。

如果上下相同,左右相同时,你还可以这么写:

这个时候,它的顺序是上下,左右。第一个值代表上下,第二个代表左右。

聪明的你,是不是知道了怎么写上下相同,左右不同或者左右相等,上下不同时怎么写了吧?

注意:两个盒子在一个时,如果他们都有margin,那他们之间margin的间距就取较大的那个。

border

border是边界的一个分割层。它可以写的很宽,但是很多时候,我们写代码是,都是只将它写成一条线。

borde和margin一样,有简写和分开写两种,规则也是一样的。

简写形式如下:

详细写则是挨个写下来,如下:

下面我们来进一步了解,它实际上是由border-width,border-style,border-color组成,如果你想进一步来细写,也可以这样。不过我不太喜欢这么细的写。

padding

padding是内边距,写法如margin。

width 和 height

width和height一般是不包括外面间距(包括margin,padding,border)的宽度的,但是当你把设置如下属性时,它会包括padding。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190103G1DCMM00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券