盒子模型(插入图片,外边距,内边距)
盒子模型(Box Model)所谓盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。盒子里面的文字和图片的等元素是内容区域盒子的厚度成为盒子的边框盒子内容与边框的距离是内边距(类似单元格的cellpadding)盒子与盒子之间的距离是外边距(类似单元格的cellsp
·
盒子模型(Box Model)
- 所谓盒子模型
就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器 - 盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。
- 盒子里面的文字和图片的等元素是内容区域
- 盒子的厚度成为盒子的边框
- 盒子内容与边框的距离是内边距(类似单元格的cellpadding)
- 盒子与盒子之间的距离是外边距(类似单元格的cellspacing)
1、盒子边框(Box Boder)
语法:
border : border-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-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可以取消选区 或者旁边空白处点击一下也可以取消选区
更多推荐
已为社区贡献2条内容
所有评论(0)