快速开发指南：
1.新建页面之后，编写外部样式表文件，引入到HTML页面中2.用浏览器打开页面->F12->sources->打开css文件 右边编写样式，左边查看效果3.样式编写完成将样式文件整体复制到自己项目的css文件中保存css中Ctrl+/注释 (只在F12调试工具中能用)Elenemts->Style->img 方向键上下调值border是行内元素，不能设置宽度，必须display：line-block;水平居中需要宽度
垂直居中需要高度border:1px solid; 大部分情况下用来调试的css中Ctrl+/注释/*有宽度的盒子的水平居中用margin*/margin:0 0 0 0;=====================================================================
1.居中问题（水平居中问题） 1）文字居中 text-align:center 2）表格的整体居中 align：center 3）（已知宽度的）盒子居中 margin:0 auto; 原理：里面盒子的margin-left=（外width-内width）/22.margin 外边距 margin-top; margin-right; margin-bottom; margin-left; 合并写法： margin:margin-top margin-right margin-bottom margin-left; 4个值时 margin:margin-top margin-right&margin-bottom margin-left; 3个值时 margin:margin-top&margin-left margin-right&margin-bottom; 2个值时 margin:margin-top&margin-left&margin-right&margin-bottom; 1个值时 4方向 padding 内边距 ->会撑开盒子宽高 3.元素的分区 块级元素（div h1 table ul） 独占1行，可以设置宽高，默认布局从上往下行内元素（span label） 可以跟其他元素共享一行，但是不可以设置宽高，默认布局从左往右 行内块（既是行内元素，又是块元素 如：img input） 可以设置宽高，并且可以跟其他元素共享一行*可以通过display属性，修改元素的分区形式（显示形式）
*display block ：块级元素 inline: 行内元素 inline-block:行内块 none:表示隐藏(隐藏状态可以释放空间)ps:opacity:0 (透明度，设置0，可隐藏，但是不释放空间)标签分类 （块级元素 行内元素）
块级元素有行高 （如：div） 行内元素没有宽高 （如：span） 只能由内容撑开 4.定位的问题标准文档流（ 默认 又叫流布局： 从上往下，从左往右）（块元素从上往下，行内元素从左往右） 定位：指定元素相对于（它自己）正常位置应该出现的位置 *position： -> 通常结合top，right，bottom，left一起使用 relative ->相对定位 ->不脱离标准文档流（不会让出原来的位置） 相对于原本应该出现的位置移动 absolute ->绝对定位 ->脱离标准文档流（会让出原先的位置） 相对于定位了的祖先节点移动 外层盒子，相对定位。里面盒子绝对定位 fixed ->固定定位 ->脱标 用bottom不会错，相对于屏幕定位 通常固定定位结合bottom一起使用5. z-index 堆叠
z-index:10 数值越大，距离用户越近 6.浮动定位 ->脱标float：left float：right可以用浮动将li显示在同一行，结合list-style:none使用overflow:hidden; 清除浮动clear:both; 清除左右浮动*浮动的元素无法撑开父盒子的高度
此时需要清除浮动带来的影响清除的方式3种 1）给父盒子添加overflow属性，给一个hidden 2）给父盒子添加固定高度 3）给父元素添加用来清除浮动的节点（元素），该节点添加clear属性，给一个both 4）css3提供的伪元素法（使用最多） div:after