网站设计公司发展,大连市房屋管理局官网,放单网站建设,域名备案查询网站备案一、显示模式#xff1a;
网页中HTML的标签多种多样#xff0c;具有不同的特征。而我们学习盒子模型、使用定位和弹性布局把内容分块#xff0c;利用CSS布局使内容脱离文本流#xff0c;使用定位或弹性布局让每块内容摆放在想摆放的位置#xff0c;让网站页面布局更合理、…一、显示模式
网页中HTML的标签多种多样具有不同的特征。而我们学习盒子模型、使用定位和弹性布局把内容分块利用CSS布局使内容脱离文本流使用定位或弹性布局让每块内容摆放在想摆放的位置让网站页面布局更合理、有条理。
1.1 标签分类
1.1.1 块状元素(block-level) 通常都会独自占据一整行或多整行可以对其设置宽度、高度、对齐等属性常用于网页布局和网页结构的搭建 h1~h6、p、div、ul、ol、li等其中div标签是最典型的块元素。 独占一行且自由设定 块级元素的特点 1总是从新行开始【独占一行】 2高度行高、外边距以及内边距都可以控制。【可以自由设定】 3宽度默认是容器的100% 【即可来源于父级】 4可以容纳内联元素和其他块元素 1.1.2 行内元素 (又叫内联元素inline)
一行共存多个;默认尺寸由内容撑开;加宽高生效 行内元素内联元素inline不占有独立的区域仅仅靠自身的字体大小和图像尺寸来支撑结构一般不可以设置宽度、高度、对齐等属性常用于控制页面中文本的样式。 常见的行内元素有 a、strong、b、em、i、del、s、ins、u、span等
其中span标签最典型的行内元素。 行内元素的特点 一行共存多个;默认尺寸由内容撑开;加宽高生效 1和相邻行内元素在一行上。 2高、宽无效但水平方向的padding和margin可以设置垂直方向的无效。 【不可自由赋值宽高】 3默认宽度就是它本身内容的宽度。 4行内元素只能容纳文本或则其他行内元素。a特殊 1.1.3 行内块状元素inline-block
宽高属性生效;宽高默认由内容撑开 在内联元素中有几个特殊的标签 img /、input /、td 可以对它们设置宽高和对齐属性称它们为内联块状元素。 内联块状元素的特点 1和相邻行内元素行内块在一行上,但是之间会有空白缝隙。 有间隙 2默认宽度就是它本身内容的宽度。 3高度行高、外边距以及内边距都可以控制。 宽高属性生效;宽高默认由内容撑开 1.1.4 转换display HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。 三者是可以互相转换的使用display属性能够将三者任意转换 (1)display:inline;转换为行内元素 (2)display:block;转换为块状元素 (3)display:inline-block;转换为行内块状元素 例如
块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素从而使 div 元素具有内联元素特点。
div{display:inline;}
......
div我要变成内联元素/div 单行文字垂直居中的代码 解决方案文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中。
