float: left;
margin: 0 auto;

原因分析：
浮动脱离文档流，auto无法自动计算
正常情况下，auto只能设置水平，自动居中，除非特殊情况（定位、flex布局）

解决方案：
margin的值指定像素

margin: 0px 668px;

		#box1{
            width: 50px;
            height: 50px;
            background: cornflowerblue;
            float: left;
        }
        #box2{
            width: 50px;
            height: 50px;
            background: rgb(34, 31, 31);
            clear: both;
            margin-top: 100px;
        }

原因分析：
需要先把上面的距离填满，才能往下移动

解决方案：
1、把margin-top换成给上面的浮动元素设置margin-bottom

		#box1{
            width: 50px;
            height: 50px;
            background: cornflowerblue;
            float: left;
            margin-bottom: 100px;
        }
        #box2{
            width: 50px;
            height: 50px;
            background: rgb(34, 31, 31);
            clear: both;
        }

2、给浮动的元素套层父元素，用高度隔开（就不需要用clear设置）

	<div id="box">
        <div id="box1">
        
        </div>
    </div>
    
    <div id="box2">

    </div>

#box{
            height: 1px;
        }

		#box{
            height: 1px;
            margin-bottom: 50px;
        }
        #box1{
            width: 50px;
            height: 50px;
            background: cornflowerblue;
            float: left;
            
        }
        #box2{
            width: 50px;
            height: 50px;
            background: rgb(34, 31, 31);
            margin-top: 50px;
        }

原因分析：
上下两个盒子之间的margin会重叠（左右不会），谁的值大设置谁
解决方案：
1、BFC解决
给重叠的盒子中的任意一个盒子套一层父级,然后用overflow:hidden触发BFC

<div class="box">
        <div class="box1">box1</div>
    </div>
    
    <div class="box2">box2</div>
    
	    .box{
            overflow: hidden;
        }
        .box1,.box2{
            display: block;
            width: 100px;
            height: 100px;
            background: lightblue;
            margin: 100px;
        }
        .box2{
            background: lightcoral;
        }

2、只给一个盒子设置margin

		#box{
       		height: 1px;
        }
        #box1{
            width: 50px;
            height: 50px;
            background: cornflowerblue;
            float: left;
            
        }
        #box2{
            width: 50px;
            height: 50px;
            background: rgb(34, 31, 31);
            margin-top: 50px;
        }

		#box{
            width: 100px;
            height: 100px;
            background: lightcoral;
        }
        #box1{
            width: 50px;
            height: 50px;
            background: cornflowerblue;
            margin-top: 20px;
        }

		<div id="box">
	        <div id="box1">
	        
	        </div>
	    </div>

原因分析：
父元素下的第一个子元素，设置margin-top的时候，margin-top会错误的传递给父元素，这个就是margin-top的传递问题
解决方案：
父元素
1.设置border

		#box{
            width: 100px;
            height: 100px;
            background: lightcoral;
            border: 1px solid slategray;
        }

2.设置padding-top

		#box{
            width: 100px;
            height: 100px;
            background: lightcoral;
            padding-top: 1px;
        }

3.overflow：hidden 设置内容超出隐藏(最常用)

		#box{
            width: 100px;
            height: 100px;
            background: lightcoral;
            overflow: hidden;
        }

4.设置float 不推荐专门解决，可以顺便解决

 		#box{
            width: 100px;
            height: 100px;
            background: lightcoral;
            float: left;
        }

子元素
1.设置浮动float（不推荐，可能会引起其他问题）

		#box1{
            width: 50px;
            height: 50px;
            background: cornflowerblue;
            margin-top: 20px;
            float: left;
        }

水平排列的内容设置垂直居中

	<div class="test01">
        <img src="../day01/day05/images/0.jpeg" alt="">
        <p>奥运</p>
    </div>
   
    .test01{
            overflow: hidden;
            width: 100px;
            height: 100px;
            background: cadetblue;
        }
        .test01 img{
            width: 50px;
            height: 50px;
            vertical-align: middle;
        }
        .test01 p{
            display: inline-block;
            vertical-align: middle;
        }

