行内元素，块状元素

来源：互联网发布：replace函数和数组函数编辑：程序博客网时间：2024/05/17 22:44

块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table

行内元素：span, strong, em, br, img , input, label, select, textarea, cite,

区别：

1）块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化

2）块级元素可以设置 width, height属性，行内元素设置width, height无效

【注意：块级元素即使设置了宽度，仍然是独占一行的】

3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

*注意内联元素和替换元素的区别

例子：

<!DOCTYPE html><html><head><span style="white-space:pre"></span><title></title><span style="white-space:pre"></span><style type=""> a{ <span style="white-space:pre"></span>height: 200px ; //无效 <span style="white-space:pre"></span>width: 200px;   //无效 <span style="white-space:pre"></span>margin-top: 100px; //无效 <span style="white-space:pre"></span>margin-left: 100px; //有效 <span style="white-space:pre"></span>background: green; }<span style="white-space:pre"></span></style></head><body><a href="#">hahahahaha</a></body></html>

0 0