垂直对齐vertical-align垂直对齐只针对：行内元素、行内块元素语法vertical-align:baseline;值描述baseline（默认）跟基线对齐bottom跟底线对齐middle跟中线对齐top跟顶线对齐实现图片、表单和文字对齐效果<divclass="box"><imgsrc="./img/icon.png"style="vertical-align:top;">大数据男孩</div><divclass="box"><imgsrc="./img/icon.png"style="vertical-align:middle;">大数据男孩</div><divclass="box"><imgsrc="./img/icon.png"style="vertical-align:baseline;">大数据男孩</div><divclass="box"><imgsrc="./img/icon.png"style="vertical-align:bottom;">大数据男孩</div>去除图片底部空白缝隙方式一只要不是于基线对齐（baseline），就能去掉空隙。<styletype="text/css">.box{border:#00FFFF1pxsolid;}</style><divclass="box"><imgsrc="img/icon.png"alt=""></div><divclass="box"><imgsrc="img/icon.png"alt=""style="vertical-align:middle;"></div>方式二把<img>转为块元素也可以实现。<styletype="text/css">.box{border:#00FFFF1pxsolid;}</style><divclass="box"><imgsrc="img/icon.png"alt=""style="display:block;"></div>
绝对定位水平居中left:50%;：先使左端偏移中间。margin-left:-50px;在往左移动自身宽度的一半。实例<styletype="text/css">.box{width:200px;height:200px;background-color:tomato;/*相对定位*/position:relative;top:0px;left:0px;}.a{width:100px;height:100px;background-color:#00FFFF;/*绝对定位*/position:absolute;left:50%;margin-left:-50px;}</style><divclass="box"><divclass="a"></div></div>层叠顺序z-indexz-index值大的，在上面。z-index只用于定位。默认顺序改变属性
说明定位也是用于布局定位原理：首先确定定位模式，然后确定偏移程度偏移程度偏移程度使用top、right、bottom、left属来定义。偏移程度属性实例描述toptop:10%;定义元素相对于父元素上边线的距离rightright:13px;定义元素相对于父元素右边线的距离bottombottom:13px;定义元素相对于父元素下边线的距离leftleft:13px;定义元素相对于父元素左边线的距离定位模式定位模式使用position属性来定义。值含义static静态定位relative相对定位absolute绝对定位fixed固定定位静态定位（了解）静态定位就是元素默认的定位方式。（几乎不会使用）相对定位（重要）是相对于该元素原本在标准流的位置。但是原来的位置还是被占有。<styletype="text/css">div{width:100px;height:100px;background-color:tomato;}.a{position:relative;background-color:#00FFFF;top:50px;left:50px;}</style><div></div><divclass="a"></div><div></div>绝对定位绝对定位不会保留原来的位置子绝父相绝对定位一般搭配有定位的父容器使用（相对定位）。position:relative;top:100px;left:100px;绝对定位分两种情况：父容器没有定位、父容器有定位。父容器没有定位父容器没有定位，偏移参照就是浏览器窗口<styletype="text/css">.box{width:100px;height:100px;background-color:tomato;margin:100px;}.a{width:100px;height:100px;background-color:#00FFFF;position:absolute;top:50px;left:50px;}</style><divclass="box"><divclass="a"></div></div>父容器有定位父容器没有定位，偏移参照就是有定位的父容器这里父容器是泛指：只要是上层容器都算，<styletype="text/css">.box{width:100px;height:100px;background-color:tomato;position:relative;top:100px;left:100px;}.a{width:100px;height:100px;background-color:#00FFFF;position:absolute;top:50px;left:50px;}</style><divclass="box"><divclass="a"></div></div>固定定位固定定位是：固定在浏览器窗口的位置，不会随滚动条滚动。<styletype="text/css">.box{width:100px;height:1800px;background-color:tomato;top:100px;left:100px;}.a{width:100px;height:100px;background-color:#00FFFF;/*固定定位*/position:fixed;top:50px;left:50px;}</style><divclass="box"><divclass="a"></div></div>
清除浮动的原因蓝色Div是正常流，其他的浮动在蓝色Div上面，这样需要严格控制蓝色Div的高度。<head><styletype="text/css">*{padding:0px;margin:0px;}li{list-style:none;}.box{/*不指定父元素的高度*/width:600px;height:400px;background-color:#00FFFF;margin:auto;}.left{float:left;width:180px;height:400px;background-color:#7FFFD4;}.rightli{float:left;width:95px;height:195px;margin-left:10px;margin-bottom:10px;background-color:antiquewhite;}</style></head><body><divclass="box"><divclass="left"></div><ulclass="right"><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div></body>取消父容器的高度s清除浮动这是最常用清除浮动的方法，只需要在父元素class里面添加就好了。方式一使用after伪元素清除浮动/*清除浮动*/.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}/*ie67专门清除浮动的*/.clearfix{*zoom:1;}方式二使用双伪元素清除浮动.clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}/*ie6，7专用方法*/.clearfix{*zoom:1;}还有其他的方法，自行网上查看
圆角圆角是CSS3的新特性小例子圆角是高度的一半<styletype="text/css">.a{width:100px;height:20px;text-align:center;background-color:tomato;border-radius:10px;}</style><divclass="a">大数据男孩</div>画一个圆<styletype="text/css">.b{width:50px;height:50px;text-align:center;background-color:tomato;border-radius:50%;}</style><divclass="b"></div>阴影阴影是CSS3的新特性语法顺序不能颠倒box-shadow:水平阴影垂直阴影模糊距离（虚实）阴影尺寸（影子大小）阴影颜色内外阴影值描述水平阴影必需。水平阴影位置。可为负值。垂直阴影1必需。垂直阴影位置。可为负值。模糊距离（虚实）可选。阴影尺寸（影子大小）可选。阴影颜色可选。可以十六进制，rgb，rgba…内外阴影可选。默认outset（外部阴影），（inset）内部阴影小例子<styletype="text/css">.b{width:50px;height:50px;text-align:center;background-color:tomato;box-shadow:015px30pxrgba(0,0,0,0.3);}</style><divclass="b"></div>
盒子模型说明盒子模型由四部分组成：内容，padding（内边距）、border（边框）、margin（外边距）内容就是盒子里的图片、文字等区域。盒子模型的实际宽度<styletype="text/css">/*实际看到div是100px+20px的宽高*/div{width:100px;height:100px;background-color:tomato;padding:20px;}</style><div>大数据男孩</div>所以在实际操作中，可能会看到设置内边距后，div变大了的情况，所以设置内边距后，需要适当减小div内容的宽高。如果没有指定盒子宽度，则padding就不会撑开盒子宽度。边框border语法以下语法没有顺序限制border:border-widthborder-styleborder-color;/*例如*/border:#00FFFFsolid1px;值描述border-width边框粗细，单位pxborder-style边框样式，常用样式：solid（实线）、dashed（虚线）、dotted（点线）border-width边框颜色，十六进制，rgb，rgba...边框写法总结因为边框有4个边框：top、bottom、left、right，所以可以单独设置某一边的边框。上边框（top）下边框（bottom）左边框（left）右边框（right）border-top-styleborder-bottom-styleborder-left-styleborder-right-styleborder-top-widthborder-bottom-widthborder-left-widthborder-right-widthborder-top-widthborder-bottom-widthborder-left-widthborder-right-widthborder-top（综合写法）border-bottom（综合写法）border-left（综合写法）border-right（综合写法）单独设置小技巧四边取消边框，只设置下边框。input{boder:none;boder-bottom:#00FFFFsolid1px;}内边距padding内容到边框的距离语法/*1个值：上下左右内边距都为1px*/padding:1px;/*2个值：上下1px左右2px*/padding:1px2px;/*3个值：上1px左右2px下3px*/padding:1px2px3px;/*4个值（顺时针）：上1px右2px下3px左4px*/padding:1px2px3px4px;四边单独写/*上边距*/padding-top:1px;/*右边距*/padding-right:1px;/*下边距*/padding-bottom:1px;/*左边距*/padding-left:1px;外边距margin外边距是盒子与盒子之间的距离/*1个值：上下左右内边距都为1px*/margin:1px;/*2个值：上下1px左右2px*/margin:1px2px;/*3个值：上1px左右2px下3px*/margin:1px2px3px;/*4个值（顺时针）：上1px右2px下3px左4px*/margin:1px2px3px4px;四边单独写/*上边距*/margin-top:1px;/*右边距*/margin-right:1px;/*下边距*/margin-bottom:1px;/*左边距*/margin-left:1px;块级盒子水平居中让一个块级盒子水平居中必须要:盒子必须指定宽度（width），以为块级元素不指定宽度，默认100%(占满)。然后左右外边距设置为auto。常见写法：div{width:100px;margin:0auto;}其他写法：div{width:100px;margin-left:auto;margin-right:auto;}div{width:100px;margin:auto;}行内元素、行内块元素的居中使用text-align:center;清除标签默认内外边距一般这就是以后Css的第一句话*{margin：0px;padding:0px;}注意：行内元素为了兼容，尽量只设置左右外边距，不设置上下内外边距。
背景颜色background-color默认背景是透明的语法/*十六进制颜色*/background-color:#00FFFF;/*rgb颜色*/background-color:rgb(255,99,71);/*rgba颜色*/background-color:rgba(255,99,71,0.5);背景图片background-image语法url()是必加的background-image:url(./img/icon.png);背景平铺background-repeat语法background-repeat:no-repeat;值描述repeat背景图片纵向横向铺满整个屏幕（默认）no-repeat不平铺repeat-xx轴平铺repeat-yy轴平铺背景位置background-position语法如果后面的位置只写一个则另一个默认居中。/*底部靠左*/background-position:bottomleft;/*表示x轴y轴，0,0在背景容器左上角*/background-position:10px20px;值描述length百分数、浮点数、px…都可以positiontop、center、bottom、right、left方位名词背景附着background-attachment语法background-attachment:scroll;值描述scroll背景会随对象内容滚动fixed背景图像固定背景简写background语法官方对背景简写没有顺序规定，约定以下面顺序写。下列不写的，就会自动使用默认值。background:背景颜色背景图片地址背景平铺背景滚动背景位置;背景透明背景透明其实是用颜色透明度实现的background-color:rgba(0,0,0,1);最后透明取值[0~1]之间注意是指：背景半透明，内容是不受影响的。
color文本颜色作用是：设置文本颜色值描述预留颜色比如：red、green、blue16进制比如：#00FFFFRGB代码比如：rgba(255,99,71)RGBA代码比RGB多一个透明度，比如：rgba(255,99,71,0.5).big{color:rgba(255,99,71,0.5);}text-align文字对齐方式用于设置标签里的文字的水平对齐方式。属性描述left左对齐（默认）right右对齐center水平居中.big{text-align:center;}line-height行高用于设置行间距。常用属性有三种：px（像素）、em（相对值）、%（百分比），使用最多的还是px。/*一般情况行高比字号大7、8像素就差不多了*/.big{line-height:26px;}text-indent首行文本缩进用于设置首行文本缩进缩进单位一般使用em，这里的em有单独的意思，1em是一个字的宽度，比如函汉子，1em就是一个字的宽度。.big{text-indent:2em;}text-decoration文本的装饰通常用于给链接的修改装饰。值描述none默认。通常用于取消<a>的下划线。underline定义文本下的一条线overline定义文本上的一条线line-through定义穿过文本的一条线。
font-size大小实例p{font-size:16px;}作用：设置字体的大小单位相对长度单位说明em相对于当前对象内文本的字体尺寸px像素，最常用绝对长度单位（使用较少）说明in英寸cm厘米mm毫米pt点注意：谷歌浏览器默认文字大小16px。不同浏览器可能默认大小不一样，所以尽量给一个明确值。font-family:字体实例p{font-family:"宋体";}作用：设置使用哪一种字体。多个字体使用,隔开，表示浏览器不支持第一种，就去使用第二种，都不支持，则使用默认字体。p{font-family:"宋体","microsoftyahei";}font-weight:粗细实例p{font-weight:normal;}字体的粗细也能使用标签来实现。使用<b>、<strong>标签时文字加粗属性值：属性值描述normal默认值（相当于400值）bold粗体（相当于700值）100-900定义粗细的值，没有单位font-style:字体风格实例p{font-style:oblique;}字体的斜体也能使用标签来实现。使用<i>、<em>标签时文字斜体。属性值：属性作用normal默认值，正常样式italic显示斜体平时很少使用CSS的字体斜体，标签斜体更常使用foot:综合设置字体样式（重点）语法p{font:font-stylefont-weightfont-size/line-heightfont-family;}注意：以上语法顺序不能跟换，使用空格隔开。不需要设置的省略即可，但必须保留font-size、font-family属性，不然不起作用。
[attr][attr]单独使用是匹配所有带attr属性的标签a[attr]匹配a标签下带attr属性的标签语法[attr]{CSS样式}实例选择包含target属性的标签<styletype="text/css">/*选择a标签里包含target属性的值*/a[target]{background-color:#00FFFF;}</style><ahref="https://bigdataboy.cn"target="_blank">大数据男孩</a>[attr=value]用于选择指定属性和值的标签。语法[attribute=value]{CSS样式}实例styletype="text/css">/*a标签里id为bigdataboy的标签*/a[id="bigdataboy"]{background-color:red;}</style><aid="bigdataboy"href="https://bigdataboy.cn"target="_blank">大数据男孩</a>[attr*=value]选择attr属性中包含value值的标签语法[attr*=value]{CSS样式}实例<styletype="text/css">a[id*="data"]{background-color:red;}</style><aid="bigdataboy"href="https://bigdataboy.cn"target="_blank">大数据男孩</a>[attr^=value]选择attr属性中以value值开头的标签语法[attr^=value]{CSS样式}实例<styletype="text/css">a[id^="big"]{background-color:red;}</style><aid="bigdataboy"href="https://bigdataboy.cn"target="_blank">大数据男孩</a>[attr$=value]选择attr属性中以value值结尾的标签语法[attr$=value]{CSS样式}实例<styletype="text/css">a[id$="boy"]{background-color:red;}</style><aid="bigdataboy"href="https://bigdataboy.cn"target="_blank">大数据男孩</a>[attr~=value]选择attr属性中包含value值的标签，注意有一个坑下面实例有说明语法[attribute~=value]{CSS样式}实例<styletype="text/css">a[id~="data"]{background-color:red;}</style><!--注意id是有空格的，没有空格不能识别包含--><aid="bigdataboy"href="https://bigdataboy.cn"target="_blank">大数据男孩</a>
交集选择器交集选择器，找到指定标签间的共有部分语法element.class||element#id{CSS样式;}实例选择p标签里的class="important"的标签。<style>p.important{color:green;}</style><h1class="important">大数据男孩</h1><pid="important">该标签被选择</p><pclass="important">大数据男孩</p>并集选择器并集选择器，找到所有满足的标签语法element1,element2,element3,...{CSS样式;}实例<style>.important,#important,.union{color:green;}</style><h1class="important">该标签被选择</h1><pid="important">该标签被选择</p><pclass="important">大数据男孩</p><pclass="union">该标签被选择</p><p>大数据男孩</p>后代选择器后代选择器，选择elment1元素内部的element2元素语法element1element2{CSS样式;}实例divp{color:green;}<div><h1class="important">大数据男孩</h1></div><div><pid="important">该标签被选择</p></div><p>大数据男孩</p>子元素选择器子元素选择器，选择element1元素中符合直接子元素的element2元素语法element1>element2{CSS样式;}实例div>p{color:green;}<div><h1class="important">大数据男孩</h1></div><div><p>该标签被选择</p></div><div><p>该标签被选择</p><p>该标签被选择</p><p>该标签被选择</p></div><p>大数据男孩</p>相邻兄弟选择器相邻兄弟选择器，element1元素之后紧跟的第一个元素。语法element1+element2{CSS样式;}实例div+p{color:green;}<div><h1class="important">大数据男孩</h1></div><div><p>该标签被选择</p></div><div><p>该标签被选择</p></div><p>大数据男孩</p><p>大数据男孩</p>兄弟选择器兄弟选择器，选择具有相同父元素的同级元素语法element1~element2{CSS样式;}实例p~div{color:green;}<div><h1class="important">大数据男孩</h1></div><div><p>大数据男孩</p></div><p>大数据男孩</p><div><p>该标签被选择</p></div><p>大数据男孩</p>