企业网站建设感想,网站开发什么意思,google搜索引擎下载,教育房地产 网站建设一、背景
初学html#xff0c;接触很多标签
h1、p、span、ul、em等#xff0c;当写出简单的小页面的时候#xff0c;例如仅仅是一篇带有标题的文章#xff0c;标题
h1标签单独一行#xff0c;不管后面有多大的空间…一、背景
初学html接触很多标签
h1、p、span、ul、em等当写出简单的小页面的时候例如仅仅是一篇带有标题的文章标题
h1标签单独一行不管后面有多大的空间
p标签中使用多个
em给某些词做强调但是
em却和
p中的其他内容同一行由此会思考为什么
em和
h1会有这种的不同二、标签的类型显示模式
想要知道为何不同得先了解HTML标签的类型。
HTML标签一般分为块标签和行内标签两种类型也可以称为块元素和行内元素。
上面举例中的
h1标签就是典型的块元素
em标签就是一个行内元素。块元素和行内元素的具体特点如下三、块级元素block-level
块元素会独自占据一整行或者多行可以任意设置其大小尺寸是用于搭建网页布局的必须部分使网页结构更加紧凑合理。
块级元素有以下几个特点
总是另起一行特立独行可以设置其宽度、高度内外边距在不手动设置宽度的情况下宽度默认为所在容器的100%即容器宽度可以容纳行内元素和其他块元素。
常见的块级元素有div/h1~h6/p/ul/table等其中div是最常用最典型的块级元素。
特殊文字类的块级元素不能放块元素例如
p/h1~h6/dt/*块元素div*/div{ width: 200px; /*宽高、外边距、内边距 都有效*/ height: 30px; border:1px solid blue; margin:20px; /* padding:10px;*/ /*此处内边距会引起div宽高的变化为了比较更直观就注释了*/ line-height: 30px;}
使用以上样式给下面块元素div设置
div我是块元素2/divdiv我是块元素2/div
效果图见文末。
四、行内元素inline-level
行内元素也称为内联元素行内元素不占有独立区域其大小仅仅被动的依赖于自身内容的大小例如文字和图片所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。
行内元素的特点
总是和相邻的行内元素在同一行上物以类聚设置宽高无效水平方向的padding和margin属性可以设置但是垂直方向上的无效。默认宽度是他自身内容的宽度。行内元素只能容纳其他行内元素或者文本。
特殊a比较特殊可以放块级元素但是链接里面不能再放链接。
/*行内元素span*/span{ width:200px; /*宽度设置无效*/ height: 100px; /*高度也无效*/ border:1px solid red;}
下面是Html样式
span行内元素1/spanspan行内元素2/spanspan行内元素3/spanspan我是行内元素行内元素行内元素4/span
效果图见文末
五、行内块元素inline-block
普遍的规则里总有那么几个不一样的在行内元素中就有那么几个特殊标签比如
img/input/td,可以给他们设置宽高、对齐属性我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。行内块元素的特点
和相邻行内元素在同一行但是之间会有空白缝隙。默认宽度是他本身内容的宽度。宽度、高度、行高、外边距以及内边距都可以手动设置。样式
/*行内块元素input*/input{ width: 200px; /*宽高均有效*/ height: 30px;}
结构
input typetext value行内块元素1 input typetext value行内块元素行内块元素2行内块元素
综合效果图如下 六、标签显示模式转换display
既然标签有不同的显示模式就会有相应的转换办法以应对各种需要。
display正是我们想要的。
块元素——行内元素 display:inline;
行内元素——块 display:block;
块、行内元素——行内块 display: inline-block;
总结
总结完他们之间的特点更加清晰记得更牢首先在以后遇到当给一个元素设置的宽高无效的时候这就是一个原因使用display即可解决。
本文转载于:猿2048⇛https://www.mk2048.com/blog/blog.php?idiikihkjtitle行内元素和块元素以及行内块元素的特点
