1、盒子模型
1.1 盒子模型
.box1{
/* 内容区content,元素中的所有子元素和文本内容都在内容区中排列
内容区的大小由width和height设置，宽度与高度
*/
width: 200px;
height: 200px;
background-color: lightcyan;
/* 边框（border），边框属于盒子边缘，边框里属于盒子内部，出了边框是盒子的外部
设置边框的3个样式（边框大小会影响整个盒子大小）
宽度：border-width
颜色: border-color
样式：border-style
*/
border-width: 3px;
border-color: lightsalmon;
border-style: solid;
}
<body>
<div class="box1"></div>
</body>
1.2 边框
.box1{
width: 200px;
height: 200px;
background-color: lightcyan;
border-width: 3px;/*给4个值时是顺时针。3个值是上（左右）下，2个值（上下）（左右）*/
/*
border-xxx-width,xxx可以是top,left等等
*/
border-color: lightsalmon;/*边框颜色，规则同上*/
border-style: solid;
/* 规则同上
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
*/
/*以上不常用*/
/*以下常用*/
border: solid 10px cyan;/*顺序随意*/
border-top: solid 10px cyan ;
}
1.3 内边框
.box1{
width: 200px;
height: 200px;
background-color: lightcyan;
border: solid 10px cyan;/*顺序随意*/
/*
内边距
内容区和边框之间的距离是内边距
4个方向的内边距
padding-top: ; （right,bottom,left）
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
一个盒字的可见框大小：由内容区、内边区、边框共同决定
所有在计算盒子大小时，需要将这三个区域加到一起计算
*/
padding-top: 100px;
padding-left: 100px;
/*
padding也是简写属性，规则和border一样
*/
}
.inner{
width: 50px;
height: 50px;
background-color: blue
}
<body>
<div class="box1">
<div class="inner"></div>
</div>
</body>
1.4 外边框
.box1{
width: 100px;
height: 100px;
background-color: lightcyan;
border: solid 10px cyan;
/*
外边距(margin)
不会影响盒子可见框的大小，但是会影响盒子的位置
一共有4个方向的外边距
margin-top:;（right、bottom、left）
可以设置为负值
简写属性，同padding一样
会影响盒子实际占用空间
元素在页面中按照自左向右的顺序排列
默认情况下，如果我们设置的左和上外边距则会移动元素自身
设置下和右边、外边距会移动其他元素
*/
margin-bottom: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
1.5 水平方向布局
.outer{
width: 100px;
height: 50px;
border: 3px crimson solid;
}
.inner{
/* width:auto ;width的值默认就是auto*/
width: 50px;
height: 20px;
background-color: cyan;
margin-left: auto;
/*
元素水平方向的布局
元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
margin-right
border-right
padding-right
一个元素在其父元素中，水平布局必须满足一下等式
margin-left+border-left+padding-left+width+margin-right+border-right+padding-right=其父元素内容区的宽度
以上等式必须满足，如果相加结果使等式不成立，则成为过渡约束，则等式会自动调整
调整的情况：
如果七个值中没有auto的情况，则浏览器会自动调整margin-right值以等式满足
这7个值中有3个值可以设置为auto（谁设置auto就调整谁）
width
margin-left
margin-right
如果某个值为auto，则会自动为auto的那个值以使得等式成立
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大
如果将三个值都设置为auto，则外边距都是0，宽度最大
如果将两个外边距设置为auto，宽度固定值，则外边距设置为相同的值（居中）
示例：
width:xxpx;
margin:0 auto;
*/
}
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
1.6 垂直方向布局 + 1.7 外边距折叠
.box1 , .box2{
width: 100px;
height: 200px;
font-size: 100px;
}
.box1{
background-color: darkblue;
margin-bottom: 100px;
}
.box2{
background-color: rgb(135, 212, 212);
margin-top: 100px;
}
.box3{
width: 200px;
height: 200px;
background-color: rgb(133, 150, 38);
/*padding-top: 100px
border-top: 1px rgb(133, 150, 38)
*/
}
.box4{
width: 100px;
height: 100px;
background-color: rgb(86, 194, 86);
margin-top: 100px;
}
/*
垂直外边距的重叠（折叠）
只有垂直时发生：相邻的垂直方向外边距会发生重叠现象
兄弟元素
兄弟元素间的相邻垂直外边距会取两者之间的较大值（正数）
特殊情况
一正一负：取两者之和
两个都负：取绝对值较大
兄弟元素之间的外边距重叠，对开发有利，不用处理
父子元素
父子元素间相邻外边距，子元素会传递给父元素（上外边距）
父子外边距的折叠会影响页面的布局，必须进行处理
*/
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">
<div class="box4">4</div>
</div>
1.8 行内元素
.s1{
background-color: darkolivegreen;
/*
行内元素的盒模型
行内元素不支持width、height
行内元素可以设置padding，但是垂直方向padding不会影响页面布局
行内元素可以设置border，但是垂直方向border不会影响页面布局
行内元素可以设置margin，但是垂直方向margin不会影响页面布局
*/
/* padding: 100px;*/
margin: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: darkred;
}
a{
/*用来设置元素显示的类型
display 用来设置元素的显示类型
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline block 将元素设置为行内块元素
既可以设置宽度和高度，又不会独占一行
table 将元素设置为表格
none 元素不在页面中显示（隐藏）
visbility 用来设置元素的显示状态
可选值：
visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置
*/
display:blok ;/*将行内元素转成块元素*/
background-color: deeppink;
}
2、浏览器的默认样式
/*
默认样式
通常情况，浏览器都会为元素设置一些默认样式
默认样式的存在会影响要页面的布局
通常情况下编写网页时必需去除浏览器的默认样式（pc端页面）
*{margin:0;padding:0;}
ul{list-style:none;}
!!!重置样式表：nomalize.css ,reset.cc
*/
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
</head>