div盒子模型
- div标签是划分标签 、分区标签
- 可以放置宽度 高度 及各类css样式
边框线
border:1px solid red
分别为边框的宽度 边框样式 边框颜色- 分别写:
border-width
border-color
border-style
border-top
- border-style
- solid 实线
- dotted 点线
- dashed 虚线
- double 双线
小三角
设置宽度0 高度0 边框其他的颜色设置为透明 transparent
颜色值
- 英文的颜色
- 十六进制颜色
#ccffee
(1 2 3 4 5 6 7 8 9 0 a b c d e f ) - rgb三颜色 r是红 g是绿色 b是蓝色 0-255深浅色
- rgba a是alpha 是透明色 0-1 0完全透明 1完全不透明
外边距
- 边框以外的距离 叫外边距
- 上右下左四个值
- 上 左右 下 三个值
- 上下 左右 两个值
- 上下左右都相等 一个值
内边距
- 内容与边框之间的距离 2.能扩大盒子的大小
- 不支持 auto
盒子的计算
- 盒子宽度:border-left+border-right+width+padding-left+padding-right
- 盒子高度:border-top+border-bottom+height+padding-top+padding-bottom
外边距合并
- 父元素与子元素之间垂直方向发生了合并
- 两个兄弟合并 合并之后取两者之间的最大值
- 在水平方向不会发生合并
- 父子级发生合并解决
- 给父级加padding
- 给父级加边框