zoukankan      html  css  js  c++  java
  • CSS盒状模型简介

    CSS盒状模型

    在平时的开发过程中还是经常得写博客,这2天有个公司找我面试,在面试当中提到了CSS中的盒状模型。这个东西在平时的前端开发经常用到。以下简单介绍一下:

    CSS中的盒状模型由:margin、border、padding和content几个属性组成,

    content:内容,它可以是文字和图片等;

    padding:内边距,空白和内补丁,用于设置内容和边框之间的距离,就像一个缓冲带;

    border:边框,用于设置内容边框的粗线和样式等 ;

    margin:外边框,是一块内容与另一块内容之间的间距;

    在使用CSS设置盒状模型宽度和高度时,我们只设置content区域的宽度和高度,而不是content+border+padding+margin. 如果给盒状模型定义背景色,将会在content区域和padding区域显示,是无法设置颜色的。

    从以上的盒状模型介绍中可以看出,一个盒状模型应该将这4个方面的尺寸全部加起来计算:

    盒状模型的宽度=左margin宽度+左padding宽度+左border宽度+content宽度+右padding宽度+右border宽度+右margin宽度 。

    盒状模型的高度=上margin宽度+上padding宽度+上border宽度+content宽度+下padding宽度+下border宽度+下margin宽度。

  • 相关阅读:
    NKOJ P3051浇花
    Linux-Shell脚本编程-学习-2-Linux基本命令
    Linux-Shell脚本编程-学习-1-Linux基本命令
    Ubuntu下使用Git_6
    Ubuntu下使用Git_5
    电脑优化,提速
    Ubuntu下使用Git_4
    Ubuntu下使用Git_3
    Ubuntu下使用Git_2
    Ubuntu下使用Git_1
  • 原文地址:https://www.cnblogs.com/chengbing2011/p/4190107.html
Copyright © 2011-2022 走看看