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盒子模型的宽度
总元素的宽度 = 宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度 = 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
内联元素的盒子模型
- 内联元素不能设置width和height；
- 设置水平内边距，内联元素可以设置水平方向的内边距：padding-left，padding-right；
- 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局；
- 为元素设置边框，内联元素可以设置边框，但是垂直的边框不会影响到页面的布局；
- 水平外边距内联元素支持水平方向的外边距；
- 内联元素不支持垂直外边距；
- 为右边的元素设置一个左外边距，水平方向的相邻外边距不会重叠，而是求和。
