前置

常用长度单位

我们前面学了一个长度单位px(像素)，我们来了解一下其他长度单位

em（相对于当前元素或其父元素font-size的倍数）

n em = n * font-size

我们来看看效果

     <style>
         #d1 {
             width: 200px;
             height: 200px;
             font-size: 20px;
             background-color: red;
         }
         #d2 {
             width: 10em;
             height: 10em;
             font-size: 20px;
             background-color: aqua;
         }
 
     </style>

如果没有font-size呢，高度宽度会为0吗，背景色会消失吗？

并没有消失，长宽变成了160*160，我们逆推一下，font-size=16px也就是浏览器的默认值，这里注意一个细节，会先往上找父类的font-size，如果往上找不到就为浏览器的默认值。

rem（root em,相对于根元素（`<html>`）的font-size）

这里不对根元素做任何调整，那么初始值就是16px

         #d2 {
             width: 10rem;
             height: 10rem;
             font-size: 20px;
             background-color: aqua;
         }

百分数（相对于其父元素的百分比）

     <div id="d3">
         <div class="inside"></div>
     </div>

         #d3 {
             width: 200px;
             height: 200px;
             font-size: 20px;
             background-color: red;
         }
         .inside {
             width: 50%;
             height: 25%;
             font-size: 20px;
             background-color: aqua;
         }

这里的百分数一定是父元素的值的百分比。

设置单位的时候必须加单位，否则样式失效

元素的显示模式

块元素（最常见的就是div）特点：
1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列
2. 默认宽度：撑满父元素
3. 默认高度：由内容撑开
4. 可以通过css设置宽高
常见的标签：
1. 主体结构标签：<html>、<body>
2. 排版标签：<h1>、<hr>、<p>、<pre>、<div>
3. 列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
4. 列表相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
5. <form>与<option>
行内元素（最常见的span）特点：
1. 在页面内不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
2. 默认宽度：由内容撑开
3. 默认高度：由内容撑开
4. 无法通过css设置宽高
常见的标签：
1. 文本标签：<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>
2. <a>与<label>
行内块元素(最常见的是img)特点：
1. 在页面内不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
2. 默认宽度：由内容撑开
3. 默认高度：由内容撑开
4. 可以通过css设置宽高
常见的标签：
1. 图片：<img>
2. 单元格：<td>、<th>
3. 表单控件：<input>、<textarea>、<select>、<button>
4. 框架标签：<iframe>

修改元素的显示模式

属性名：display

属性值：block（块元素），inline-block（行内块元素），inline（行内元素）,none(不显示)

 <head>
     <meta charset="UTF-8">
     <title>修改元素的显示模式</title>
     <style>
         div{
             width: 200px;
             height: 200px;
             font-size: 20px;
             display: inline-block;
         }
         #d1{
             background-color: red;
         }
         #d2{
             background-color: blue;
 
         }
         #d3{
             background-color: green;
         }
 
 
     </style>
 
 </head>
 
 <body>
     <div id="d1">你好1</div>
     <div id="d2">你好2</div>
     <div id="d3">你好3</div>
 </body>

盒子模型的组成部分

所有css样式都会把HTML代码看成下面这样一个模型

那么，在开发过程中，我们该如何观察这个模型呢，这里就要借助开发者工具了，我们先来写一小段代码

 <head>
     <meta charset="UTF-8">
     <title>盒子模型的组成部分</title>
     <style>
         div{
             width: 200px;
             height: 200px;
             font-size: 20px;
             background-color: grey;
         }
     </style>
 
 </head>
 
 <body>
     <div id="d1">你好1</div>
 
 </body>

右下角的便是盒子模型,我们发现，我们把鼠标移到盒子模型上，页面上会显示我们选中的区域，原来我们设置的高度和宽度是内容区的高度和宽度。

我们来加一点其他属性来看看

     <style>
         div{
             width: 200px;
             height: 200px;
             font-size: 20px;
             padding:20px;
             background-color: grey;
             border:10px dashed red;
             margin:50px;
         }
     </style>

我们可以发现背景色覆盖了整个盒子的边框及以内的部分，

由于内边距和边框的改变，也导致了盒子大小的改变，但是注意：外边距的大小影响盒子的位置但是不影响盒子的大小(盒子大小确定的情况下)。

细嗦内容区

 <head>
     <meta charset="UTF-8">
     <title>内容区</title>
     <style>
         div{
             height: 200px;
             background-color: aqua;
         }
     </style>
 
 </head>
 
 <body>
     <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, cumque!</div>
 </body>

Q1：内容区宽度是多少？

由于没有规定，所以内容区宽度和网页显示窗口的宽度一样，随网页显示窗口的宽度变化而变化。

