CSS盒模型和display属性

 一、 前言：css盒模型是css中相当重要的一部分，它主要有三个属性：margin，border，padding。

      

 

 

         1.margin外边距：它由margin-top，margin-left，margin-right，margin-button组成。表示盒子的上右下左的边距。一般我们写其复合属性margin，如果属性值有一个则表示上右下左的外边距，有两个属性值则第一个值表示上下，第二个值表示左右，三个值则表示第一个值表示上，第二个值表示左右，第三个值表示下。

        注：margin可以使盒子居中。使用方法 margin：0 auto;。

        2.padding内边距：它的属性值与margin同理，它是表示content内容与border边框之间的间距。

        3.border内边框:它是来表示盒模型的边框，介于margin与padding两块域之间，默认为无线条。它同样是有上左下右四方向，一般我们写复合属性：border:1px（线的大小）solid（是实线还是其他样式） red（线条颜色）；。

 二、display属性

        首先我们要知道块级元素和行内元素，简单来说块级元素会独占一行，而行内元素则可以多个同占一行。

        常用块级元素：<address>定义地址，<caption>定义表格标题，<dd>定义列表（加粗），<div>定义文档的分区，<dl>定义列表，<dt>定义列表的项目，<form>创建表单,<h1>标题，<hr>水平线,<li>定义列表,<ol>有序列表,<ul>无序列表,<p>段落等。

        常用行内元素 ： <a>超链接，<b>加粗,<br>换行,<em>强调,<i>斜体,<img>插入图像，<input>输入框,<select>多选框,<span>文本的行内元素,<strong>强调内容,<sub>上标,<sup>下标,<textarea>多行文本等。

        display的作用：将行内元素与块级元素相互转换，常用三属性：display：block；将行内转换成块级，display：inline；转换成行内元素，display：inline-block；转换成行内块级元素。