常见的块状元素与内联元素
2015-12-23 15:09
375 查看
![](http://www.w3cfuns.com/data/attachment/forum/201012/14/163802ykgekveaatftzksz.png)
块状元素排斥其他元素与其位于同一行,内联元素允许其他内联元素与其位于同一行
<div id="div1"> <div id="div2"></div> <div id="div3"></div> <a href="#">可容纳内联元素和其他块状元素</a> <a href="#">Love CSS</a> </div>
#div1{width:300px; height:300px; background:#900;} #div2{width:100px; height:100px; background:#090;} #div3{width:100px; height:100px; background:#009;} a{color:#fff; background:#F93;}
![](http://www.w3cfuns.com/data/attachment/forum/201011/08/222443tubyydsy8wsghrqq.gif)
给内联元素a在css中加上宽度和高度,比如width:100px;height:50px;,看看有什么变化?对,没有变化,把内联元素转化成块状元素加上一个属性display:block就可以了
a{color:#fff; background:#F93;width:100px;height:50px; display:block;}
![](http://www.w3cfuns.com/data/attachment/forum/201011/08/2224441s6jazdsgst1ds3s.gif)
xHTML究竟有多少个标签?就是下面这些,自己数数~
![](http://www.w3cfuns.com/static/image/smiley/comcom/4.gif)
a, abbr, b, base, body, br, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, head, hr, html, i, img, li, link, meta, ol, p, s, script, span, strong, style, title, u, ul, acronym, address, applet,
area, basefont, bdo, big, blockquote, button, caption, center, cite, code, col, colgroup, del, dfn, dir, font, frame, frameset, iframe, input, ins, isindex, kbd, label, legend, map, menu, noframes, noscript, object, optgroup, option, param, pre, q, samp, select,
small, strike, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, var
常见的块状元素与内联元素
块状元素 | 内联元素 |
---|---|
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 - 无序列表 | 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 - 定义变量 |
相关文章推荐
- [程序设计语言-实践之路]读书笔记(1)
- stay hungry ,stay foolish!
- 云计算推动互联网金融技术性变革 打造专业安全的金融解决方案
- asp.net文件压缩,下载,物理路径,相对路径,删除文件
- 存储过程实现报表数据源的利弊分析
- 如何获取(GET)一杯咖啡——星巴克REST案例分析
- 第九章-----jsp标签
- 线上引流压测工具Meteor
- 手机自动化测试:Appium源码之API(2)
- Java数据结构和算法系列1--链表
- Xcode中使用Git进行代码版本控制
- Hibernate 参数设置一览表
- JVM内存区域
- 设计模式C++实现--观察者模式
- #Objective-C 之 省市区 (数组-字典-数组-字典-数组)
- Mongoose使用案例--让JSON数据直接入库MongoDB
- Dreamweaver
- php http请求
- 手机自动化测试:Appium源码之api(1)
- 手机自动化测试:Appium源码之api(1)