• 当前标签:清除浮动

程序开发 H5学习之标签类型、浮动

标签类型: <html> <head> <meta charset="UTF-8"> <title>标签类型</title> <style> span{ color: red; /*display: none; 可以隐藏标签*/ /*visibility: hidden; 也可以隐藏标签 但标签的位置仍然被占据着*/ } strong,i,b,a{ /*display 属性规定元素应该生成的框的类型*/ /*display: block;把行元素变为块元素*/ width: 100px; height: 200px; color: red; /*这类元素会占据尽可能少的空间,并且会一个紧贴一个 从左往右 从上往下排列,它们不受width、height样式的影响 即这些样式对它们无效的 在窗口变化时,它们的大小不变 但会自动换行 它们叫行元素(标签)*/ } img,div,section,p,h1,header,aside{ display: inline; /*width: 400px; height: 200px;*/ border: 1px solid blue; color: palegreen; max-width: 800px; /*这类标签会独占一行,哪怕它们根本用不了右侧的空间 它们受width、height控制 在窗口变化时,不设定宽和高时 它们会跟着变窄或变宽 除非设置了width max-width min-width 它们纵向上也会尽可能少的占用空间 它们叫做块元素(标签)*/ } /*display:inline 即行元素 display:block 即块元素 display:inline-block 即行内块元素*/ /*除了行标签、块标签之外,还有一个标签很特殊 它兼有两者的特点 即在行内,也会受到width和height的控制 这类标签叫做行内块元素(标签) img */ /*还有一些元素不在这些类别中,或是很难分类 如script link title td等*/ </style> <body> <img src="lry.jpg" alt=""> <span>HTML5</span> <strong>从广义上说</strong> <i>前端开发技术的总称</i> <b>包含</b> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JavaScript</a>的最新内容。 HTML5是移动互联网时代的产物。 <div>HTML</div> <p>从广义上说是</p> <section>前端开发技术的总称</section> <h1>包含</h1> <header> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JavaScript</a>的最新内容。 </header> <aside> HTML5是移动互联网时代的产物。 </aside> </body> </html> 浮动: <html> <head> <meta charset="UTF-8"> <title>浮动</title> <style> body{ margin: 0; } ul{ margin: 10px; padding-left: 0; } li{ /*浮动之后标签占据的空间最小化 块元素会让出右侧的空间(float:left) 还可以向右浮动 右浮动时 顺序保持不变的话 可以在外面加一个nav标签 将右浮动应用到nav上 浮动与inline-block不同 inline-block会带来小块空白 除非将标签全部紧贴在一起 或者说是在父标签设置font-size为0 子元素在设置font-size的一个大小 浮动标签会影响后续标签 所以有时要清除浮动*/ /*display: inline-block;*/ float: left; list-style: none; background-color: #eee; padding: 6px 15px; margin-right: 5px; border-radius: 5px; }

2017-04-18 22:35:30 40 0 0
阅读详情
  • 1
前往