CSS盒模

2019-04-13 14:47发布



1.概念:用于元素定位和网页布局的可视化格式化的基石。

2.组成:从内往外:内容区、内边距(padding)、边框(border)、外边距(margin)。

3.总结:

    1. 元素盒在也页面上占据的总宽度是左边的外边缘到右边的外边缘之间的距离,它包括了内容区域的宽度和padding、border和margin区域。
    2. 当我们指定一个元素的width的值时,只是设置了内容区域的宽度,要得到元素的整个宽度必须加上其它区域的宽度。
    3. width和height不适合设置内嵌文本,遵循标准的浏览器会将其忽略,即不能对设置width和height,除非使用display将其块级元素化。
    4. margin缩写方法:{margin:1px 2px 5px 6px;}分别设置:{margin-top:1px;}
    {margin-right:2px;}{margin-bottom:5px;}{margin-left:6px;}(遵循上右下左的次序)
    5. margin通用规则:
      1)外边距是透明的;
      2)外边距可以是负值,当元素外边距为负时,会突破父级元素的盒模型的空间或者与页面上其它元素重叠
      3)相邻的块级元素的垂直(top和bottom)外边距将会重合,它们之间的空白将会是两个元素的外边距中较大的一个,而不是两个外边距之和。
   6. border是围绕元素内容区和padding区画的一条线。有三个特征:样式、宽、颜 {MOD}。
      1)边框画在元素的背景之上;
      2)非可替代内嵌元素(文本元素)的边框对于该元素所在行的行高没有影响;
      3)可替代元素的边框将影响行高。
   7. border的编写规则同margin类似,同样遵循上右下左的原则。
   8. padding是内容区和边框之间的可选区域,如果设置了边框,为了防止边框挤压在内容周围,最好也设置padding,同样遵循上右下左的原则,但是padding不允许有负值,且padding不会重合。