谈谈行内元素和块元素的区别和居中问题
2017-03-13 14:40
246 查看
行内元素,也叫内联元素、内嵌元素等,是众多的行内元素能在一行中显示的元素。行内元素的主要作用是用来添加特殊样式,如<span></span>元素,<b></b>元素,<strong></strong>元素,<i></i>,<sub></sub>下标 <sup></sup>上标等等。
块元素,就是会独占一行的元素,比如<h1></h1>,<p></p>等等。
行内元素和块元素的区别如下:
怎么设置行内元素和块元素的居中方式?
1)行内元素水平居中:
以div为例,要让div里面的文字水平居中,可以设置text-align:center;。
2)行内元素垂直居中:
以div为例,要让div里面的文字垂直居中,可以同时设置height和line-height值相等即可,如:div{height:30px; line-height:30px}
3)块元素水平居中:
以div为例,要让div里面的p水平居中,需要同时设置p的宽度和margin:0 auto;
如:div p{margin:0 auto; width:500px}
注意此处的块级元素p一定要设置宽度
4)块元素垂直居中:
以div为例,要让div里面的p垂直居中,需要同时设置p的宽度和margin-top值;
下面是对div中的p元素作水平居中和垂直居中案例:
块元素,就是会独占一行的元素,比如<h1></h1>,<p></p>等等。
行内元素和块元素的区别如下:
行内元素 | 块级元素 | |
默认开始位置 | 和其他元素都在一行上 | 总是在新行上开始 |
宽度 | 宽度就是它的文字或图片的宽度,不可改变 | 宽度缺省是它的容器的100%,除非设定一个宽度。 |
高度 | 高,行高及外边距和内边距不可改变 | 高度,行高以及外边距和内边距都可控制 |
padding、margin设置 | 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。 | 可以设置 |
display | incline | block |
容纳的元素 | 内联元素只能容纳文本或者其他内联元素 | 它可以容纳内联元素和其他块元素 |
转换 | display:block变成行内元素,或者将display:inline-block变成行内块元素 | display:inline变成行内元素,或者将display:inline-block变成行内块元素 |
1)行内元素水平居中:
以div为例,要让div里面的文字水平居中,可以设置text-align:center;。
2)行内元素垂直居中:
以div为例,要让div里面的文字垂直居中,可以同时设置height和line-height值相等即可,如:div{height:30px; line-height:30px}
3)块元素水平居中:
以div为例,要让div里面的p水平居中,需要同时设置p的宽度和margin:0 auto;
如:div p{margin:0 auto; width:500px}
注意此处的块级元素p一定要设置宽度
4)块元素垂直居中:
以div为例,要让div里面的p垂直居中,需要同时设置p的宽度和margin-top值;
下面是对div中的p元素作水平居中和垂直居中案例:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{width:500px;border:1px solid black;height:500px;} /*DIV父容器设置宽度*/ div p{margin:200px auto; width:100px;height:100px; border:1px solid red;} /*块级元素p也可以加个宽度, </style> </head> <body> <div> <p>这是P</p> </div> </body> </html>
相关文章推荐
- 内敛元素和块元素区别
- 谈谈CSS隐藏元素(display,visibility)的区别
- 两种隐藏元素方式【display: none】和【visibility: hidden】的区别及由此引出的问题
- 块状元素的居中问题
- 开始学前端,从行元素和块元素区别开始(第一篇)
- margin:0 auto与body{text-align:center;}实现元素居中的区别
- 行内元素与块元素的区别
- 元素居中问题汇总
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- 你的元素居中对齐了吗?——关于 'text-align:center' 的问题
- css中元素居中显示的常见问题及解决方案
- chrome body元素不能居中的问题解决
- inline-block元素水平居中问题
- 行内元素与块元素的区别
- 给元素绑定事件的一些区别【多次绑定事件问题】
- 表单元素和文字垂直居中对齐的问题
- 总结最近看到的关于块级元素、居中的问题
- HTML中列表中元素居中问题
- 关于设置元素居中的一些问题
- 网页元素居中问题