<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 块元素:独立成一行(相当于标签前后都设置了br),可以设置宽高,默认宽高100% 文字类块元素:hl-h6 容器类块元素:div table tr td…
一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留. absolute:元素框从文档流完全删除,并相对于其包含块定位.包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样.元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框. fixe…
一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的包含继承区别可以使块级元素创建比行内元素更"大型"的结构. 一般情况下,行内元素只能包含数据和其他行内元素. 二.块级元素列表 1. 非h5块级元素 页面区域划分元素 div p h1~h6 列表相关元素 ul ol li 注意 li是mdn文档中明确说明的块级元素 dl dt dd 表格…
行内元素列表: <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的文本方向 <big>大号字体加粗 <br>换行 <cite>引用进行定义 <code>定义计算机代码文本 <dfn>定义一个定义项目 <em>定义为强调的内容 <i>斜体文本效果 <img>向网页中嵌入一幅图像&…
一.基本块级标签 1.HTML标签的分类:      a.块级标签:显示为块状,独占一行,自动换行.      b.行级标签:在一行中,从左往右依次排列,不会自动换行. 2.h标签(标题标签) h标签:标题标签,显示为黑体加粗!!!      标题标签,共分六种:h1~h6:h1最大,h6最小! <h1>这是h1标签</h1> <h2>这是h2标签</h2> <h3>这是h3标签</h3> <h4>这是h4标签</h…
块元素可以包含块或内联元素,但是内联元素只能包含其他内联元素. <!-- 无效代码! :-( --> <strong> <p>你不应该把p元素放在 "strong" 标签中.</p> </strong> strong:内联元素. p:块元素. 虽然html(超文本标记语言)规范是这么约定的,但实际这样是有效的,可以被浏览器解析. a标签,链接是唯一的例外,它是内联元素,也可以嵌套块元素,但要注意不要a标签嵌套a标签,这样的代码…
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: (也可利用负边距+绝对定位) element { margin: 0 auto; } 2.1垂直居中(元素高度已知): 利用负边距+绝对定位 .outside { width:720px; height: 720px; margin: 0 auto ; position: relative; /*祖先…
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:margin: 0 auto element { margin: 0 auto; } 2:负边距+绝对定位 .outside { width:500px; height:200px; background-color: red; margin:100px auto; position: relative;…
一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: 500px; */ background-color: red; } p{ display: inline-block; } span{ display: block; width: 400px; height: 300px; background-color: blue; } </style>…
如果介绍HTML网页基本标签的嵌套规则,首先要说的就是元素的分类.元素可以划分为块级元素和行级元素,块级元素是什么?它可以独占一行,可以设置宽高度,默认是100%:行级元素与之相反,它的内容决定它的宽高度,至于特殊字符就当成是文字来看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&q…