css盒模型

何为盒子模型？
以盒子为例子，每一个块级元素（div）都可以看做是一个盒子，其中的内容可以为文字或图片<img>
或其他标签元素<p>
盒子和元素之间的距离为内边距padding，padding有四个值padding-top、padding-right、padding-left、padding-bottom
两个盒子之间的距离为外边距margin
盒子自身的边框为border
内容的高度height、宽度weight
盒子的实际高度：内容的height+padding-top+padding-bottom+border*2

一、元素分类
了解css布局之前我们应当先知道一些HTML中的标签元素。
在HTML中标签元素被分为三种不同的类型
分别为：块状元素、内联元素（行内元素）和内联块状元素
以下为常用的元素
(1)块状元素:<div>,<p>,<h1>…<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>
(2)内联元素:<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,,<code>
(3)内联块状元素:<img>,<input>
以下为详解

二、块级元素
块级元素在HTML中有<div>,<p>,<h1>,<form>,<ul>和<li>等
设置display：block就是将元素显示为块级元素
例如：将内联元素a转化为块级元素，使得a元素具有块级元素特点

2-（1）-块级元素

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

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

3-(1)-内联元素

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

四、内联块状元素
内联块状元素是将块级元素和内联元素的特点和到一起
内联块状元素特点：
1、和其他元素都在一行上
2、元素的高度、宽度、行高以及顶和底边距都是可以设置的

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

5-（1）边框

注意:1、border-style(边框样式)常见样式有：dashed(虚线)、dotted(点线)、solid(实线)
2、border-color中的颜色可以设置为#cccccc
3、border-width可以设置为thin、medium、thick（不常用），最常用的还是px（像素）
4、每一个盒子元素都有上下左右边框，都可以单独设置
border-bottom，border-top，border-left，border-right

六、宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的
css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

6-（1）-设置高度和宽度 6-（2）-显示未设置的样子 6-（3）-设置后的样子 6-（4）-总宽度

高度也是相同的
通常下图说明

6-（5）-总样式

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

顺序一定不要搞混。可以分开写上面代码：
div{

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

如果上、右、下、左的填充都为10px;可以这么写：div{padding:10px;}

如果上下填充一样为10px，左右一样为20px，可以这么写：div{padding:10px 20px;}

八、margin边界

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

也可以分开写：
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

如果上右下左的边界都为10px;可以这么写：div{ margin:10px;}

如果上下边界一样为10px，左右一样为20px，可以这么写：div{ margin:10px 20px;}

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

2018年5月27日23:05:38