| 盒子模型（插入图片，外边距，内边距） | 您所在的位置：网站首页 › html怎么添加图片并设置位置 › 盒子模型（插入图片，外边距，内边距） |
|
盒子模型（Box Model）
所谓盒子模型 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片的等元素是内容区域盒子的厚度成为盒子的边框盒子内容与边框的距离是内边距（类似单元格的cellpadding）盒子与盒子之间的距离是外边距（类似单元格的cellspacing）
1、盒子边框（Box Boder）
语法： 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可以取消选区 或者旁边空白处点击一下也可以取消选区 |
| CopyRight 2018-2019 实验室设备网 版权所有 |