所谓盒子模型就是把HTML页面的元素看作一个矩形盒子,也将就是盛装内容的容器,每个矩形都市元素的内容,内边距(padding
),边框(border),和外边距(margin)组成.
border-style的属性值
none:没有边框属性值 solid:边框为单实线(最常用)
dashed:边框为虚线 dotted:边框为点线 double:边框为双实线
boder-radio:设置边框的圆角半径
边框综合 设置 border:四边框的宽度 四变宽的样式 四边框颜色
内边距(padding)
padding属性用于设置内边距,是指边框与内容之间的距离
padding:第一个值 第二个值 第三个值 第四个值 这四个值分别表示 上左下右 顺时针排序,只有两个值得时候表示上下,左右 三个值得时候,第一个值是上,第二个值 是左右,第三个值是下
外边距 margin属性用于设置外边距,属性值的使用同padding
外边距实现盒子的居中
必须满足以下两个条件:1,必须是块级元素. 2,盒子必指定宽度(width) 然后给左右的外边距都设置为auto,可以使盒子中元素水平居中
外边距塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父盒子,子盒子</title>
<style>
.father{
width:800px;
height:800px;
background-color: darkred;
/*padding-top: 100px;*/
padding-left: 100px;
margin-top: 50px;
/*border-top: 1px solid white;*/
/*overflow: hidden; */
/*对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外
边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使
父元素的上外边距为0,也会发生合并。*/
/*解决方案:
1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden*/
}
.child{
width:300px;
height:300px;
background-color: pink;
margin-top: 100px;
margin-left: 50px;
/*float:left;*/
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>