CSS 盒模型

先介绍几个CSS经常使用概念

width

• 能够设置元素的宽度

height

• 能够设置元素的高度

padding

• 内边距
• 能够让盒模型里得内容与边框有相应距离
• 他有四个参数，从前到后分别对应的是：上内边距、右内边距、下内边距、左内边距，每一个参数都不同
• 若是设置的内边距是上下左右都同样的只须要设置一个值就好
• 若是上下同样，左右同样，但上下和左右的值不同，则须要设置两个值
• 若是三个值或者四个值都不同，那么必须都把值写出来
• 若是只想用一个方向的内边距能够在padding上链接一个方向字符
  • padding-left/right/top/bottom

div{
  order: 1px solid red;
  width: 100px;
  padding: 10px;
}
复制代码

div{
  border: 1px solid red;
  width: 100px;
  padding: 30px 20px;
}
复制代码

div{
  border: 1px solid red;
  width: 100px;
  padding: 10px 30px 50px 70px;
}

复制代码

div{
  border: 1px solid red;
  width: 100px;
  padding-left: 100px;
}
复制代码

margin

• 外边距
• 元素与元素之间的边距
• 语法基本和内边距相同，具体参照上一小节

盒模型

content-box

• 默认的盒模型
• width = 内容宽度
• 能够使用 box-sizing 设置

div{
  border: 1px solid red;
  width: 100px;
  padding: 20px;
  box-sizing: content-box;
}
复制代码

border-box

• IE盒模型
• width = 内容宽度 + border + padding
• 能够使用 box-sizing 设置
• 推荐使用 border-box

div{
  border: 1px solid red;
  width: 100px;
  padding: 20px;
  box-sizing: border-box;
}
复制代码

PS:正在学习的前端能够尝试一下作这几个例子，这样会加深印象并能有助于理解盒模型，若是有什么建议或意见就私信我