块级元素和行内元素

来源：互联网发布：数码宝贝第三部知乎编辑：程序博客网时间：2024/04/29 09:18

当时用一个标签时，第一件事就是弄清楚它是块级元素还是行内元素

块级元素
块级元素会扩展到父元素同宽，body的默认宽度和浏览器窗口一样宽。
这时候你应该理解为什么块级元素会始终占一行了，没错，那就是因为它们始终和浏览器同宽，没有空间再容纳另一个元素了
行内元素
行内元素会收缩包裹其内容，并且尽可能包紧。

1.块级元素

* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易，也是css layout的主要标签！！！* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表

2.行内元素

* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体* img - 图片* input - 输入框* kbd - 定义键盘文本* label - 表格标签* q - 短引用* s - 中划线(不推荐)* samp - 定义范例计算机代码* select - 项目选择* small - 小字体文本* span - 常用内联容器，定义文本内区块！！！* strike - 中划线* strong - 粗体强调* sub - 下标* sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>边框</title>    <style>        body{border:2px solid #000000;height: 500px;margin: 5px;}        /*设定width再设auto会自动居中*/        h4{width: 100px; margin: 20px auto; background-color: #2c71b3; border: 1px solid #23dd27; }    </style></head><body><h4>边框调试</h4></body></html>

这里写图片描述

阅读全文

0 0