一、盒子模型
面试题:什么是盒子模型,为什么要用盒子模型,影响盒子模型的大小因素有哪些?
答:把元素布局到页面里,就像买个桌子放到家里,要知道桌子的大小,形状,然后才能放到家里
因此把所有的元素都想成盒子,矩形,只需要考虑大小即可
盒模型、盒子模型、框模型(box model)
内容区 冰箱
内边距 泡沫
边框 纸盒子
外边距 快递的位置
影响盒子大小的因素:内容区,内边距,边框会影响盒子的大小,外边距不会影响
内容区(content) :
元素中所有的子元素和文本内容都在内容区中排列
默认情况:设置width,height都是内容区宽高
二、边框(border)元素设置边框
1、边框属于盒子边缘,边框里面属于盒子内部,出了边框都是盒子的外部
设置边框必须指定三个样式 边框大小、边框的样式、边框的颜色
边框大小:border-width
边框样式:border-style
边框颜色:border-color
掌握: 跟多个值的情况、单独设置某一边、默认值、样式的可选值、箭头的写法
2、 边框的大小 如果省略,有默认值,大概1-3px ,不同的浏览器默认大小不一样
border-width 后可跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
3、单独设置某一边的边框宽度
border-bottom-width
border-top-width
border-left-width
border-right-width
4、边框的样式
border-style 可选值
默认值:none
实线 solid
虚线 dashed
双线 double
点状虚线 dotted
5、设置边框的颜色 默认值是黑色
border-color 也可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
对应的方式跟border-width是一样
单独设置某一边的边框颜色:border-XXX-color: ;
6、简写border
(1)同时设置边框的大小,颜色,样式,没有顺序要求
(2)可以单独设置一个边框
border-top:; 设置上边框
border-right 设置右边框
border-bottom 设置下边框
border-left 设置左边框
(3)去除某个边框
border:none;
三、内边距 padding
是内容区和边框之间的距离,会影响到整个盒子的大小
1、 padding-top: ; 上内边距
padding-left:; 左内边距
padding-right:; 右内边距
padding-bottom:; 下内边距
2、padding简写 可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
四、外边距 不会影响到盒子的大小
可以控制盒子的位置
margin-top:; 正值 元素向下移动 负值 元素向上移动
margin-left:; 正值 元素向右移动 负值 元素向左移动
margin-bottom:; 正值 元素自己不动,其靠下的元素向下移动,负值 元素自己不懂,其靠 下的元素向上移动
margin-right: ; 正值负值都不动
简写 margin 可以跟多个值
规则跟padding一样