顶级元素
包括 html body frameset
内敛(inline)
特点:内联元素高度宽度不可以设置 不会独占一行 依附于块级元素存在
不会换行 不过可以通过 css的display 的inline和float来实现其块级元素
任何不是块级元素的可见元素都是内联元素 例: em img a br li 等 内联元素是 行布局 意思就是 一行的形式进行输出 实验
记过可以证明内敛元素是行布局
块级元素(block)
块级元素是块状 不是按照行显示 块状元素可以再页面的任意位置 块状元素一般容纳其他元素和内联元素
常见的有 p 。 其中 from这个标签比较特殊 只能用来容纳其它标签。
table 标签也是块级标签 。。。。。
块级元素与行内元素最大区别是 块级元素总是新起一行 不过css的使用让两者的差异变小 不在那么死板内联元素通过 display:block;每次都是从新行开始。
文档流
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不
下, 则另起新行再浮动.
内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子
行, 用于摆放子元素.
有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在
IE中浮动元素也存在于文档流中(还让我觉得这样很合理><).
浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从
文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当
一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原
先的空间。
问题 display:inline;可以解决什么问题??
块级元素:* 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 - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本