一、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(单击即可)。