2-css基础-元素类型与盒模型

一、html元素（盒子）的四种分类：

1、块级元素（block盒子）

1)能设置宽高

2)独占一行，竖着排列

3)它的默认宽度和父元素的宽度一样宽，默认高度和它的内容的高度一样高

4)可以设置边框border，可以设置外边距margin，内边距padding（四个方向都可以设置，四个参数：上， 右， 下， 左；两个参数：上下，左右；一个参数：上右下左，三个参数：上  左右  下）

5)（盒模型）块级盒子的大小=本身宽高（width\height）+（左右/上下）边框大小（border）+（左右/上下）内边距大小（padding）

6)可以转换成内联元素（inline），或内联块元素（inline-block）,通过display属性来设置。

7）某些块级元素有默认的外边距marign和内边距padding值

8）常用的块级元素有div,body,html,h1~h6,p,ul,li,ol,dl,dt,dd,table,form

2、内联元素(inline盒子)

1)不能设置宽高

2)不独占一行，横着依次排列

3)它的默认宽高和父元素的宽高一致

4)可以设置边框border，可以设置外边距margin（左右），内边距padding（上右下左）

5)内联盒子的大小=本身宽高（width\height）+（左右/上下）边框大小（border）+（左右/上下）内边距大小（padding）

6)可以转换成块级元素（block），或内联块元素（inline-block）,通过display属性来设置。

7）某一些内联元素有自己独有的样式，比如：a,strong,b,i，em

8）常用的内联元素有a,i,b,em,strong,span

3、内联块元素（inline-block盒子属于一种内联元素，一种特殊的内联元素）

（简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现）

1）可以设置宽高

2）不会独占一行，横着依次排列

3)它的默认宽高和内容宽高一致

4）可以设置边框border，可以设置外边距margin，内边距padding，（四个参数：上， 右， 下， 左；两个参数：上下，左右；一个参数：上下左右）

5)内联块盒子的大小=本身宽高（width\height）+（左右/上下）边框大小（border）+（左右/上下）内边距大小（padding）

6）某一些内联块元素有自己独有的样式，比如：input,select

7）可以转换成块级元素,（本身为一种特殊的内联元素，所以设置inline不起作用）通过display属性来设置。

8）常用内联块元素：input,img,select等等

二、网页结构的基本布局步骤：（使用vscode编码）

a)  根据设计图的结构给整个网页分盒子；

b)  使用快捷键（shift键+1数字1键+tab键）生成网页基本架构；

c)   在网页框架头部引入css文件，快捷键（link+tab键），在生成代码的href中填写css文件的目录地址。

d)  重置所有元素的默认样式: *{ margin:0;padding:0}

e)  开始在psd设计图中，量取盒子的宽度，高度，再给它设置一个背景颜色，再将需要在网页中居中的盒子，进行居中处理（margin：0 auto）。

f) 最后再浏览器中运行我们的网页，index.html（单击即可）。