网页开发学习笔记五: HTML行内块级元素
标签分类
- 块级元素 div h1~h6 p ul li
- 特点
- 独占一行
- 可以设置宽度
- 嵌套(包含)下, 子块元素的宽度(没有定义的情况下)与父块元素宽度默认一致
- 特点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 200px; background-color: orange; } p{ height: 300px; background-color: green; } .box{ width: 100px; } .box p{ width: 300px; height: 100px; background-color: pink; } </style> </head> <body> <div>AAAAA</div> <p>BBBBB</p> <div class="box"> <p>CCCCC</p> </div> </body> </html>
- 行内元素 span a strong em ins del
- 特点
- 在一行上显示
- 不能直接定义宽高
- 特点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* span{ width: 600px; height: 600px; background-color: orange; }*/ .box{ width: 500px; height: 500px; background-color: #888; } .box span{ background-color: red; } </style> </head> <body> <span>AAAAA</span> <a href="#">BBBBB</a> <strong>CCCCC</strong> <div class="box"> <span>DDDDD</span> </div> </body> </html>
- 行内块级元素(内联元素) input img
- 特点
- 在一行上显示
- 可以设置宽高
- 特点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ width: 300px; vertical-align: top; } input{ width: 300px; height: 200px; background-color: blue; } </style> </head> <body> <img src="1.jpg"> <input type="text"> </body> </html>
标签之前的相互转换
- 块级元素 转 行内元素 display: inline;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div,p{ /*块元素转换为行内元素*/ display: inline; width: 500px; height: 500px; background-color: red; text-align: center; } </style> </head> <body> <div>AAAAA</div> <p>BBBBB</p> </body> </html>
- 行内元素 转 块级元素 display: block;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> span{ /*行内元素转换为块级元素*/ display: block; width: 400px; height: 400px; background-color: orange; text-align: center; } </style> </head> <body> <span>CCCCC</span> <span>DDDDD</span> </body> </html>
- 块级元素 和 行内元素 转 行内块级元素 display: inline-block;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div,a,span,strong{ /*块级元素 和 行内元素 转化为 行内块级元素*/ display: inline-block; width: 200px; height: 200px; background-color: orange; text-align: center; } </style> </head> <body> <div>AAAAA</div> <a href="#">BBBBB</a> <span>CCCCC</span> <strong>DDDDD</strong> </body> </html>
