[HTML/CSS]盒子模型,块级元素和行内元素

前端之家收集整理的这篇文章主要介绍了[HTML/CSS]盒子模型,块级元素和行内元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

目录

属性就会失效。虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏。今天,群里有朋友问起这个,就趁着学习一下,也算是查漏补缺吧,虽然,谈不上精通,但是了解,还是很有必要的。

标准盒子模型

IE盒子模型

包括padding,margin,border,content,但是ie盒子模型的content包括border和padding。

标准盒子模型

IE盒子模型

选择多了,就要比个哪个好?

加上 DOCTYPE 声明。

显示的不一样了。反之,如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

块级元素有哪些?

标题 标题 标题 标题 标题 标题 标题 标题 标签定义列表项目 不支持框架的浏览器显示文本,于 frameset 元素内部 内容 标签定义段落 标签定义 HTML 表格 标签表格主体(正文) 标签定义表格的表头 //定义表格中的行

内容的长度控制。常见的行内元素有a,em,strong等。

行内元素有哪些?

标签可定义锚 代码文本 内容 效果 键盘文本 标签为 input 元素定义标注(标记 菜单 效果 效果 // 定义变量

删除的文本 标签定义已经被插入文档中的文本

 

  1. 行内元素同一行水平排列。
  2. 块级元素各占据一行,垂直方向排列。
  3. 块级元素可以包含行内元素和块级元素。但行内元素不能包含块级元素。
  4. 行内元素与块级元素属性的不同,主要是盒模型属性上。
  5. 行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

修改样式display属性改变元素是以块级还是行内元素呈现,当display的值设为block时,元素将以块级方式呈现;当display值设为inline时,元素将以行内形式呈现。

显示,我们可以设置display的值为inline-block。

一个例子

{:;:;:;}

参考
百度百科

猜你在找的HTML相关文章