作用：字和图片始终是水平垂直居中的，字会随着图片的改变自适应

使用条件:
父元素display:table
子元素display:table-cell
vertical-align：middle

	<div class="test02">
        <p>test02父元素</p>
        <div class="test02-1">
            <p>test02子元素</p>
        </div>
    </div>
	
	.test02{
            display: table;
            overflow: hidden;
            width: 200px;
            height: 200px;
            background: coral;
        }
        .test02-1{
            display: table-cell;
            vertical-align: middle;
            width: 80px;
            height: 80px;
            background: darkgray;
        }

给图片设置vertical-align: top/middle;

	<div class="test03">
        <img src="../images/banner.jpg" alt="">

        <div class="test03-1">

        </div>

    </div>

	.test03{
            overflow: hidden;
            width: 300px;
            height: 300px;
            background: darksalmon;
        }
        .test03 img{
            width: 100px;
            height: 100px;
            vertical-align: top;
        }
        .test03-1{
            width: 100px;
            height: 100px;
            background: yellow;
        }

<p>测试</p>

	p {
        width: 150px;
        height: 150px;
        background: rgb(100, 155, 226);
        text-align: justify;
        padding: 0px 10px;
      }

加上text-align-last
text-align-last 属性规定如何对齐文本的最后一行。

注意：text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用。

	p {
        width: 150px;
        height: 150px;
        background: rgb(100, 155, 226);
        text-align: justify;
        text-align-last: justify;
        padding: 0px 10px;
      }

<div>测试</div>
	div {
        width: 150px;
        height: 150px;
        background: rgb(226, 100, 226);
        text-align: justify;
      }

在div中加入span标签并且将span转成行内块元素将剩下的宽度占满

<div>测试<span></span></div>
	div {
        width: 150px;
        height: 150px;
        background: rgb(226, 100, 226);
        text-align: justify;
      }
      span {
        display: inline-block;
        width: 100%;
      }

第一步 设置宽度范围
第二步 强制内容不换行 white-space:nowrap
第三步 隐藏超出的内容 overflow：hidden
第四步 隐藏的内容省略号显示 text-overflow：ellipsis

		#test1{
            width: 150px;
            height: 150px;
            border: 3px solid springgreen;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3; 用来限制在一个块元素显示的文本的行数
overflow: hidden;
(缺陷：兼容性没有单行隐藏的兼容性好，显示设置不太灵活)

		#test2{
            width: 150px;
            height: 150px;
            border: 3px solid rgb(255, 0, 98);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 7;
            overflow: hidden;
        }

	<div class="box1">
        <div class="box2">定位水平垂直居中</div>
    </div>

		.box1{
            width: 300px;
            height: 300px;
            background: cadetblue;
            position: relative;
        }

        .box2{
            width: 100px;
            height: 100px;
            background: darkolivegreen;
            position: absolute;
            /* 第一种方法:用定位触发的属性+外边距 */
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
         }

第一种方法改良版
margin-left:-(自身宽度的一半)
margin-top：-（自身高度的一半） 换成
2d的位移，
transform:translate(-50%,-50%)

		.box1{
            width: 300px;
            height: 300px;
            background: cadetblue;
            position: relative;
        }

        .box2{
            width: 100px;
            height: 100px;
            background: darkolivegreen;
            position: absolute;
            /* 第二种方法:用定位触发的属性+2D平移 */
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

		.box1{
            width: 300px;
            height: 300px;
            background: cadetblue;
            position: relative;
        }

        .box2{
            width: 100px;
            height: 100px;
            background: darkolivegreen;
            position: absolute;
            /* 第三种方法:重置定位触发的属性+外边距自适应 */
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }

让元素内容在不同的分辨率下都能灵活显示

情况1父元素不设置height
情况2父元素高度设置height:auto

问题:高度塌陷
原因:如果父元素的高度由内容撑开，内容浮动后不占位，父元素的高度就会塌陷

	<div id="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

		#box{
            width: 500px;
            border: 2px solid rgb(26, 25, 25);
        }
        .box1{
            float: left;
            width: 100px;
            height: 300px;
            background: cadetblue;
        }
        .box2{
            float: right;
            width: 100px;
            height: 600px;
            background: chocolate;
        }

