2.html-div盒子模型

div盒子模型

1. div标签是划分标签 、分区标签
2. 可以放置宽度 高度 及各类css样式

边框线

1. border:1px solid red分别为边框的宽度 边框样式 边框颜色
2. 分别写：border-width border-color border-style border-top
3. border-style

• solid 实线
• dotted 点线
• dashed 虚线
• double 双线

小三角

设置宽度0 高度0 边框其他的颜色设置为透明 transparent

颜色值

1. 英文的颜色
2. 十六进制颜色 #ccffee (1 2 3 4 5 6 7 8 9 0 a b c d e f )
3. rgb三颜色 r是红 g是绿色 b是蓝色 0-255深浅色
4. rgba a是alpha 是透明色 0-1 0完全透明 1完全不透明

外边距

1. 边框以外的距离 叫外边距
2. 上右下左四个值
3. 上 左右 下 三个值
4. 上下 左右 两个值
5. 上下左右都相等 一个值

内边距

1. 内容与边框之间的距离 2.能扩大盒子的大小
2. 不支持 auto

盒子的计算

1. 盒子宽度：border-left+border-right+width+padding-left+padding-right
2. 盒子高度：border-top+border-bottom+height+padding-top+padding-bottom

外边距合并

1. 父元素与子元素之间垂直方向发生了合并
2. 两个兄弟合并 合并之后取两者之间的最大值
3. 在水平方向不会发生合并
4. 父子级发生合并解决

• 给父级加padding
• 给父级加边框