CSS盒模型

CSS盒模型

1.元素分类

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内敛元素（又叫行内元素）和内敛块状元素。

常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内敛元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内敛块状元素有：<img>、<input>

 

2.元素分类---块级元素

什么是块级元素？在HTML中<div>,<p>,<h1>,<form>,<ul>和<li>就是块级元素。设置display:block 就是将元素显示为块级元素。如以下代码就是将内敛元素a转换为块状元素，从而使a元素具有块状元素特点。

块级元素特点：（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。（2）元素的高度、宽度、行高以及顶和底边距都可设置。（3）元素宽度在不设置的情况现下，是他本身容器的100%（和父元素的宽度一致），除非设定一个宽度。

 

3.元素分类---内敛元素

在html中，<span>,<a>,<label>,<strong>,<em>就是典型的内敛元素。当然块状元素也可以通过代码 display:inline将元素设置为内敛元素。如下列代码就是将块状元素div转换为内敛元素，从而使div元素具有内敛元素特点。

div{

display:inline;

}

内敛元素特点：（1）和其他元素都在一行上；（2）元素的高度、宽度及顶部和底部边距不可设置；（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。

4.元素分类---内敛块状元素

内敛块状元素（inline-block）就是同时具备内敛元素、块状元素的特点，代码

display:inline-block 就是将元素设置为内敛块状元素。<img>,<input>标签就是这种内敛块状标签。

inline-block元素特点：（1）和其他元素都在一行上（2）元素的高度、宽度、行高以及顶和底边距都可设置。

 

5.盒模型---边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色。如下列代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：div{

border:2px solid red;

}

若想单独设置下边框如div{border-bottom:1px solid red;}

 

注意：（1）border-style（边框样式）常见的样式由：dashed（虚线）|dotted（点线）|solid（实线）

（2）border-color（边框颜色）中的颜色可设置为十六进制颜色 如：

border-color:#888

（3）border-width（边框宽度）中的宽度也可以设置为：

thin|medium|thick

 

6.盒模型---宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽和高，指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

 

 

7.盒模型--填充

元素内容与边框之间是可以设置距离的，称之为“填充”，填充也可以分为上、右、下、左（顺时针）。如下代码：div{padding:20px 10px 15px 30px;}

 

8.盒模型---边界

元素与其他元素之间的距离可以使用边界（margin）来设置。边界也是可以分为上、右、下、左。如下代码：div{margin:20px 10px 15px 30px;}

总结一下：padding和margin的区别，padding在边框里，margin在边框外。