section+display
Posted purple-windbells
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了section+display相关的知识，希望对你有一定的参考价值。
<section>标签
定义和用法：<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
div和section的区别
div
定义：文档中的分区或节。
使用场合：作为布局以及样式化时使用（此时三者并无区别,但div更常用）
提示：<div> 是一个块级元素，浏览器通常会在 div 元素前后放置一个换行符。
section
定义：文档中的节，一般是具有标题性的。
使用场合：文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
提示：section不仅仅是一个普通的容器标签，这区别与div标签。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。
display属性
http://www.w3school.com.cn/cssref/pr_class_display.asp
其中最为常用的是：
none:此元素不会被显示
block此元素将显示为块级元素，此元素前后会带有换行符
inline默认。此元素会被显示为内联元素，元素前后没有换行符
如果做项目需要单页面切换，就要使用section+display来完成
比如一个简单的例子
CSS：
#total { width: 650px; height: 830px; background-color:gold; margin:0 auto; } #part1{ width: 650px; height: 830px; background-color:blue; margin:0 auto; } #part2{ width: 650px; height: 830px; background-color:yellow; margin:0 auto; }
简单的JS控制display：
function showpart1(id) { id.style.display="block"; total.style.display="none"; part2.style.display="none"; } function showpart2(id) { id.style.display="block"; part1.style.display="none"; total.style.display="none"; } function showtotal(id) { id.style.display="block"; part1.style.display="none"; part2.style.display="none"; }
body部分section使用：
<body> <section id="total"> <center><button type="submit" onclick="showpart1(part1)" >total</button></center> </section> <section id="part1"> <center><button type="submit" onclick="showpart2(part2)" >part1</button></center> </section> <section id="part2"> <center><button type="submit" onclick="showtotal(total)" >part2</button></center> </section> </body>
效果图如下：
点击按钮实现一个页面的不同内容切换
以上是关于section+display的主要内容，如果未能解决你的问题，请参考以下文章
CSS3 display：flex和display：box有啥区别