盒模型:
.demo{
overflow:hidden;/*超出隐藏*/
width:300px;
hight:300px;
padding:
background-color:blue;
}
-
盒模型:
-
复合属性:
- border:大小 样式 颜色 :border的样式必须要写,不可少
- 注意:不给边框颜色,默认颜色就是内容字体的颜色
- 当不给边框大小的时候,默认边框大小为3px
-
分样式:
- border-width: 大小
- border-style: 样式 { solid 实线 dashed 虚线 dotted 圆点虚线 double双边框 }
- border-color: 颜色—单词 rgb rgba transparent(透明色) 十六进制(#fff白色 #000黑色 #aabbcc简写为#abc)
-
标准盒模型
-
一个盒子占据这个网页的总体宽度:
- width(总)=margin(左右)+border(左右)+padding(左右)+width(内容)
-
一个盒子占据这个网页的总体高度:
- width(总)=margin(上下)+border(上下)+padding(上下)+height(内容)
-
一个盒子的组成:
-
content(内容)
width:300px; hight:300px;
-
宽和高定义了一个元素内容区域大小,元素的内容从宽和高的左上角开始排列内容
- padding(内边距)
盒子变大—所占空间位置变大–撑大盒子(撑大多少,在对应的宽高减去多少)
padding区域的颜色和内容区颜色一致
padding —用于设置盒子的边框和内容区的距离—复合样式:
一个值:上右下左 两个值:上下 左右 三个值:上 左右 下 四个值:上 右 下 左
分样式:padding-top padding-right padding-bottom padding-left
-
-
border(边框线)
-
margin(外边距)
margin : 盒子与盒子之间的距离
1. 一个值:上右下左 2. 两个值:上下 左右 3. 三个值: 上 左右 下 4. 四个值:上 右 下 左 5. 特殊值:auto (自适应左右居中--左右有效 上下无效) ``` margin:0 auto; ```
- 盒子–块级元素:不设置宽高 默认颜色是100%
-
怪异盒模型
box-sizing:border-box;-
.box{ width:250px; height:250px; padding:50px; background-color:blue; box-sizing:border-box; }
-
怪异盒模型:
- 空间宽度=width-padding(左右)-border(左右)
- 空间高度=width-padding(上下)-border(上下)
-
外边距合并现象:
-
相邻两个盒子:
解决方案:
- 两个盒子之间加入一个空盒子(不建议这样:中间加元素(加div 设置边框 border:1px solid transparent; :伪元素)
-
当两个盒子嵌套(父子级关系)
解决方案:
- 给父亲设置:overflow:hidden;
- 给父亲设置:padding
- 给父亲设置:border :1px solid red;
-
-
-