block和inline的区别,
block就是让其形成块级元素,而且其前后都会有换行符;块级元素,就是一个四方块,可以放在页面上任何地方。
inline的话就是让元素设置为内联样式(行内元素)(对其设置的宽高都没有什么卵用,不产生效果,但是颜色效果还是有的),前后是没有换行符的。行内就是在一行内的元素,只能放在行内。
说白了,行内元素就好像一个单词,块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。
inline-block恰好是两者的综合,即行内块,其属于块级元素,而且没有换行符,在行内形成。
分别对block,inline-block,以及inline分别加上float:left。发现无论是谁,一旦加上float属性,其前后的换行符都会被取消。
display:inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
重要的知识点:
文档流: 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。
互相转换:
行内转换成块级:display:block;
块级转换成行内:display:inline;
块元素(block element)
* address – 地址
* blockquote – 块引用
* center – 举中对齐块
* dir – 目录列表
* div – 常用块级
* 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 – 非排序列表
内联元素(inline element)
* 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 – 定义变量
(参考csdn)