前端基础学习2

盒模型：
结构： magin外边距
border边框
padding内边框
content内容
分类：不同的元素产生的盒子类型可能不同
一个元素，产生什么样的盒子，取决于它css的display属性
子盒子：
内容盒(content-box)：content；
填充盒(border-box)：content+border；
边框盒(padding-box)：content+border+padding；
改变需要从哪里开始有背景颜色
background-clip:padding-box:背景颜色从内边距开始

改变盒子的计算规则：box-sizing: 内容盒/边框盒;
例：width值的范围（width:100px;）
content-box取值表示，内容区域是100px;
border-box取值表示，边框盒区域是100px;
注：IE浏览器的默认值是border-box
适用场景：取消横向滚动条，保证总宽度不超页面）
内容区（content）：
设置尺寸：
width：宽度
height：高度
边框区（border）：
简写格式：border-方向(不写就是全边框)：粗细(厚度)/样式/颜色
可以省略粗细(厚度)，颜色：
颜色的默认值是字体的颜色;
粗细(厚度)的默认值是3px(有双实线)

top：上/button：下/left：左/right：右
border-方向-width：设置某一个方向的边框粗细（厚度）
border-方向-color：设置某一个方向的边框颜色
transparent：透明色
border-方向-style：设置某一个方向的边框样式
solid：实线/dashed：虚线/dotted：点线/double：双实线
画一个三角形
v1.0{
border: 10px solid 颜色;
border-bottom-color: 颜色;
border-top-color: 颜色;
border-left-color: 颜色;
border-right-color: 颜色;
}
v2.0{
border:10px solid transparent;
border-bottom-color: 颜色;
}
内边距（padding）：
简写格式：padding-方向(不写就是所有方向)：距离
top：上 / button：下 / left：左 / right：右
取值：
只给1个值：设置的是4个方向的值
只给2个值：上下，左右
只给3个值：上，左右，下
只给4个值：上，右，下，左
外边距（margin）：
简写格式：margin-方向(不写就是所有方向)：距离
top：上 / button