解决方法
1.父元素设置overflow:hidden
原理:overflow可以触发BFC（BFC的布局规则定义：浮动元素也参与高度计算）

		#box{
            width: 500px;
            border: 2px solid rgb(26, 25, 25);
            /* 第一种方法:给父元素加overflow: hidden; */
            overflow: hidden;
        }

2.浮动元素最下方设置一个空盒子，给空盒子清除浮动，把塌陷的父元素撑开

	<div id="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
  
/* 第二种方法:在浮动元素最下方添加一个空盒子,空盒子清除浮动(不推荐,代码冗余) */
        .box3{
            clear: both;
        }  

3.可以动态模拟空盒子（after和before必须结合content属性一起使用才可以）
::after 可以在盒子内容的后面动态生成一个空盒子
::before 可以在盒子内容的前面动态生成一个空盒子
注意：css渲染的盒子是内联

万能清除浮动法(可以单独设置一个清除高度塌陷的类选择器,在有问题的地方引用即可)
使用对象:父元素
父元素:after{
content:".";
clear:both;
display:block;
height:0;
overflow:
hidden;
visibility:hidden;
}

父元素{zoom:1;}
IE8以上和非IE浏览器才支持:after,zoom(IE专有属性)可解决IE6,IE7浮动问题

#box::after{
            /* content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。 */
            /* 这里插入.是避免插入空出错 */
            content: ".";
            /* ::after添加的元素是内联元素,无法撑开父容器的高度 */
            display: block;
            clear: both;
            height: 0px;
            overflow: hidden;
            /* 隐藏添加内容,占位 */
            visibility: hidden;
        }

例子：盒子等于当前窗口的高度
html，body{height:100%}
内容{height:100%}

宽度自适应的特点
属性:width
属性值: 常规属性值(数值+单位)、100%、不设置
如果当前元素是块级元素的情况下，设置宽度为100%或者不设置的情况下，宽度会沾满全屏(通栏效果)
块级元素不设置的宽度的情况下，会和父级等宽
重点:设置元素脱离文档流，当前元素宽度由自身内容决定(设置浮动和定位的时候，元素一定要设置一个固定的宽高)

高度自适应的特点
属性:height
属性值: 常规属性值、100%、auto/不设置
当元素不设置宽度或者设置成auto的时候，高度不显示，元素的高度由自身内容决定
重点
①窗口100% html,body{width:100%;height:100%} => 文档对象设置100%，子级元素自适应到整个文档
②图片100% img{width:100%;height:100%} => 拉伸图片

min-height(最常用)
内容的高度 < 最小高度 取最小高度
内容的高度 > 最小高度 取内容的高度

max-height最大高度
内容的高度 < 最大高度 取内容的高度
内容的高度 > 最大高度 取最大高

元素具备最小高度的自适应
min-height属性：最小高度；(IE6浏览器不识别该属性)

兼容元素具备最小高度自适应的方法：
IE6以下浏览器，height就是最小高额效果

例子
hack1:
min-height: value; 高版本浏览器
_height:value; IE6以下设置height

hack2:
min-height:value;
height:auto !important;
height:value;(建议使用 不能换顺序)

高版本浏览器：能识别min-height，height:auto !important;

IE6以下浏览器（不识别min-height，不识别！important）height:value;

下划线（IE6和IE6以下浏览器识别）
_属性：属性值
！important（IE7以上浏览器识别）
属性：属性值 ！important
/9（IE浏览器识别）
属性：属性值 /9
/0（IE8以上浏览器识别）
属性：属性值 /0
* +（IE7以下浏览器识别）
* 属性：属性值

calc()的算术运算符 + - * /
按照标准盒子计算
例子： width: calc(100% - 20px);

BFC:格式化上下文,是一个独立的渲染区域 ， 可以理解为一个封闭的大盒子，有自己的布局规则

