1.行内元素或行内块元素水平居中给其父元素添加text-align:centter即可 比如<div text-align=center>许家伟</div>
2解决嵌套父子元素塌陷问题 在父元素里面加overflow：hidden
3.margin:10 20 30相当于margin 10 20 30 20右边替代左边 margin:10 20 代表上下是10 左右是20 margin:10代表上下左右都是10
4.div里面使用box-shadow:a b c d color outset不能出现(默认不写 内阴影是inset)可以实现阴影效果;a代表左右偏移 b代表上下偏移 c代表模糊度 d模糊大小
5.常用块元素:div h1~6 hr p ul ol dl form table 行内元素span a i em 行内块元素img input
三中布局:标准 浮动:让多个div排成一行 标准流是让div纵向排列，浮动是让div横向排列
6.浮动特性 浮动元素会脱离标准流1.会脱离标准流的控制移动到指定位置，脱标。 2.浮动的盒子不再保留原先的位置。
7.span本身没有width height但是加了float:left后就有宽高了
8.任何元素加了浮动后都具有行内块特性。
9.1、!important，加在样式属性值后，权重值为 10000 2、内联样式（在标签里），如：<p style=""></p>，权重值为1000 3、ID选择器，如：#content，权重值为100 4、类(class)，伪类和属性选择器，如： content、:hover 权重值为10 5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1 6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0 兄弟选择器：找到指定的元素后面的所有满足条件的兄弟元素 相邻选择器：选择紧接在某个元素后的元素，并且二者具有相同的父级元素
10.清除浮动，父级元素自动跟浮动元素保持一样高。 1.隔墙法:在浮动元素末尾添加一个新的空标签里面添加样式clear:both 而且必须是块级元素 2.给父级元素加overflow:hidden 3.clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{ *zoom:1; } 推荐使用(大厂）
4.clearfix:before,.clearfix:after{ content:""; display:table; }
.clearfix:after{ clear:both; }
.clearfix{ *zoom:1; }(小米 腾讯) 也是在父盒子上添加
11.css属性书写顺序 1.布局定位 2.大小 3. 颜色 字体。。 4.其他
12.实际开发中a不是直接写，而是用li+a来写
13.定位 ：：让盒子自由自在的移动或者固定在一个位置 定位模式static relative(相对于原来的位置移动 位置会保留 不像浮动那样) fixed absolute(位置不会保留) 边偏移属性top left right bottom
relative 偏移后保留的位置还是以标准流保留。 相对定位会压住标准流盒子，定位盒子以及固定的盒子。
absolute三特点:1.往上一直找直到找到最近一级带有定位的父元素移动位置（如果父元素是标准流或者浮动流 那么还是以浏览器为准定位）来移动的。2.如果没有带有定位的父元素就以浏览器对准。
3.不再占由原先的位置。 fixed是固定于浏览器可视区的一个位置，它是以浏览器的可视窗口定位，不占有原先的位置(跟绝对定位一样)。
sticky:相对定位与固定定位的混合。 1.它是以可视窗口为参照物 2.它保留位置 3.必须加top bottom。。其中一个才有效。
14.定位：子绝对父相对。
15.定位堆叠顺序 z-index默认是auto （不能加单位）只有定位盒子才有。数值最大的在最上显示。
16.绝对和固定定位的盒子不能通过margin 0 auto来水平居中，相对定位的可以。1.行内元素添加绝对定位或者固定定位可以直接设置宽度和高度。2.块级元素给绝对或者固定定位可设置大小，不给宽度高度默认是内容大小。
17.浮动的元素的不会压住下面标准流的文字。 绝对或者固定定位会压住下面标准流的文字。
18.元素的显示与隐藏。例如广告关了后重新刷新后就会重新显示。display:none;隐藏元素，隐藏后位置也不再保留。display:block显示元素。 visibility:visible元素可视，visibility:hidden元素隐藏，但是位置保留。
19.overflow:visibl默认。不像显示就是overfl:hidden。 auto是超过自动显示滚动条，不超出不显示。
-------------------------------------------------------------------------------- CSS高级技巧---------------------------------------------------------------------------------
1.精灵图 用background-position定位 2.字体图标 看自己的项目例子
3.css三角
4。鼠标样式：style=“curso:move”鼠标移动样式 cursor:text鼠标文本样式 cursor:no-allowed鼠标禁止样式。cursor：pointer鼠标点击样式。 表单去掉默认边框。outline:none；
5.CSS vertical-align设置垂直对齐，只能用于行内元素和行内块元素。vertical-align：bottom是以底线（图片默认是和文字基线对齐）对齐 middle是中线对齐(垂直居中) top是顶线对齐 不是写在父元素里而是写在同级元素里。 例如<div><img vertical-align：midd>你好</div> 图片就会和文字对齐 float会使vertical-align失效。
图片底册会有空隙，就用verti-bottom
relative 偏移后保留的位置还是以标准流保留。 相对定位会压住标准流盒子，定位盒子以及固定的盒子。
记住！！！！浮动不会压住文字。
margin-left把自己盒子向右推， margin-right把相邻盒子向右推 margin-top把自己盒子向下推 margin-botton把相邻盒子向下推 padding同理。
行级元素没有margintop marginbottom 要是用这两个要先转换成line-block
6.CSS三角强化
width: 0;
height: 0；
border-left: 0px solid green;
border-right: 10px solid #ffffff;
border-bottom: 0px solid blue;
border-top: 20px solid transparent;-------直角三角形代码
7.html5新增特性
<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部8.CSS3新加的属性选择器 <input type="text" value=""> input[type=text]{} 重点 务必掌握！！！。 类选择器 伪类 属性选择器权重都是10
nth-child会把所有盒子都排序号。
伪元素！！重点 element::before在元素内部的前面插入 element::after在元素内部的后面插入 权重是1 element::before{ 必须要有content:""; }
9.CSS3盒子模型。box-sizing：border-box盒子大小就是宽度和高度。不会被padding撑大。 CSS3过渡，transition 谁做过渡给谁加。 transition:变化的属性 变化的时间 变化曲线 何时开始 如果想用多个属性用，隔开。如果想要所有的属性变化那么就用all。
10.网站在搜索引擎中的SEO优化。 title description keywords
11.网站logo的制作 div>h1>a（为什么要加h标签？ 为了网站的SEO优化） a里面要写网站名字 但是要font-size:0 并且要加title设置为网站名。
12.轮播图的时候不要直接在div里面加img，而是在div>ul>li里面加img。
13.height在任何情况下都不能继承。
14.行高line-height大于高度那么文字偏下。
15.当图片压过了盒子，或者盒子内容超过了盒子，那么记得用overflow:hidden。
16.transform:translate(axp,bxp)的移动不会影响其他盒子的位置。translate对行内元素无效。translate 50%移动时按照自己本盒子的大小来移动的。 transform:rotate(45deg);//旋转多少度 transform-orign:left bottom;是按照左下角旋转 transform-orign:50% 50%相当于center cente； Transform-orign：xxpx xxpx;自身盒子内的xx像素。 transform-orign确定旋转点。 17.transform:scale(x,y)；放大和缩小。x,y是数字 是xy倍大小的意思 改变图片大小的同时不会影响其他盒子，与width height不同。 而且可以设置中心点缩放。 transform:translate rotate先后顺序不能换，不然会出错。
18.animation动画：要在@keyframe name{25%{transform:translateX(1000px)；}}里面写 25%代表1/4的时间 50%是在1/2的时间位置} 动画里面常见的属性。animation-delay:等待一定时间再开始。 animation-iteration-count:重复播放次数。 animation-direction：alternate；动画在下一周期逆向播放。 animation简写属性：name duration 运动曲线(默认ease，有linear) 开始时间 循环次数 运动方式 结束状态
19.translate3D可以沿着z轴移动。transform:translate3D(x,y,z); perspective:透视相当于3D投影在2D上。透视写在被作用元素的父亲上。 Z轴远大 物体越大，Z轴越小 物体越小。 transform-style:preserve-3d开启3d视野。 写在父盒子上。