一、定义
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
不同部分的说明:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
盒子模型的大小=内容区(content)+边框(border)+内边距(padding)
1、内容区(content)
元素中所以的字元素和文本内容都在内容中排序
width 设置内容区的宽度
heigh 设置内容区的高度
2、内边距(padding)
指的是盒子的内容区与盒子边框之间的距离
一个有四个方向的内边距,可以通过
padding-top (上边距)
padding-right (右边距)
padding-bottom (下边距)
padding-left (左边距)
来设置四个方向的内边距
总结:
内边距会影响盒子的可见框大小,元素的背景会延伸到内边距
盒子的大小由内容区、内边距和边框共同决定
三、margin 外边距 指的是当前盒子和其他盒子之间的距离
margin-top 上外边距 盒子正值是向下移动,负值向上移动
margin-right 右外边距 默认情况下设置margin-right是没有效果的
margin-bottom 下上外边距 盒子自己不动,挤下面的盒子移动、正值向下、负值向下
margin-left 左上外边距 盒子正值是向右移动,负值向左移动 */
大小可正可负:
margin:
后也可跟多个值,4个,3个,2个,1个皆可,规则跟padding一样
扩展:
第一种解决抖动的方式
border:10px solid transparent;
第二种解决抖动的方式
box-sizing: 控制盒子width和heigt组成部分
可选值:
content-box 默认情况下:盒子width指的内容宽度
border-box 盒子的width和heigt指的是内容区,内边距,边框的大小
四、边框{border} 元素中所有的子元素和文本内容都在内容区中排序
边框属于盒子边缘,边框里面属于盒子内部,出了边框都是盒子的外部
设置边框必须指定三个样式,分别是颜色,大小,样式
border-color: 设置边框的颜色
transparent:透明色
border-width: 设置边框大小
(1.)默认值 默认值大概1-3px
(2.)也可以写多个颜色
4个 上 左 下 右
3个 上 左右 下
2个 上下 左右 对边公用一个颜色
1个 上下左右
(3.)border-xxx-width 特指top right bottom left 某一边的宽度
border-style: 设置边框样式
(1.)默认值 none
(2.)solid 实线
dashed 虚线
dotted 点状虚线
double 双线
border简写
border:颜色,大小,样式
border-top:颜色,大小,样式(上边框)
border-right:颜色,大小,样式(右边框)
border-bottom:颜色,大小,样式(下边框)
border-left:颜色,大小,样式(左边框-)