【原创】网页CSS样式设置的一些规则
一、常用的几种居中对齐
1、方框居中（左右自动，方框居中）
【方框】左、右边界：自动（margin-left: auto; margin-right: auto;）
注：通常合写为（margin: 0 auto;），其中auto为左、右边界，而0(px)为上、下边界，可根据需要设置
2、文字水平居中
【区块】文本对齐：居中（text-align: center;）
注：也可设置文本左对齐（text-align: left;）或文本右对齐（text-align: right;）
3、单行文字垂直居中（两高相等，垂直居中）
【方框】高度：40px（height: 40px;）
【类型】行高：40px（line-height: 40px;）
注：必须是单行文字！多行文字只设行高，不设高度
二、标题、段落样式的设置（共4类8项）
(1)初始化，去掉上下的空行
【方框】边界：0、填充：0（margin: 0; padding: 0;）
(2)单行文字垂直居中（不是单行时，只设行高不设高度）
【方框】高度：40px（height: 40px;）
【类型】行高：40px（line-height: 40px;）
(3)文字的基本设置（根据需要，可省略）
【类型】大小：16px（font-size: 16px;）
粗细：正常（font-weight: normal;）
颜色：#999（color: #999;）
(4)文字的对齐方式（默认为左对齐，还可设置为居中或右对齐）
【区块】文本对齐：居中（text-align: center;）
三、列表样式的设置（分两部分）
1、列表ul的设置（初始化，共3项）
【方框】边界：0、填充：0（margin: 0; padding: 0;）
【列表】类型：无（list-style-type: none;）
2、列表项li的设置（文字类）
(1)单行文字垂直居中
【方框】高度：40px（height: 40px;）
【类型】行高：40px（line-height: 40px;）
(2)文本基本设置（根据需要，可省略，图片列表不需要）
【类型】大小：16px（font-size: 16px;）
粗细：正常（font-weight: normal;）
颜色：#999（color: #999;）
(3)排成一行（可选项）
【方框】宽度：100px（width: 100px;）
浮动：左对齐（float: left;）
四、超级链接样式的设置
超级链接有四种状态：正常状态（未访问）、已访问状态（已访问）、鼠标指向链接时（悬停时）、鼠标点击链接时（点击时），这四种状态通常分为两组：静态（未访问、已访问）、动态（悬停时、点击时），我们在设置超级链接的样式时，通常也需要设置两次。
1、文字超链接的一般状态（a）（或a:link,a:visited）
【类型】大小：16px（font-size: 16px;）
粗细：正常（font-weight: normal;）
颜色：#999（color: #999;）
修饰：无（text-decoration: none;）(去掉下划线)
2、文字超链接的悬停状态（a:hover）（或a:hover,a:active）（只需设置和上面不同的）
【类型】颜色：#00F（color: #00F;)
3、图片超链接的样式（a img）
【边框】宽度：0（border-width: 0;）(去掉图片边框)
4、导航类超链接（#nav a）
(1)显示为块 + 浮动左对齐
【区块】显示：块（display: block;）
【方框】浮动：左对齐（float: left;）
注：浮动左对齐仅限横向导航，纵向导航不需要浮动
也有设置为内联块的
【区块】显示：内联块（display: inline-block;）
(2)文字基本设置：
【类型】大小：16px（font-size: 16px;）
粗细：粗体（font-weight: bold;）
颜色：#999（color: #999;）
修饰：无（text-decoration: none;）(去掉下划线)
(3)通过宽度和对齐生成块状效果
【方框】宽度：100px（width: 100px;）
【区块】文本对齐：居中（text-align: center;）
(4)单行文字垂直居中
【方框】高度：36px（height: 36px）
【类型】行高：36px（line-height: 36px）
(3)(4)项也可使用填充生成块状效果
【方框】填充：上下10px、左右20px（padding: 10px 20px;）
(5)块状圆角效果
添加属性：border-radius: 5px;
(6)添加鼠标悬停效果（#nav a:hover）
【背景】背景颜色：#00F
【类型】颜色：#FFF
五、大小相同，均匀排列
1、外框
【方框】宽度：1000px、高度：570px（width: 1000px; height: 570px;）
左、右边界：自动（margin-left: auto; margin-right: auto;）
2、内框（左上边界，均匀排列）
【方框】宽度：320px、高度：270px（width: 320px; height: 270px;）
边界：上、左各10px（margin-top: 10px; margin-left: 10px;）
浮动：左对齐（float: left;）
注：外框宽度=内框宽度*列数+左边界值*(列数+1)
外框高度=内框高度*行数+上边界值*(行数+1)
如：1000px = 320px*3 + 10*(3+1)
570px = 270px*2 + 10*(2+1)