块级元素常见有：
div、p、ul、li、ol、dl、dt、dd、h1-h6标题、form、table等块级元素的特点：
总是从新行开始宽度默认是容器的100%高度、宽度、外边距、内边距都可以调整可以容纳内联元素和其他块元素。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块级、行内、行内块</title> <style> div{ background-color:red; } </style> </head> <body> <div>块级元素1</div> <p>行内元素</p> <div>块级元素2</div> </body> </html>效果图： 行内元素常见的有：
sub(上标)、sup(下标)、img、i、span、a、em、u(下划线)、del(删除线）等行内元素的特点：
和相邻的元素处在同一行上宽和高的属性值是无效的，但是水平方向的padding和margin可以设置，垂直方向则无效。默认的宽度是本身内容的宽度。行内元素只能容纳文本或者其他的行内元素。（a比较特殊） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块级、行内、行内块</title> <style> div{ background-color:red; } .one{ background-color:pink; } .two{ background-color:blue; } </style> </head> <body> <div>块级元素1</div> <span class="one">行内元素1</span> <span class="two">行内元素2</span> <div>块级元素2</div> </body> </html>效果图： 行内块元素常见有：
input、img、textarea、button、select等行内块元素的特点：
和相邻的行内块元素会在同一行上，但是中间会有点空隙。默认的宽度就是本身内容的宽度。高度、行高、外边距和内边距都能够控制。 <input type="text"> <input type="text">效果图： 转换方式：
display:inline ; //块级标签模式转换为行内标签模式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块级、行内、行内块</title> <style> div{ background-color:red; display: inline; } </style> </head> <body> <div>块级元素1 </div> <div>块级元素2</div> </body> </html>效果图: 2. display:block; //行内标签模式转为块级标签模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块级、行内、行内块</title> <style> span{ background-color:red; display: block; } </style> </head> <body> <span >行内元素1 <span >行内元素2</span> </span> </body> </html>效果图： 3.display:inline-block; //行内标签模式转为行内块标签模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块级、行内、行内块</title> <style> span{ background-color:red; display: inline-block; } </style> </head> <body> <span >行内元素1 <span >行内元素2</span> </span> </body> </html>效果图：
