常用CSS代码

 /*为便于计算，将所有元素设为盒模型，这样你设一个div宽100px时包含内外边距和边框，否则只包含框内宽*/
* {  box-sizing: border-box; }

清除标签默认样式的代码，主要是这些元素会自带一些宽度高度及风格，你用起来很难受
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
body {font-size: 12px; color: #000000; font-family: 宋体; background-color: #d6dff7; margin: 5px;}
ul { list-style: none; }
img { border-style: none; }

插入表格常用属性
table{width: 100%; border-collapse: collapse; }    /*collapse是边框合并，默认每个单元格都有边框*/ 
th,td{border: 1px solid #FF6633; text-align: left;} /*缺省边框与对齐*/
th{background-color: #ffedc7;}  /*缺省表头行背景颜色*/
tr{background-color: #C7EDCC;}  /*缺省行背景颜色*/
tr:hover{ background-color: #ffedc7;}   /*鼠标悬停时行背景颜色*，用以修改鼠标移到行改变该行颜色/
<th style="width:80px">分类:</th> //给每行设置不同宽度使用内联样式，也可用.col-1 {width: 100px;}设置第一列宽

超链接常用属性
a {text-decoration: none;color: #000000;transition: all 0.3s ease;}/* 移除链接默认下划线 颜色 并添加过度效果*/
a:hover {font-weight: bold;text-decoration: underline;color: #428eff;}/* 鼠标悬停时添加下划线,加粗，并改变颜色 */

ul>li横向常属性
.top{display: flex;border: 1px solid #000; justify-content: space-between;padding: 5px;} /*ul外层div*/
.link ul{list-style-type: none; padding: 0; margin: 0; display: flex;}
.link li{margin-right: 8px}

1. 边框显示出不来：
边框除了设置粗细，还要边框样式，否则不显示header{border: 10px solid;}，少了solid将不会显示，有时还要设置颜色免和背景色重复

2. 元素之间有空白，不紧贴一起，但设置好边框精细及样式就边到一起了。 已设置margin:auto,padding:0,border:0
原因1：没有设置元素的高度或行高过大，设置好高度就正常了height: 100px;
原因2：如果相领的元素中有ul元素，需要把ul的margin设为auto或0，nav ul{list-style: none;margin: auto; }
原因3：没有分别为内外层的元素设置高度，外层元素高度要大2px

3. 子元素不能将父元素撑开，而是浮动到父元素外面去了
原因：给父元素设置了固定的高度
 div{height: 100px;background-color: rgb(127, 80, 255);}  //这里给所有div设置了固定的高度
 .mainleft{width: 75%;background-color: chartreuse;border: 1px salmon solid;} //里面这个.mainleft无论实际多高，都不会撑开父元素的高了
 
3.1 子元素不能将父元素main撑开，而是浮动到父元素外面去了，父元素设边框后显示为一条直线 
 main:after {content: ""; display: table; clear: both;} //在父元素加上这句就可以了
 
4. 父元素中的两个子元素不能显示为一行，后面那个div跑到下一行去了，已将两子元素设为了浮动
 原因：两子元素的宽度加起来超过了父元素的宽度，子元素的宽带包括margin,pudding,border
   main{width: 1366px; margin: auto;background-color: blue;}
        aside{width:20%;  float: left; border: 1px solid red;}
        .right{width:80%;  float: left;border: 1px solid forestgreen;} //把这里的width改为70%，或者加上*{box-sizing:border-box}

5. 将所有ul下的li去掉小圆点横排，只需设ul{list-style: none;} li{float: left;}就要以了
 #right ul li{ float:left; height: 210px;width: 310px;} //我出错原因，只需将这里的#right改为.right即可，因为right是class
 
6. 元素设置text-align: center;后里面的文本没有居中
 原因1：父元素没有设置高度，就无法居中，
 原因2：元素中还有子元素，要在父元素上设，父的父元素设是没有用的
 原因3：父元素设置的宽度没有生效，.pagetitle{width: 1300px;}}，如父元素最后多个右花括号导致设置不能生效
       
 
7. 元素的垂直居中可以设置padding属性，如：偏上就设置pudding-top，
7.1  div中ul下li水平与垂直居中详见："D:\site\w80\html5CommonCode\div中ul下li水平与垂直居中.html" 

8. 边框相邻或重合是不加粗，方法一：margin-bottom: -1px; //该方法仅chrome浏览器有效，方法二：border-top: 0px;//此方法好，把相领的边设为0

9. 给图片按钮单个元素设置属性，整行改变 <input type="image" class="inputSub" src="img/search.gif"/>
 解决方法是把这些元素放在表格中

10. div中放的table不能居中， 解决方法是给table设置样式，将margin设为auto：<table style="margin: auto;"> 或者给元素下的table设置属性.footl3 table{margin: auto;}

11. ul的padding不生效，如果通过ID方式定义了下面的ul的属性，再通过下面class定义时是不会生效的，继承自id的优先级更高
  #newmain ul{padding: 0 5px;} 
  .more ul{padding: 50px;} //这里不会生效，因为more为newmain下面的div，当在上级id的newmain定义了ul的属性，下面的class定义ul属性时不会生效