但是如果过小了，影响力我的显示怎么办呢，我们可以设置一下下限。

 min-width: 600px;

这样如果宽度小于600px了，宽度就会定格在600px，继续调小网页下方就会出现滚动条了。(有的浏览器限制的最小值是不能继续调小了)

有了下限当然还有上限

 max-width: 600px;

宽度有，高度当然也有，类比就好，这里就不展示了。

注意：如果没有定义宽度，宽度是动态的，会随你外间距和边框的变化，而导致内容区的变化

细嗦内间距

 <head>
     <meta charset="UTF-8">
     <title>内间距</title>
     <style>
         #d1 {
             width: 200px;
             height: 200px;
             font-size: 20px;
             background-color: red;
             padding: 20px;
         }
     </style>
 
 </head>
 
 <body>
     <div id="d1">你好啊</div>
 </body>

这里设置了上下左右的内边距都是20px，那么我们能不能个性化一点，可以的可以的兄弟，我们有四个属性：padding-left,padding-top,padding-right,padding-bottom,左上右下四个方位我们可以个性化设置。

我们再来看看padding这个复合属性

如果填了一个值，表示的是四个方向一样

如果填了两个值，表示前者是上下的值，后者是左右的值

如果填了三个值，表示第一个是上，第二个是左右，第三个是下

如果填了四个值，表示上右下左四个方向依次设置。

注意：行内元素的上下padding值可以修改，但是可能会导致对上下的内容造成遮挡。

细嗦边框

 <head>
     <meta charset="UTF-8">
     <title>边框</title>
     <style>
         #d1 {
             width: 200px;
             height: 200px;
             font-size: 20px;
             background-color: red;
             border-style: solid;
         }
     </style>
 
 </head>
 
 <body>
     <div id="d1">你好啊</div>
 </body>

我们只写样式便可以形成一个边框，默认颜色是黑色，默认宽度是多少呢？2px?no，no，no~因为博主电脑的默认缩放是150%所以实际的宽度还是3px哦。

当然我们边框我也希望个性化一点，我们可不可以自定义单边属性呢，可以的。

 border-left-width:
 border-right-color:
 border-top-style:
 border-bottom:

细嗦外边距（margin）

这个套路和边框的一样，这里就不展示了。

注意事项

1.子元素的margin是参考父元素的content来计算的

 <head>
     <meta charset="UTF-8">
     <title>外边距的注意事项</title>
     <style>
         .outer{
             width: 400px;
             height: 400px;
             padding:50px;
             background-color: #f00;
         }
         .inner{
             width: 100px;
             height: 100px;
             background-color: #00f;
         }
     </style>
 
 </head>
 
 <body>
     <div class="outer">
         <div class="inner"></div>
     </div>
 </body>

能想象出来效果吗

蓝色为什么没有顶在左上角捏，原来是之前设置了一个padding啊。

那么我再给.inner加一个margin：100px那么从哪到哪是一百呢

我们先来理解一下，父亲的子元素都出现在父亲的内容区里，所以这个是从父亲的内容区的边界开始算

2.上margin，左margin会影响自身的位置，下margin有margin印象附近兄弟的位置。

 <head>
     <meta charset="UTF-8">
     <title>外边距的注意事项</title>
     <style>
         .box {
             width: 200px;
             height: 200px;
 
         }
         .box1 {
             background-color: red;
         }
         .box2 {
             background-color: green;
             margin-top: 50px;
         }
         .box3 {
             background-color: blue;
         }
 
     </style>
 
 </head>
 
 <body>
     <div class="box box1">1</div>
     <div class="box box2">2</div>
     <div class="box box3">3</div>
 </body>

我们把第二个盒子的外边距调为50px，那么问题来了，是把第一个盒子往上顶50px，还是把第二个和第三个盒子往下顶50px？

效果很明显是把第二个第三个往下顶，也说明了，我们设置margin的时候是我们自己在动，那么我们再加一个margin-bottom: 50px效果会是怎么样呢。

下面的动了。

结论：我们设置margin-top的时候自己动，我们设置margin-bottom的时候下面的在动

我们再来研究一下行内元素，

我们给中间的图片增加左右外边距看看效果

         .second{
             margin-left: 50px;
             margin-right: 50px;
         }

做margin好像是自己动，有margin是兄弟动

3.对于行内元素来说，左右的margin可以完美设置，对于上下的margin不能设置（设置后是无效的）

     <style>
         #d1 {
             margin: 50px;
             background-color: red;
         }
 
 
     </style>
 
 </head>
 
 <body>
     <span>原神</span><span id="d1">崩铁</span><span>绝区零</span>
 </body>

虽然有显示但是没效果

