HTML中行内元素块级元素行内块元素

行内元素块级元素

1.当给行内元素定义一个具体的宽高时，是没有用的。只有对于块级元素是有用的。除非在行内元素里面写上内容，那个内容有多大，那就会被撑开有多大
例：
如果是块级元素

<style>#aa {height: 300px;width: 300px;background-color: red;}
</style><body><div id="aa"></div>
</body>

如果是行内元素

<style>#aa {height: 300px;width: 300px;background-color: red;}
</style><body><span id="aa"></span>
</body>

那就毫无显示，如果在里面写上内容

2.块级元素各独占一行，如果改成行内元素，则会变成一行。
如果给行内元素设置外边距，只有左右有外边距，上下是没有外边距的，块级元素设置外边距的都是有用的
设置行元素

<style>span {height: 300px;width: 300px;background-color: red;}#bb {background-color: blue;}
</style><body><span id="aa">阴阳师</span><span id="bb">大天狗</span>
</body></html>

设置外边距

<style>span {height: 300px;width: 300px;background-color: red;margin: 100px;}#bb {background-color: blue;}
</style><body><span id="aa">阴阳师</span><span id="bb">大天狗</span>
</body>

行内元素适合显示具体内容，而块级元素适合做布局

行内块元素

在HTML设置标签为span，在css里面设置display：inline-block，span标签就可以设置宽高和上下margin

<style>span {display: inline-block;height: 300px;width: 300px;background-color: red;margin: 100px;}#bb {background-color: blue;}
</style><body><span id="aa">阴阳师</span><span id="bb">大天狗</span>
</body>

HTML中行内元素块级元素行内块元素相关推荐

块级、行内元素水平垂直居中方法
块级.行内元素水平垂直居中方法块级元素水平垂直居中 // 为目标元素设置以下属性 position: absolute; /*top: 0;*/ left: 0; right: 0; bottom: ...
行转换html,块级、行内、行内元素相互转换
块级.行内.行内元素相互转换 html> 块级.行内.行内块元素相互转换 *{margin: 0px;padding: 0px;} body{background: url(images/5.j ...
html5行级标签,8、html5哪些标签时块级、行内、行内块？2021-01-30
一.块级标签 div.p.h1-h6.form.ul.ol.dl.dt.dd.li.table.tr.td.th.hr.blockquote.address.table.menu.pre HTML5: ...
block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
css元素显示模式（行内、块级、行内块）
1.块级元素显示特点: 1.独占一行(一行只能显示一个) 2.宽度默认是父元素的宽度,高度默认由内容撑开 3.可以设置宽高代表标签: div.p.h系列.ul.li.dl.dt.dd.form.h ...
块级，行内（内联）对比笔记
块级元素: div, p, h1, h2, h3, h4, h5, h6, ul, li, ol, dl,pre,form, table等行内元素: span, td, tr, a, img, in ...
html行内元素转为块级元素,前端面试题-行内元素和块级元素
一.行内元素一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. ...
块元素div转变为行内块元素之后如何消除之间间隙
块元素div转变为行内块元素之后如何消除之间间隙写了三个div,使其变成行内块元素之后,发现,有间隙,哟,我的小天使啊. 最外层父级div宽度width大于三个小div宽度之和父级div: #aa ...
CSS块级、行级、行级块标签、display、div、span
文章目录块级标签行级标签行级块标签 display div 和span 块级标签无论内容有多少,都会占据一行; 默认宽:与父级标签一致; 默认高:0 :或者与内容高度一致. 但是可以通过 wi ...
HTML哪些是块级元素，哪些是行内元素、
块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1> ...

HTML中行内元素块级元素行内块元素

行内元素块级元素

行内块元素

HTML中行内元素块级元素行内块元素相关推荐

最新文章

热门文章

HTML中行内元素块级元素 行内块元素

行内元素块级元素

行内块元素

HTML中行内元素块级元素 行内块元素相关推荐

最新文章

热门文章

HTML中行内元素块级元素行内块元素

HTML中行内元素块级元素行内块元素相关推荐