1.盒子模型
1.概念
是一种思维模型,主要用于界面布局。
由尺寸大小+内边距+外边距+边框 组成
2.尺寸
设置宽度
width:*px |*%
设置高度
height:*px |*%
如果是百分比,代表的是父元素的百分比
例:
<style>
.wrap{
/* 设置宽度 */
width: 400px;
/* 设置高度 */
height: 400px;
/* 设置背景颜色 */
background: aquamarine;
}
.box{
/* 设置宽度 -父元素宽度的百分比 */
width: 50%;
/* 设置高度 */
height: 50%;
background: pink;
}
</style>
3.边框
border:粗细、线型、颜色;
1.设置四边边框
border:*px 线型 颜色;
2.border—方向(top botton left right):粗细、线型、颜色;
1.设置上边边框
border-top:*px 线型 颜色;
2.设置下边边框
border-bottom:*px 线型 颜色;
3.设置左边边框
border-left:*px 线型 颜色;
4.设置右边边框
border-right:*px 线型 颜色;
4.内边距(填充)
盒子边框和它里边的内容之间的间隔
1.设置四边的内边距
padding: *px;
padding内边距的属性值可以是1-4个,多个值用空格隔开。
对应规则是:上出发、顺时针、有缺省,取对边。
paqdding不可以为负值
padding会撑大盒子
2.设置左边的内边距
padding-left: *px
3.设置右边的内边距
padding-right: *px;
4.设置上边的内边距
padding-top: *px;
5.设置下边的内边距
padding-bottom:*px;
注意:padding会撑大盒子哦如果要保持盒子大小不变,记得修改宽/高哦!
5.外边距
盒子边框和之外的元素之间的间隔。
1.设置四边的外边距
margin: *px;
margin内边距的属性值可以是1-4个,多个值用空格隔开。
对应规则是:上出发、顺时针、有缺省,取对边。
margin可以为负值。
2.设置左边的外边距
margin-left: *px
3.设置右边的外边距
margin-right: *px;
4.设置上边的外边距
margin-top: *px;
5.设置下边的外边距
margin-bottom:*px;
6.margin的问题
1.粘连问题-父随子动—垂直方向
1.使用padding实现间隔【注意高度哦!】
2.给父元素添加一个透明的上边框
border:1px solid transparent;
3.给父元素设置
overflow:hidden;
[将父元素搞到另一个世界了-所有儿子/父亲搞到另一个世界的方式都可以解决该问题哦]
2.塌陷问题----垂直方向
在一个元素身上设置足够的间隔;
7.细节说明
1.将所有元素的内外边距去掉(初始化)
*{ margin: 0;
padding: 0;
}
2.盒子水平居中
margin:0 auto;
盒子垂直居中需要计算,然后用内外边距做
3.注意:行级元素不能设置垂直方向的内外边距和尺寸哦!
2浮动
是一个布局属性,主要用于实现一行多列效果。
语法:
float:left|right|none;
注意:float:left是让元素排列在父元素的左边。
浮动会让元素脱离文档流