标签类型:
<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; } /*nav{ float: right; }*/ /*清除浮动的常用技巧*/ .clearfix{ clear: both; } /*ul:after{ content: ''; display: block; clear: both; }*/ </style> <body> <!--<nav>--> <ul> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> <li>PHP</li> <li>Java</li> <li>.NET</li> <li>NodeJs</li> </ul> <div class="clearfix"></div> <!--</nav>--> <h1>标题</h1> <h2>小标题</h2> </body> </html>
浮动练习:
<html> <head> <meta charset="UTF-8"> <title>浮动练习</title> <style> body{ margin: 0; } footer{ width: 100%; height: 60px; box-shadow: 0 0 2px #333; position: fixed; bottom: 0; } section{ height: 60px; width: 25%; float: left; text-align: center; border-right: 1px solid #999; font-size: 40px; box-sizing: border-box; } section:hover{ /*设置文字阴影*/ text-shadow: 0 0 2px #333; } </style> <body> 页面内容。。。 <footer> <section>♠</section> <section>♣</section> <section>♥</section> <section>♦</section> </footer> </body> </html>