css盒子模型

1、什么是盒子模型

首先我个人理解为，所有的元素标签都是一个盒子，也就是说每一个网页被画成很多个盒子，每个盒子都有自己的四要素，指的是内容（宽度和高度）、内边距、边框、外边距。它作用于html的所有元素。

2、四要素内边距，外边距，边框，内容各是什么

内边距：称为padding，表示内容跟边框的间隙大小，其实就是边框与内容的距离

外边距：称为margin，表示两个物体（盒子）之间的距离

边框：border有的是默认的边框，没有显示出来

内容：width和height 设置其宽度和高度，没有设置的时候，随内容的多少而改变

3、设置边框、内边距、外边距的各个方向的大小粗细：

 border-bottom:2px solid gray;

 border-left:10px dashed blue;

padding:50px 100px;    //表示上下为50个像素，左右为100个像素

margin: 20px 30px 50px; //表示为上20 右30 下50 左30 

注：顺时针方向转，为上、右、下、左，如果哪个空缺的话，另外对面的补上去

4、html元素的分类

    1、块状元素：表示单独占用一行或者多个空间，并且有转行

           元素有： p   h1~h6   table   form   div

           注：独占一行的元素，排列方式为垂直，如果没有设置宽度，则与其父容器同宽，如果不设置高度，则与其内容相同

    2、行内元素 :  表示为不独占一行，排列方式为横向，不会发生转行

           元素有： a   font   文本格式化标签（em,steong,u）   lebel   span

           注：不设置宽高，有内容决定大小，设置宽高，没有作用，无效，原因是为行内元素

    3、行内块元素:  不独占一行，横行  

           元素有： img   input

           注：内容由大小决定，设置宽高有效，自己也不独占一行

5、造成这三种类型的原因，以及之间的转化

主要的原因是应用的场景不同，根本原因是display，表现形式的不同，块状：display：block、行内： display：inline、行内块：display：inline-block，如果需要转化的话，就直接改变display的值，

例：a标签原本是不能改的，设置display为block，就可以改变宽高

6、实例：

特别说明：超链接是行内元素，所以设置的宽度和高度根本没有起作用，如果有用的话，高度和宽度，应该跟前面的p元素一样，所以说，记得行内元素设置高度和宽度时候要变成display：block。

最后，感谢大家的观看，希望讷讷够帮助到你们，以后还会陆续做一些前端的跟新，希望共勉。