什么是盒模型,为什么要用盒模型
影响盒模型的大小有哪些
将一个内容放在页面合适的位置,需要考虑到这个内容大小,位置,形状,就相当于,买一个家具
css将所有内容的形状统一成矩形,然后只需要考虑内容大小
盒模型、盒子模型、框模型(box model)
1:内容区(content) 比如 冰箱
2、内边距(padding) 比如 泡沫
3、边框(border) 比如 纸箱
4、外边距(margin) 比如 控制位置
影响盒模型大小:内容区,内边距,边框
1、内容区 用来放具体内容
默认情况下
width: 设置内容区的宽度;
height: 设置内容区的高度;
2:边框(border)元素设置边框
边框属于盒子边缘,边框里面属于盒子内部,出了边框都是盒子的外部
设置边框必须指定三个样式
background-color: rgb(222, 255, 170);
设置边框大小
border-width: 10px;
border-bottom-width: 40px;
设置边框样式
border-style:solid;
border-top-style: dashed;
设置边框的颜色
border-color:transparent red transparent transparent;
border-top-color:black ;
border-right-color:transparent ;
border-bottom-color:transparent ;
border-left-color: transparent;
简写方式
border: 15px solid black;
border-color: red transparent transparent transparent;
border-left: 10px solid blue;
1、 border-width:;
4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 上下左右
2、 可以单独设置某一边的宽度
border-xxx-width:; top right bottom left
3、 border-width:; 选写的 有默认值:1.5px左右
1、 border-style: ;
可选值:
none 默认值,没有样式
solid 实线
dashed 虚线
double 双线
dotted 圆点虚线
2、单独设置某一边的边框样式
border-XXX-style: ; top right bottom left
3、border-style:;也可跟多个值,规则跟border-width一样
1、 border-color:; 也可跟多个值,规则跟border-width一样
2、单独设置某一边的边框样式
border-XXX-color: ; top right bottom left
3、自定义小箭头
border-color:transparent red transparent transparent;
border简写
1、 border: 10px solid blue;
2、可以单独设置某一边的边框
border-xxx top right bottom left
3 、border:solid;
4、border-XXX: none; top right bottom left
设置内边距
1、padding:10px; 指的是盒子的内容区与盒子边框之间的距离
2、padding:; 也可跟多个值,规则跟border-width一样
3、单独设置一边内边距
padding-xxx: ; top right bottom left
外边距 margin 用来控制元素与元素之间的距离
1、 margin-top:; 正值元素向下移动 负值元素向上
margin-left: ;正值元素向右移动,负值元素向左
margin-bottom: ;元素自己不动,正值挤着下面的元素向下,负值下面的元素向上
margin-right: 对于块元素,不生效
2、 margin:; 可以跟多个值,规则跟border-width一样