HTML需要注意的地方

1.p和< h1 > -> < h6 >标签内不可以再使用如div标签的块级元素
2.a链接里面不能再放a链接
3.特殊情况链接< a >里面可以放块级元素，但是给< a >转换一下块级模式最安全
4.行内块元素：< img /> < input /> < td />,可以直接设置宽高，又可以在一行显示
5.background-img常用于logo或者装饰性的小图片或者超大的背景图片，background-img:none;background-img:url();
6.background-position:x y;后面可以是方位名词(top left right center）或精确的像素px,或百分比，大图一般用background-position:center top;background-position:20px 50px;如果有2个值那么肯定是距离左，上，如果是1个值，那么就是距离左，居中。
7.background-attachment:scroll|fixed; 背景图片随着滚动条滚动还是固定
8.background:背景颜色 背景图片 背景平铺 背景图滚动 背景图片位置
9.背景颜色半透明：background:rgba(0,0,0,0.3); 也可以background:rgba(0,0,0,.3); 把0省去，alpha的值在0-1之间
10.border-collapse:collapse; 表示相邻边框合并在一起。
11.做导航菜单最好用padding更合理
12.孩子和父亲的宽度一样宽，一般就不用定义孩子宽度的样式了，那么padding的值不会影响孩子的宽度，如果定义了孩子的宽度，则会影响孩子的宽度。
13.让块级元素水平居中用margin:0 auto;需要注意必须设置宽度。让行内元素或行内块元素水平居中只需要给父级元素加上text-align:center;
14.相邻块元素垂直外边距的合并：2个盒子，上面的盒子写margin-bottom:20px;下面的盒子写margin-top:30px;但最终的间距不是50px,而是30px,也就是说相邻块元素垂直外边距的合并是取2个值中的较大值。所以尽量给一个盒子添加外边距。
15.嵌套块元素塌陷，子级在父级里面，给父级定义margin-top,然后再给子级定义margin-top,本意是想让子级内部距离父级一定距离，但结果是整体下移2个值中的最大值。解决方法是可以给父级加一个border:1px solid transaction;(2)给父级加一个padding:1px;(3)给父级添加overflow:hidden;
16.一个正方形设置为原形(宽度和高度的一半)：border-radius:50%;一个矩形设置为一个圆角矩形（设置为高的一半）：border-radius:高/2;
17.盒子阴影：box-shadow:水平阴影位置（允许为负值，必选），垂直阴影位置（允许为负值，必选），模糊距离(可选），阴影的尺寸（可选），阴影的颜色（可选），内部还是外部阴影，默认是外部，不能写外部，内部阴影是inset。如box-shadow：10px 10px 10px 10px rgba(0,0,0,.3);
18.文字阴影:text-shadow:水平阴影位置（允许为负值，必选），垂直阴影位置（允许为负值，必选），模糊距离(可选），阴影的颜色（可选）; 如text-shadow:5px 5px 6px rgba(0,0,0,.3);
19.相对定位（自恋型），以自己原来的位置偏移定位，如position:relative;top:100px;left:100px;，自已原来的位置还在，其他的盒子不会占有
20.绝对定位（拼爹型），如果没有祖先元素或祖先元素没有定位，则已浏览器为准定位。如果祖先元素有定位（相对，绝对，固定定位），则是已最近一级的有定位祖先元素为参考点移动位置。绝对定位是不占有原先的位置(脱标)，子绝父相，子用绝对定位，父用相对定位，因为父级需要占有位置，子级不需要占有位置。
21.固定定位：position：fixed；已浏览器为准，不占有原来的位置。固定在版心的右侧位置，（1）固定定位，距离左侧一半距离，走到浏览器中间的位置，left：50%（2）再利用margin-left，距离版心宽度的一半。position:fixed;left:50%;margin-left:版心/2px;
22.display:none;是隐藏，自己原有的位置没有了。visibility:visible;可视，visibility:hidden;隐藏，自己的位置还在。
23.精灵图：background：url（）no-repeat X轴 Y轴；一般精灵图都是负值。左和上是负值，右和下是正值。
24.字体图标
25.取消表单轮廓线：input,textarea {oputline: none; } 禁止textarea拖拽：textarea {resize:none;}
26.图片或表单（行内块元素）和文字垂直对齐，只需要给图片或表单（行内块元素）使用vertical-aligin:middle;就可以了,默认是baseline基线，其他还有top,bottom;
27.一个区域内的图片底部会留一个空白缝隙，是因为图片默认是vertical-align:baseline,解决方法：将vertical-align设置为top,bottom，或middle，另一种方法：将图片转化为块级元素img{ display:block;}
28.单行文字溢出使用省略号代替：white-space:nowrap;overflow:hidden;text-overflow:ellipsis; 就可以了。多行文字溢出使用省略号：overflow:hidden;text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2,-webkit-box-orient:vertical;
29.给一个区域中加几个浮动的盒子，并且每个盒子都有一个边框，但是如果浮动的话，盒子与盒子的交界处的边框会是2像素，解决方法：给盒子添加一个margin-left:-1px;这样就好了，但是如果鼠标经过的时候想让边框变一个颜色，最后一个是可以的，但其他的盒子右边框会看不见，解决方法：（1）如果当前没有定位，当鼠标经过的时候，设置position:relative;相对定位会压住其他标准流(2)如果盒子有定位，则加z-index:2;提高盒子的层级
30.文字会围绕浮动元素，一个区域内左边一个图片右边一些文字，不需要让图片和文字都浮动，只需要让图片左浮动，文字不用浮动就会围绕在图片周围。
31.分页的效果,需要把a链接转化为行内块元素是比较合适的，因为行内块儿元素在一行显示，并且中间有一点空白缝隙，而且只要给父级添加text-align:center,那么子级都会居中展示。< div> < a>1< /a >< a>2< /a > < /div>
32.直角三角形：border-color:transparent red transparent transparent;border-style:solid;border-with:100px 50px 0 0 ;
33.:first-child{ } 第一个孩子，:last-child{}最后一个孩子，:nth-child(n){} 第n个孩子。n可以是固定数，也可以是关键字（even偶数odd奇数）实现隔行变色效果。，n还可以是公式，:nth-child(n){} 里面的字母必须是n,这个意思是所有的孩子。2n意思是选择了偶数等价于even，2n+1是奇数等价于odd,
5n意思是第5个第10个以此类推设置样式，n+5意思是从第5个到最后，-n+5意思是前5个
34. e:nth-of-type{} 对父元素里面指定的子元素进行排序选择，先去匹配e,再根据e找第n个孩子。
35.box-sizing:border-box; 不用计算margin,border蹭出的宽度
36.css3处理图片模糊 filter: blur(10px); 不模糊0,数字越大越模糊.注意有单位px
37.计算盒子的宽度calc函数, width: calc(100px + 50px); 如果想让一个盒子里面的一个盒子始终距离右边一定距离可以 width: calc(100%- 50px);
38.css3transition,常用transition: all 2s; transition:属性(all 是所有属性) 使用时间 运动曲线 延迟时间后产生效果
40.引入icon图片,必须放在根目录下< link rel=“shortcut icon” type=“favicon.ico” href=“img/pic.ico”>可以把图片转化为ico的网址bitbug
41.font-size:0; 或者text-indent:-999px;overflow:hidden文字就看不见了