1.BFC的盒子都是上下显示，垂直排列
2.同一个BFC的两个盒子，上下的margin会重叠
3.盒子左边的边框和margin会接触
4.BFC区域和浮动区域不会重叠
5.每一个BFC都是独立的，相互之间不影响
6.在BFC区域内，浮动元素也参与高度计算

1.html 根元素
2.定位：绝对和固定
3.浮动
4.display:
inlin-block
table-cell
table-caption
flex
inline-flex
5.overflow: auto/scroll/hidden

1.BFC解决高度塌陷

<div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
</div>
		*{
            margin: 0px;
            padding: 0px;
        }

        .box{
            width: 500px;
            border:5px solid black;
            /* 推荐,影响小 */
            overflow: hidden; 
            /* float: left; */
            /* position: absolute; */
            /* display: inline-block; */
            
        }
        .box1{
            float: left;
            width: 100px;
            height: 300px;
            background: darkcyan;
        }
        .box2{
            float: right;
            width: 200px;
            height: 500px;
            background: darkorchid;
        }

2.BFC可以实现自适应两栏布局

<div class="box1">left</div>
<div class="box2">right</div>

		*{
            margin: 0px;
            padding: 0px;
        }
        body,html{
            height: 100%;
        }
        .box1{
            float: left;
            width: 100px;
            height: 500px;
            background: lightblue;
        }
        .box2{
            overflow: hidden;
            height: 100%;
            background: lightcoral;
        }

3.BFC可以解决margin重叠的问题
给两个子元素中任意一个套一个父级,然后父级用overflow:hidden触发BFC即可

	<div class="box">
        <div class="box1">box1</div>
    </div>
    
    <div class="box2">box2</div>
	
		.box{
            overflow: hidden;
        }
        .box1,.box2{
            display: block;
            width: 100px;
            height: 100px;
            background: lightblue;
            margin: 100px;
        }
        .box2{
            background: lightcoral;
        }

4.BFC也可以解决margin传递问题

参照1.4中的内容

1.圣杯布局
步骤:
1.中间的盒子设置width：100%
2、left，right，center都设置浮动
3、给left和right设置margin-left负值，把盒子挪上去
4、给大盒子设置左右的padding(与双飞翼布局的差别)
5、给left，right设置相对定位把盒子挪到padding的区域内

	<div class="box">
        <!-- 先写middle中间内容是为了先加载 -->
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
   	 *{
            margin: 0px;
            padding: 0px;
        }

        .box{
            overflow: hidden;
            padding: 0px 100px;
        }
        .middle{
            position: relative;
            float: left;
            width: 100%;
            height: 100px;
            background: cadetblue;
        }
        .left{
            position: absolute;
            float: left;
            width: 100px;
            height: 100px;
            background: rgb(153, 119, 153);
            left: 0px;
           
        }
        .right{
            position: relative;
            float: left;
            width: 100px;
            height: 100px;
            /* 右外边距要偏离自身宽度的距离 */
            background: darkolivegreen;
            margin-right: -100%;
            right: 0px;
        }

2.双飞翼布局
1、中间的盒子设置width：100%
2、left，right，center都设置浮动
3、给left和right设置margin-left负值，把盒子挪上去
4、给中间center设置padding(与圣杯布局的差别)，让left和right自动在center的padding区域内显示，（center设置怪异盒模型）

第二种方法:定位(参考1.圣杯布局)
1、中间的盒子设置不设置width
2、left，right设置绝对定位,移动到左右两边
left：0 top:0
right:0 top:0
3、中间盒子设置padding

	<div class="box">
        <!-- 先写middle中间内容是为了先加载 -->
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
  	  *{
            margin: 0px;
            padding: 0px;
        }

        .box{
            overflow: hidden;
        }
        .middle{
            float: left;
            width: 100%;
            height: 100px;
            background: cadetblue;
            padding: 0px 100px;
            box-sizing: border-box;
        }
        .left{
            float: left;
            width: 100px;
            height: 100px;
            background: rgb(153, 119, 153);
            /* 左外边距要偏离父容器宽度的距离 */
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 100px;
            height: 100px;
            /* 左外边距要偏离自身宽度的距离 */
            background: darkolivegreen;
            margin-left: -100px;
        }