4.maigin值可以是auto，给一个块级左右margin，设置auto可以实现元素在其父元素内水平居中

     <style>
         .box {
             width: 200px;
             height: 200px;
             background-color: red;
             margin-left:auto;
             margin-right:auto;
         }
     </style>
 
 </head>
 
 <body>
     <div class="box">box</div>
 </body>

对于块级元素，左右margin都是auto，那么则是居中的，注意上下不可以哦

5.margin的值可以是负值

我们这里设置一个负值来感受一下

     <style>
         .box {
             width: 200px;
             height: 200px;
         }
         .box1{
             background-color: red;
         }
         .box2{
             background-color: blue;
             margin-top: -50px;
         }
     </style>
 
 </head>
 
 <body>
     <div class="box box1">box1</div>
     <div class="box box2">box2</div>"
 </body>

欸往上移了，看来负值就是往相反的方向移动捏。

margin塌陷问题

 <head>
     <meta charset="UTF-8">
     <title>外边距的注意事项</title>
     <style>
         .outer {
             width: 300px;
             height: 300px;
             background-color: #ccc;
         }
         .inner1 {
             width: 100px;
             height: 100px;
             background-color: #f00;
             margin-top: 50px;
         }
         .inner2 {
             width: 100px;
             height: 100px;
             background-color: #0f0;
         }
     </style>
 
 </head>
 
 <body>
     <div class="outer">
         <div class="inner1">inner1</div>
         <div class="inner2">inner2</div>
     </div>
 </body>

我们在第一个内部块添加一个上外边距，猜猜效果回事什么样子的呢。

？？？!!!!怎么最外边的也下移了

所以下面这行代码是有问题的

 margin-top：50px；

我们来修改一下代码

     <style>
         .outer {
             width: 300px;
             background-color: #ccc;
         }
         .inner1 {
             width: 100px;
             height: 100px;
             background-color: #f00;
         }
         .inner2 {
             width: 100px;
             height: 100px;
             background-color: #0f0;
             margin-bottom: 50px;
         }
     </style>

我们感觉应该是在外层下面拓展50px；事实是如此吗

???又被吃了

这就是margin塌陷问题的两种情况

描述：我们在父元素里面第一个子元素设置margin-top以及给最后一个元素设置margin-bottom，这两个值会被父元素抢走。

解决方案：

1.给父元素增加边框

     <style>
         .outer {
             width: 300px;
             background-color: #ccc;
             border:1px solid #000;
         }
         .inner1 {
             width: 100px;
             height: 100px;
             background-color: #f00;
             margin-top: 50px;
         }
         .inner2 {
             width: 100px;
             height: 100px;
             background-color: #0f0;
             margin-bottom: 50px;
         }
     </style>

问题解决。

2.给父元素增加padding多少值都行

     <style>
         .outer {
             width: 300px;
             background-color: #ccc;
             padding: 1px;
         }
         .inner1 {
             width: 100px;
             height: 100px;
             background-color: #f00;
             margin-top: 50px;
         }
         .inner2 {
             width: 100px;
             height: 100px;
             background-color: #0f0;
             margin-bottom: 50px;
         }
     </style>
 
 </head>
 
 <body>
     <div class="outer">
         <div class="inner1">inner1</div>
         <div class="inner2">inner2</div>
     </div>
 </body>

3.添加overflow属性

上面两种虽好，但是都改变了父容器的大小，有没有更好的方法呢，有的有的

     <style>
         .outer {
             width: 300px;
             background-color: #ccc;
             overflow: hidden;
         }
         .inner1 {
             width: 100px;
             height: 100px;
             background-color: #f00;
             margin-top: 50px;
         }
         .inner2 {
             width: 100px;
             height: 100px;
             background-color: #0f0;
             margin-bottom: 50px;
         }
     </style>

这是什么意思呢？overflow的意思是溢出之后的显示模式，虽然好像没啥关系，但是这里没有溢出，但是确实能解决这个毛病emmmm。（算一个小偏方吧）

margin合并问题

 <head>
     <meta charset="UTF-8">
     <title>margin合并</title>
     <style>
         .box {
             width: 200px;
             height: 200px;
         }
         .box1 {
             background-color: red;
             margin-bottom: 50px;
         }
         .box2 {
             background-color: blue;
             margin-top: 50px;
         }
 
     </style>
 
 </head>
 
 <body>
     <div class="box box1">1</div>
     <div class="box box2">2</div>
 </body>

那么我们猜猜，两个盒子直接相隔多少像素呢

？？？怎么只有50？？？？

这就是margin合并问题，如果相同就共用，如果不相同就取比较大的值。

注意合并问题只存在去上下元素之间，不存在于左右元素之间

解决方案：无需解决emmmmm

前置