语法：
border ： border-width || border-style || border-color 属性作用border-width定义边框粗细，单位是pxborder-style边框的样式border-color边框颜色 边框的样式 none：没有边框即忽略所有边框的宽度（默认值） solid： 边框为单实线 dashed： 边框为虚线 dotted : 边框为点线 /* 实线的 */border-style: solid;/* 虚线的 */border-style: dashed;/* 点线 */border-style: dotted;/* 边框的综合性写法 *//* 边框粗细 边框 样式 边框颜色 */简便写法（层叠性原则）： /* 四个边框都取消 */border:none;border-bottom: 1px solid #000; 上边框下边框左边框右边框border-top-style：样式；border-bottom-style：样式；border-left-style：样式；border-right-style：样式；border-top-width：宽度；border-bottom-width：宽度；border-left-width：宽度；border-right-width：宽度；border-top-color：颜色；border-bottom-color：颜色；border-left-color：颜色；border-right-color：颜色；border-top：宽度 样式 颜色；border-bottom： 宽肃 样式 颜色；border-left：宽度 样式 颜色；border-right： 宽度 样式 颜色； 2、表格的细线边框通过CSS属性：
table{border-collapse：collapse；}（表示相邻边框合并在一起） 3、内边距（padding） 属性作用padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距注意 在改内边距时，盒子会变大
/* 上下左右都是20像素内边距 */ padding: 20px; /* 上下是10，左右是20的内边距 */ padding: 10px 20px; /* 上10，左右20，下30 */ padding: 10px 20px 30px; /* 顺时针 10 20 30 40 */ padding: 10px 20px 30px 40px; 4、内盒尺寸计算（元素实际大小）盒子的实际大小=内容的宽度和高度+内边距+边框
/* 盒子的实际大小=内容的宽度和高度+内边距+边框 */ /* 内边距是一定要给的，只能改变内容宽度 让他减去多出来的内边距 */特殊情况：如果没有给一个盒子指定宽度，此时给这个盒子指定padding，则不会撑开盒子。
5、外边距（margin）块级盒子实现水平居中
盒子必须指定宽度左右设置auto写法：
1、 /* 让块级盒子水平居中对齐 */ margin-left: auto; margin-right: auto;2、 margin: auto;3、 margin: 0 auto; 6、文字居中和盒子居中区别1、文字水平居中是text-align：center，而且还可以让行内元素和行内块元素居中对齐 2、块级盒子水平居中 左右margin改为auto
text-align: center;/* 文字 行内元素 行内块元素水平居中 */ margin: 10px auto;/* 块级盒子水平居中 左右margin 改为auto 就可以了 上下margin都可以 */ 7、插入图片和背景图片的区别1、插入图片 应用于如产品展示类 ，移动位置只能靠盒模型padding margin 2、背景图片一般用于小图标背景 超大背景图片 只能通过background-position
img { width: 200px;/*插入图片更改大小 width个height*/ height: 210px; margin-top: 30px;/*插入图片更改位置 可以用margin 或padding 盒子模型*/ margin-left: 50px;/* 插入当图片也是一个模型*/ } div { width: 400px; height: 400px; border: 1px solid purple; background: #fff url(images/sun.jpg) no-repeat; background-position: 30px 50px;/*背景图片更改位置*/ } 8、清除元素的默认内外边距代码（以后写CSS第一句代码）：
* { padding: 0;/*清除内边距*/ margin: 0;/*清除外边距*/ }注意 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距
9、外边距合并使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
相邻块元素垂直外边距合并 当上下相邻的两个块元素相遇时，如果哦上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和 取两个值得较大者这种现象被称相邻块元素垂直外边距的合并（也称外边距塌陷） 解决方案：尽量只给一个盒子添加margin值嵌套块元素垂直外边距的合并（塌陷） 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框 父元素的上外边距会与子元素的上外边距发生合并 合并后的外边距为两者中的较大者 解决方案：1、可以为父元素定义上边框 2、可以为父元素定义上内边框 3、可以为父元素添加overflower：hidden
.fathere { width: 500px; height: 500px; background-color: pink; /* 嵌套关系 垂直外边距合并 解决方案 */ /* 1.父亲定义上边框 transparent 透明 */ /* border-top: 1px solid transparent; */ /* 2.可以给父亲指定一个上padding值 */ /* padding-top: 1px; */ /* 3.给父亲添加overflower：hidden */ overflow: hidden; } .son { width: 200px; height: 200px; background-color: purple; margin-top: 100px; }还有其他方法，如浮动，固定，绝对定位
9、盒子模型布局稳定性根据稳定性来分，按照优先使用 宽度 其次使用内边距 再次使用 外边距
width>padding>margin原因：
margin会有外边距合并还有le6下面margin 加倍的bug，所以最后使用padding 会影响盒子大小，需要进行加减计算，其次使用width没有问题，经常使用宽度剩余法 高度剩余法来做 10、ps基本操作以及常用快捷键 文件-打开-- 可以打开要测量的工具Ctrl+R可以打开标尺 或者视图右击标尺，把里面的单位改为像素Ctrl+加号键 可以放大视图 Ctrl+减号键缩小视图按住空格键，可以拖动视图用选区拖动 可以测量大小Ctrl+ d可以取消选区 或者旁边空白处点击一下也可以取消选区