CSS盒子模型

一、什么是CSS盒子模型

• 宽度/高度
  指定可以存放内容的区域
• 内边距
  填充物
• 边框
  手机盒子自己
• 外边距
  盒子和盒子之间的间隙
• 内容的宽度和高度
  就是通过width/height属性设置的宽度和高度
• 元素的宽度和高度
  宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
  高度 = 上边框 + 上内边距 + height + 下内边距 + 下边框
• 元素空间的宽度和高度
  宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
  高度 = 上外边距 + 上边框 + 上内边距 + height + 下内边距 + 下边框 + 下外边距

二、元素分类

块状元素、内联元素(又叫行内元素)和内联块状元素

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

将内联元素设置成块级元素

a{
    display: block;
}

将块级元素设置成内联元素

div{
    display: inline;
}

内联块级元素

和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置

内边距：padding(padding-top / padding-left)
外边距：margin
边框：border

边框

border:2px  solid  red;

border: blue 1px solid;
border-style: solid;
border-width: 1px;
border-color: black;

border-bottom: bisque 1px solid;

填充

上下左右边距：padding: 10px;

上下1像素。左右20像素：padding: 1px 20px;

边界

margin: 1px 2px 3px 4px;

margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;

上下左右：margin: 1px;

上下1像素 左右2像素：margin: 1px 2px;

内边距 / 外边距

颜色缩写

background-color: #369;
background-color: #336699;