总结:这两种布局的差异点就是设置中心区域的内容不同,圣杯的中心区域只占中心区域,双飞翼的中心区域是占整个盒子

css重置不建议用通配符清除内外边距,因为这样做会导致浏览器加载慢,负载大,一般各个公司都有自己重置之后的默认样式,下面是我的重置默认样式

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 16px;
  font-weight: normal;
}
body {
  background-color: #fff;
  font: 12px Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    "\5B8B\4F53", sans-serif;
}
em,
i {
  font-style: normal;
}
b,
strong {
  font-weight: normal;
}

li {
  list-style: none;
}
img {
  border: 0;
  vertical-align: middle;
}
a {
  text-decoration: none;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clear-fix::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.clear-fix {
  *zoom: 1;
}

input、hr、textarea、select

置换元素(可变元素)
自己的初始宽高 (设置标签没有设置样式的时候就能显示出来) img、input
可以根据自身的属性，改变属性值从而达到当前显示的不同 img(src=“1.jpg/2.jpg”) input(type=“text\submit\reset…”)

哪些标签是行内块元素: img\input\textarea\select
哪些标签自带边框: hr\input\textarea\select
哪些标签是置换元素: img\input

display: none; 删除隐藏元素:删除是整个html的结构，在浏览器中完全找不到 ,即不占位隐藏
visibility: hidden; 隐藏显示的文本盒子 ,即占位隐藏

有三个小盒子，上下盒宽高固定大小，中间盒子在变化 ？

如果中间盒子内容比较多的时候可以做到自适应
如果中间盒子内容没有的时候，保持一个最小高度

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width = device-width：宽度等于当前设备的宽度
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

物理像素
设计图测量的像素

逻辑像素
屏幕显示的大小，和css设置的大小

设备像素比
dpr = 物理像素 / 逻辑像素

iPhone 4、5 640px(物理像素) 320px(逻辑像素) 2(dpr)

iPhone 6、7、8 750px(物理像素) 375px(逻辑像素) 2(dpr)

平板或者plus 1080px/1242px(物理像素) 414px(逻辑像素) 3(dpr)

如果设计图是750px 测量大小100px 先看dpr 2
100px / dpr 2= 50px

单位
em ：先相对于自己，自己没有就相对于父元素font-size值
rem ：相对于根元素的font-size值
vw :视口宽度的百分比
vh：视口高度的百分比
vmin：vh和vw谁小设置谁
vmax：vh和vw谁大设置谁

@media all and (max-width: 320px) {
    html {
      font-size: 42px;
    }
  }

@media all and (min-width: 321px) and (max-width: 376px) {
    html {
      font-size: 50px;
    }
}
@media all and (min-width: 377px) {
    html {
      font-size: 55px;
    }
}

通过媒体查询的范围设置html的font-size， 内容的单位统一转换成 rem

原理： html的font-size值控制 单位 rem的内容

例子
设计图是 750px 盒子测量 100px dpr2
1、 100px / dpr2 =50px

2、 50px / 50px =1rem（ 因为是375px font-size 除以50px)

分两种情况：

第一种直接转换 vw
比如设计图 750px 逻辑375px dpr2，
375px = 100vw
如果测量单位是100px
100px / 2 =50px
50px / 375px =13.33vw

第二种找中间单位 rem （这样做的目的是好计算）
比如设计图 750px 逻辑375px dpr2
先确定html的font-size值
100px / 375px = 26.6666666667vw;
1rem = 100px
如果测量单位是100px
100px / 2 =50px
50px / 100px = 0.5rem;

在网页中使用vw+rem:
1.先在html中写font-size:26.66667vw;
2.body设置font-size的值防止html的font-size被继承;
3.使用cssrem插件之前将基准font-size设置成200;
声明:
font-size无论在哪都可以自己定义

参考文档

https://juejin.cn/post/6967222005129019400

html{
font-size: 26.66667vw;
}

padding-bottom: env(safe-area-inset-bottom);
}

*{
box-sizing: border-box;
}