Css元素分类

HTML中的标签元素大体被分为三种不同的类型：块状元素，内联元素，内联块状元素。

常用块状元素：

<div>      <p>      <h1>.....<h6>       <ol>      <ul>     <table>

<address>    <biockquote>    <form>

注：设置display:block代码，可以将内联元素转换成块状元素，如：

a{display:block;}                / /内联元素a转换成了块状元素

块状元素特点：

1. 每个块状元素都从新的一行开始，而且他后面的所有元素也另外一行，（他一个块状元素独自占据一行）

2. 元素的高度，宽度，行高以及顶和底边距都可以设置

3. 元素在没有设置高度的情况下，默认是他本身父类容器的100%

---

常用的内联元素（行内元素）有：

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

注：块状元素可以用display:inline转换成内联元素，如：

div{display:inline;}            //将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

内联元素特点：

1. 和其他元素都在一行上面

2. 元素的高度，宽度以及顶部和底部边距不可以设置

3. 元素的高度就是它包含的文字或图片的宽度，不可以改变

---

常用的内联块状元素有：

<img>     <input>

所谓的内联块状元素就是同时具备内联元素，块状元素的特点，使用display:inline-block就是将元素设置为内联块状元素。

特点：

1. 和其他元素都在一行上

2. 元素的高度，宽度，行高以及顶和底边距都可以设置

---

盒模型

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

div{

       border:2px   solid  red;   //这是简写

}

下面是详细的写法

div{

border-width:2px;         //边框的粗细为2px

border-style:solid;        //  边框用的是实线

border-color:red;         // 边框颜色为红色

}

1. border-style常见的样式有： dashed（虚线），dotted（点线），solid（实线）

2. border-color中的颜色可以设置为十六进制的颜色 如：#888；

3. border-width边框的宽度可以设置为：thin，medium，thick

单独的边框

如果想设置一个方向的边框，可以这样写：

div{border-bottom:1px .......;}  //我们单独设置了单独的下边框，还可以使用top,left,right

盒模型的宽度与高度

设置width与height就可以了

填充（内边距）

里面内容与容器的边距，padding-top，padding-bottom，padding-left，padding-right，padding（四个方向同时设置）

边界（外边距）

容器与容器之间的边距，同样margin-top 。。。。。。。。等等