CSS架构
显示与溢出；
1.显示；
display属性；
以display设置隐藏效果和元素类型
<style>
div {
width: 200px;
height: 200px;
}
#qq {
background-color: blue;
}
#yy {
background-color: red;
/*
display: none 设置当前元素为隐藏效果
* 这种方式将元素设置为隐藏后，该元素不会再占有页面空间
通过display属性将元素显示
* block - 将元素设置为块级元素
* inline - 将元素设置为内联元素
* inline-block - 将元素设置为行内元素
*/
display: inline-block;
}
#cc {
background-color: yellow;
}
</style>visibility属性；
以visibility设置，元素显示或隐藏和同时占据原有位置
<style>
div{
width: 200px;
height: 200px;
}
#qq{
background-color: blue;
}
#yy{
background-color: red;
visibility: visible;
<!--设置属性元素可见-->
}
#cc{
background-color: yellow;
}
</style>
</head>
<body>
<div id="qq"></div>
<div id="yy"></div>
<div id="cc"></div>
</body>示意图；
2.溢出；
overflow属性;
以overflow设置溢出的内容，是否剪掉内容和显示滚动条
<style>
#qq{
width: 200px;
height: 200px;
background-color: blue;
overflow: hidden;
/*hedden：将溢出的部分隐藏；隐藏的无法看到
scroll：以一个滚动条显示溢出内容；一直都有滚动条
auto：浏览器自行处理；
如果内容溢出；提供相应的滚动条
如果内容没有溢出；不做任何处理*/
}
</style>
<body>
<div id="qq">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur consequuntur ducimus enim eos error iusto maiores minima minus mollitia necessitatibus nisi obcaecati perferendis quaerat quibusdam suscipit, tempore ullam veritatis voluptatibus.</div>
</body>示意图；
text-overflow属性；
以text-overflow设置为显示的溢出内容，可被剪切，以一个省略号表示
<style>
div{
width: 200px;
height: 200px;
background-color: red;
line-height: 35px;
/*设置行高*/
white-space: nowrap;
/*强制将文本内容占一行*/
overflow: hidden;
/*overflow属性的值必须是hidden(表示超出部分隐藏)*/
text-overflow: ellipsis;
/*显示省略符号（...）来表示被切掉的文本*/
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing .</div>
</body>
</html>示意图；
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。