JavaWeb:前端开发基础

JavaWeb:前端开发基础

内联元素和块级元素

说明：

　　联元素和块级元素都是html中的范畴，块元素和内联元素的主要差异是块元素是从新的一行开始。而内联元素一般显示在一行上。但是可以通过css的display属性将内联元素改变为块元素，（display：block） 也可以将块元素改变为内联元素（display：in-line）。

内联元素的特点：

　　1、和其他元素都在一行上；

　　2、高度、行高和顶以及底边距都不可改变；

　　3、宽度就是它的文字或图片的宽度，不可改变。

块元素的特点：

　　1、总是在新行上开始；

　　2、高度，行高以及外边距和内边距都可控制；

　　3、宽度缺省是它的容器的100%，除非设定一个宽度。

　　4、它可以容纳内联元素和其他块元素

常见的内联元素

1 * a - 锚点
 2 * abbr - 缩写
 3 * acronym - 首字
 4 * b - 粗体(不推荐)
 5 * bdo - bidi override
 6 * big - 大字体
 7 * br - 换行
 8 * cite - 引用
 9 * code - 计算机代码(在引用源码的时候需要)
10 * dfn - 定义字段
11 * em - 强调
12 * font - 字体设定(不推荐)
13 * i - 斜体
14 * img - 图片
15 * input - 输入框
16 * kbd - 定义键盘文本
17 * label - 表格标签
18 * q - 短引用
19 * s - 中划线(不推荐)
20 * samp - 定义范例计算机代码
21 * select - 项目选择
22 * small - 小字体文本
23 * span - 常用内联容器，定义文本内区块
24 * strike - 中划线
25 * strong - 粗体强调
26 * sub - 下标
27 * sup - 上标
28 * textarea - 多行文本输入框
29 * tt - 电传文本
30 * u - 下划线
31 * var - 定义变量

常见的块级元素

 1 * address - 地址
 2 * blockquote - 块引用
 3 * center - 举中对齐块
 4 * dir - 目录列表
 5 * div - 常用块级容易，也是css layout的主要标签
 6 * dl - 定义列表
 7 * fieldset - form控制组
 8 * form - 交互表单
 9 * h1 - 大标题
10 * h2 - 副标题
11 * h3 - 3级标题
12 * h4 - 4级标题
13 * h5 - 5级标题
14 * h6 - 6级标题
15 * hr - 水平分隔线
16 * isindex - input prompt
17 * menu - 菜单列表
18 * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
19 * noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
20 * ol - 排序表单
21 * p - 段落
22 * pre - 格式化文本
23 * table - 表格
24 * ul - 非排序列表

　　

盒子模型

CSS盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

CSS盒子模型的宽度

　　总元素的宽度 = 宽度+左填充+右填充+左边框+右边框+左边距+右边距

　　总元素的高度 = 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

内联元素的盒子模型

1. 内联元素不能设置width和height；
2. 设置水平内边距，内联元素可以设置水平方向的内边距：padding-left，padding-right；
3. 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局；
4. 为元素设置边框，内联元素可以设置边框，但是垂直的边框不会影响到页面的布局；
5. 水平外边距内联元素支持水平方向的外边距；
6. 内联元素不支持垂直外边距；
7. 为右边的元素设置一个左外边距，水平方向的相邻外边距不会重叠，而是求和。