一.标签
| 块级标签 | h1 p div ul ol li | |
| 行内标签 | a strong b em i del s ins u span | |
| 行内块标签 | img input td |
块级元素的特点:
1.一人独占一整行或者多行可以对其设置高度,宽度对齐等属性,常用于网页布局结构的搭建
常见的块元素{ h1-6 p div ul ol li
其中 div 是最典型的元素
css+div的布局模式
块级元素的特点:
1.总是以新行开始
2.高度,行高,外边距以及内边距都可以控制
3.宽度默认是容器的100%
5.可以容纳行内元素和其他块元素
行内元素
不占独立的区域仅靠自身的字体大小和图像尺寸支持结构
一般不可以设置宽度,高度,对齐等属性,常用于控制页面中文本的样式
行内元素的特点
1.相邻行内元素在一行上,
2.高宽无效,但在水平方向的padding和margin可以设置
垂直方向无效
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或者其他行内元素. a特殊
span最典型的行内元素
常见的行内元素:a strong b em i del s ins u span
块级元素独占一行有宽高,行内元素一行只能放多个无宽高
行内块元素
常见的行内块元素:
img input td
行内块元素:一行放多个.可以改宽高
行内块元素的特点:
1.和相邻行内元素(行内块)在一行上,但是之间会有空白间隙
2.默认宽度就是它本身内容的宽度
3.高度和行高,外边距以及内边距都可以控制
标签的模式 可以相互转换
二.标签之间相互转换
div{display:inline;//将块级元素转为行内元素}div{display:block;//将行内元素转为块级元素}div{display:inline-block;//将块级元素转为行内块级元素 缺点是中间有缝隙}
三.总结
网页布局就是摆盒子的过程
行内,行内块元素可以作为文字对上级元素进行居中对齐 使用 text-aligin时候
line-height:50px; 行高等于盒子高度,可以让单行文本垂直居中