5.盒模型。
Box-sizing 属性 box-sizing: border-box; 内缩，外扩变内缩，应用到app上多，网页上不多。 box-sizing: content-box; 默认属性。
display属性 展示和显示
行内元素，块级元素。 块级元素 不能并排显示，能够设置宽高，不设置width属性，会自动撑满。div section header h系列，li ul。 行内元素，能并排显示，不能设置宽高，width自动收缩，a span em. B. U i等。
width属性表示盒子内容的宽度。 width属性的单位通常是px , 块级元素 div h li 没有设置width 属性时，它将自动撑满，但这并不意味着width可以继承。自动撑满。 a 行内元素。 如果设置了width height会根据内容适应。 如果不设置，他将自动被内容撑开，行内元素还是块级元素，都会自动撑满。 如果是块级元素，不设置width 只设置height ，会自动撑满。 不论是什么元素，如果设置了width height会根据内容适应。 行内元素 设置了宽高是没有效果的。
行内元素和块元素 img 表单元素 特殊的行内块，可以并排，又可以设置宽高。 元素的隐藏
行内元素和块级元素的相互转换。
1.将元素转为行内元素的应用不多见。 display: inline;转为行内元素。 通常写在开头。 display: block; 转为块级元素， display: inline-block;转为行内块 行内元素 margin - top 不会被撑大。
.a21 { background-color: teal; text-decoration: none; width: 200px; height: 200px; display: block; border-radius: 15px; }
<a href="" class="a21">按钮点击</a>
元素的隐藏
元素的隐藏 Display:none 元素彻底放弃位置 如同没有写这个标签一样。 Visibility:hidden 可以将元素隐藏，但是元素不放弃自己的位置。
/* visibility: hidden; */ 空的但是有位置。
display: none;
三周 浮动定位与背景样式
浮动： 浮动的基本概念，使用浮动实现网页布局，BFC规范和浏览器差异，清除浮动，
定位： 相对定位，绝对定位，固定定位。
浮动用来实现并排
1.要浮动 都浮动，如果父盒子没有足够空间，会达不到左浮动。 如果没有足够的空间，则会寻找前一个兄弟元素，如果再没有空间就寻找上一个，如果上一个也没有就去寻找父盒子。 2.浮动的元素不再区分块级元素还是行内元素，已经脱离了标准的文档流，一律能够设置宽度和高度，即使他是span或者是a标签。浮动元素一定能设置高度和宽度。 float: left;; float: right;
3.使用浮动实现网页的布局。
1.垂直显示的盒子，不要设置浮动，只有并排的盒子才需要设置浮动。 2.大盒子带着小盒子跑，一个大盒子中，又是一个小天地，内部可以继续使用浮动。 3.div可以多用，不要节约。
* {
margin: 0;
padding: 0;
}
header {
width: 1000px;
height: 100px;
margin: 0px auto;
/* background-color: rebeccapurple; */
}
.content {
width: 1000px;
height: 500px;
margin: 40px auto;
}
footer {
width: 1000px;
height: 100px;
background-color: salmon;
margin: 0 auto;
}
header .logo {
float: left;
width: 220px;
height: 100px;
background-color: orange;
}
header .login {
float: right;
width: 220px ;
height: 30px;
background-color: palegreen;
}
nav{
float: right;
width: 690px;
height: 50px;
margin-top: 20px;
background-color: green;
}
.content .ad{
float: left;
width: 300px;
height: 500px;
background-color: blue;
}
.content main{
float: right;
width: 680px;
height: 500px;
}
.content main .banner {
width: 680px;
height: 380px;
background-color: orange;
}
.content main .pics {
width: 680px;
height: 100px;
margin-top: 20px;
/* background-color: orange; */
}
.content main .pics ul{
list-style: none;
}
.content main .pics ul li{
float: left;
width: 160px;
height: 100px;
background-color: blue;
margin-right: 10px;
}
.content main .pics ul li:last-child{
width: 160px;
/* margin-right: 0px; */
}
</style>
<header>
<!-- logo -->
<div class="logo">
</div>
<!-- login -->
<div class="login">
</div>
<!-- navigation -->
<nav>
</nav>
</header>
<section class="content">
<aside class="ad">
</aside>
<main>
<div class="banner"></div>
<div class="pics">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</main>
</section>
<footer>
</footer>
BFC规范和浏览器差异，清除浮动，
块级格式化上下文，是页面上的一个隔离的独立容器，容器里面的字元素不会影响到外面的元素，反之亦然。
一个盒子不设置height,当内容
当一个盒子不设置height ,当内容子元素都浮动时，无法撑起自身。 这个盒子没有形成BFC.
没有设置float 盒子会撑起父盒子。
如何 创建BFC
1.float值不是none 2.position的值不是static. 或者 relative 3.display 的值是inline-block flex inline-flex 4.overflow hidden
Overflow hidden 溢出隐藏，溢出盒子边框的内容将会被隐藏。 是非常好用的让盒子形成BFC。
但是盒子的padding部分的溢出还是在的。 .div41 { width: 100px; height: 100px; background-color: yellow; overflow: hidden; padding: 20px; /* 超出边界的部分 隐藏 但是在padding的部分 溢出的还在*/ }
BFC 可以取消盒子margin塌陷 竖直方向上的。 BFC可以阻止元素被浮动元素覆盖。 取消盒子margin塌陷
p {
width: 200px;
height: 200px;
background-color: thistle;
margin: 50px;
}
<p></p>
<p></p>
如果不加div,两个p之间一共是50px.
并排的盒子都是需要浮动的。 IE6 IE7使用halayout机制， 内部有盒子的要设置高度。
清除浮动
1.清除浮动方法，让内部有浮动的父盒子形成BFC 它就能关闭住内部的浮动，此时更好的方法是overflow:hidden 属性。 关闭了自己的浮动，其他的就不会跟上来了。 overflow: hidden; 有关闭这块浮动，不影响下一块的浮动。
2.清除浮动方法2，给后面的父盒子 clear:both属性，clear表示清除浮动对自己的影响，both表示左右浮动都清除。 clear: both;在后一个盒子添加。 不怎么用 margin-top: 20px;会失效。
3.::after 伪元素给盒子添加最后一个字元素，并且给 ::after设置clear:both 是最常用的方法。 .div42 { } .div43 { margin-top: 20px; clear: both; } .clearfix::after { content: ''; clear: both; display: block; }
<div class="clearfix div43">
<p></p>
</div>
<div class="clearfix div43">
<p></p>
</div>
4.清除浮动方法4，在两个父盒子之间 “隔墙”隔一个携带clear:both的盒子。 墙的高度当作缝隙。