css基础--盒子模型
AlisaClass 2020-07-19
盒子模型
1 绝大多数标签都可以看作盒子，可以设置宽高或设置内容；在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
content 盒子的内容
padding 内边距 内容到边框的距离
border 边框
margin 外边距 元素与元素的间距
2 盒子模型的属性
1) width 宽 height高 均指内容放入宽高，而非盒子的
2) padding 内边距 内容到边框的距离
padding:10px; 一个值相当于四个方向值相同（上 右 下 左）
padding:10px 20px; 上10px 右20px 下10px 左20px
padding:10px 20px 30px; 上 右 下 左20px
padding:10px 20px 30px 40px; 上 右 下 左
上 padding-top
右padding-right
下 padding-bottom
左padding-left
2)border 边框
按三要素：border-width 边框宽度
border-style 边框样式 solid实线 dashed虚线
border-color 边框颜色
按方向：border:10px solid blue 四个方向均同样设置
border-top
border-right
border-bottom
border-left
background-color:#000;黑
border-width:20px;
border-style:solid dashed dotted doble; 上右下左
border-color:red green blue pink; 上右下左
border-bottom:5px solid blue; 下边框设置3个样式
3）margin 外边距 元素与元素的间距
margin:20px 30px 上右下左 同padding
margin-top
margin-right
margin-bottom
margin-left
水平居中： text-align:center;
margin: 0 auto; 上下边距为0 auto让有宽度的块级元素水平居中 eg:div p
3 margin塌陷问题及解决
父子margin塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/*margin 父子塌陷问题
父亲没有设置padding border 内容时，子元素垂直方向的margin会叠加给父亲
一旦发生塌陷，叠加规则：父亲最终垂直方向的margin为父子中最大的margin值，并非相加
解决方法： 1 把儿子的margin转换成父亲的padding 注意盒子总高度变化问题
2 给父亲增加一个属性 overflow:hidden; //触发了BFC
*/
.box1{
width: 150px;
height: 150px;
background-color: pink;
/* padding: 20px; */
/* overflow: hidden; */
}
.p1{
width: 50px; /*内容的宽*/
height: 50px; /*内容的高*/
background-color: aqua;
padding: 10px 20px; /*内边距 内容到边框的距离 上下为10px 左右20px*/
border: 2px dashed red;
border-bottom: 2px solid blue;
margin: 20px;
}
</style>
</head>
<body>
<div class="box1">
<p class="p1">这是内容1</p>
</div>
</body>
</html>margin父子塌陷
4 并列元素（兄弟塌陷）
垂直方向上相遇的盒子模型，会发生margin塌陷；现象就是元素二者之间的距离并非之和，而是二者之间最大的
解决方法：只配置一个方向即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1,.box2{
width: 50px;
height: 50px;
background-color: red;
}
/*
并列元素（兄弟）塌陷：垂直方向上的盒子模型，会发生margin塌陷
即两个盒子模型的margin值选二者中最大的
解决方式：只设置一个方向
*/
.box1{
margin-bottom: 50px; /*只在其中一个设置，即只设置margin-bottom 或margin-top*/
/* margin-bottom: 30px; */ /*会发生并列元素塌陷*/
}
.box2{
margin-top: 0px;
/* margin-top: 20; */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</htm并列元素塌陷
5 背景属性
1）背景颜色 background-color
2) 背景图片 background-img:url(xxx.jpeg); // 默认平铺
3）背景重复 background-repeat:repeat-x; //不写时默认图片平铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 默认图片平铺
控制图片平铺：repeat x,y方向均重复; repeat-x x方向平铺；repeat-y y方向平铺；
no-repeat 不平铺；
*/
.box1{
width: 1500px;
height: 1500px;
/* background-image: url(../ddr.png);
background-repeat: no-repeat;
background-position: right bottom; */
/*简写 若不需要设置，后面四个属性值可以不写*/
background: grey url(../ddr.png) no-repeat center center fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>background5 css元素的显示模式
元素根据表现的特性分为：块级元素、行内元素、行内块元素
默认特点：
块级元素 div p li dt dd h1~h6 ul dl
1）独占一行
2）设置宽高有效 （padding margin line-height）
3）不设置宽高，默认是父亲的100%
行内元素 span em i b strong
1)可以与其他行内元素并排
2）设置宽高无效 （行高 line-height可设置，不支持垂直方向 padding margin）
3）元素靠内容撑开
行内块元素 img
1)可以与其他行内元素 或 行内块元素并排
2）可以设置宽高
一般通过如下方法去除默认的padding margin
*{
padding:0;
margin:0;
}
6 display 改变元素的显示模式
display:block; 转化为块级元素
display:inline; 转化为行内元素
display:inline-block; 转化为行内块元素
display:none; 隐藏元素
