常见的块元素 :
<div> 标签是最典型的块元素。
块级元素的特点 :
注意:
文字类的元素内不能放块级元素
p和 h1-h6是文字类的块级元素
常见的行内元素:
<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
行内块元素是一种行内元素,只是对一些比较特殊的行内元素的再次分类,实际上官方文档上并没有这样的区分
常见的行内块标签 :
它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点 :
学习元素显示模式的主要目的就是分清它们各自的特点,当我们网页布局的时候,在合适的地方用合适的标签元素。
加上:display:block;
width:200px;
height:100px;
另外你的bg不用这样写。
写成:
background: url(/images/iconsgif) 0px -285px;
就可以了。区别:
1块级元素可以设置宽高,行级元素不能设置宽高(只能根据文字来设置,比较特殊的是img\input是可以设置宽高);
2块级元素是独占一行,行级元素不行;
转化:
1display:inline;//将块级元素转化为行级元素,这时块级元素设置的宽高无效
2display:block;//将行级元素转块级元素,这时原本的行级元素会变成块级元素独占一行,同时可以设置宽高
3display:inline-block;//将行级元素转块级元素,不会独占一行,可以设置宽高
这是因为超链接默认是行内元素,用CSS设置起高度是不起作用的,需要将其强制转换成块级元素,即在超链接的样式里加上display:block;然后就可以设置高度了,不过别忘了还要设置相应的宽度,不然它会占满一行。另外如果你的超链接是水平放置的话,需要加上float属性,加上float属性后,元素直接就转换成块级元素,所以display就可以省去不写了。
CSS中常见的块级元素:<div>、<p>、<h1><h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>。
块级元素的特点:
每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。元素的高度、宽度、行高和顶底边距都是可以设置的。元素的宽度如果不设置的话,默认为父元素的宽度。
行级元素的特点:
可以和其他元素处于一行,不用必须另起一行。元素的高度、宽度及顶部和底部边距不可设置。元素的宽度就是它包含的文字、的宽度,不可改变。
:行级元素与块级元素的转换
可以在css样式中用display:inline将块级元素设为行级元素,同样,也可以用display:block将行级元素设为块级元素。(资料参考:网页链接)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)