1)display标签:
1,none 隐藏某标签
p{display:none}隐藏某元素,并且不会占用任何空间,也就是说原本占用这个空间的元素,会在原本的页面布局中消失.而visibility:hidden也可以隐藏某一元素,但是他隐藏的元素还是占据这原有的空间,不会消失.2,block
p{display:block}将一个内联标签设置成块集标签.注意:这个内联元素设置成块集元素的时候,内部是不允许有嵌套块集标签.3,inline
p{display:inline}将块集标签设置成内联标签4,inline-block
p{display:inline-block}有区域并且内联,也就是可以有一定的范围,并且可以像内联标签一样,并排显示.有些要用漂浮的地方可以用inline-block.也可以实现并排并且块集2)外边距(margine)和内边距(padding)
margin:用于控制元素与元素之间的距离,margin最基本的用途就是控制元素周围空间的
于空间的间隔,从视觉角度达到相互隔开的目的.
padding:用于控制内容与边框之间的距离.
于border:围绕在内边距和内容外的边框.
于content:盒子的内容,显示文本和图像.
margin-top:100px;margin-bottom:100px;margin-left:100px;margin-right:100px
margin 也可以简写;margin:100px 100px 100px 100px;表示上 右 下 左:一次的顺序是顺时针方向margin:100px 100px 100px;表示的是:上 左右 下margin:100px 100px;表示的是: 上下 ?左右margin:100px;表示4个方向前是100px;
margin:0 auto;
表示的是居中.
3)padding:
用法和margin相同,都是一样的表示边距,但是他表示的是内边距,就是框内元素与元素的边距.
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.outer{ ???????????margin: 0 auto; ???????????width: 80%; ???????} ???????.content{ ???????????background-color: darkgrey; ???????????height: 500px; ???????} ???????a{ ???????????text-decoration: none; ???????} ???????.page-area{ ???????????text-align: center; ???????????padding-top: 30px; ???????????padding-bottom: 30px; ???????????background-color: #f0ad4e; ???????} ???????.page-area ul li{ ???????????display: inline-block; ???????} ??????.page-area ul li a ,.page-area ul li span{ ???????????display: inline-block; ???????????color: #369; ???????????height: 25px; ???????????width: 25px; ???????????text-align: center; ???????????line-height: 25px; ???????????padding: 8px; ???????????margin-left: 8px; ???????????border: 1px solid #e1e1e1; ???????????border-radius: 15%; ???????} ??????.page-area ul li .page-next{ ??????????width: 70px; ??????????border-radius:0 ??????} ??????.page-area ul li span.current_page{ ??????????border: none; ??????????color: black; ??????????font-weight:900; ??????} ??????.page-area ul li a:hover{ ??????????color: #fff; ??????????background-color: #2459a2; ??????} ???</style></head><body><div class="outer"><div class="content"></div><div class="page-area"> ????????????<ul> ????????????????<li><span class="current_page">1</span></li> ????????????????<li><a href="#" class="page-a">2</a></li> ????????????????<li><a href="#" class="page-a">3</a></li> ????????????????<li><a href="#" class="page-a">4</a></li> ????????????????<li><a href="#" class="page-a">5</a></li> ????????????????<li><a href="#" class="page-a">6</a></li> ????????????????<li><a href="#" class="page-a">7</a></li> ????????????????<li><a href="#" class="page-a">8</a></li> ????????????????<li><a href="#" class="page-a">9</a></li> ????????????????<li><a href="#" class="page-a">10</a></li> ????????????????<li><a href="#" class="page-a page-next">下一页</a></li> ????????????</ul></div></div></body></html>css
原文地址：http://www.cnblogs.com/52forjie/p/7568725.html