2021-01-21

第58集
盒模型
默认情况下，盒子大小是内容区域，内边距和边框共同决定的。
盒子模型中有个叫做box-sizing：content-box（用来设置盒子尺寸大小的计算方式）设置width和height的作用
content-box默认值，宽度和高度用来设置内容区大小。
border-box宽哥和高度用来设置整个盒子可见框的大小。
第59集
圆角与轮廓
border会影响元素的大小，hello会被影响。border换成outline别的不会被影响，就是增加一个轮廓线。用法和border一样。轮廓和边框不一样就是不会影响可见框的大小，一般手机hover使用。
box-shadow：10px 10px 20px颜色
用来设置元素阴影效果，阴影不会影响布局。偏移量。如果不设置就会不显示。第一个左右。第二个上下。正直向右偏移。
第三个值是阴影模糊半径。不会影响布局。
圆角：默认情况下我们是圆角效果。一般情况下border-radius用来是设置圆角。
border-top-lfte-radius左上角
border-top-right-radius右上角
border-bottom-right-radius右下角
border-bottom-lfte-radius左下角
有两个值水平方向的一个。竖直一个，不一样是椭圆。
也可以使用border-radious来设置四个值。分别是左上右上 右下，左下四个值，和之前顺序不太一样的四个值。这四个值是不一样的。
三个值是 左上、右上左下、右下
两个值左上右下，左下右上
一个值全部一样
如果向设置圆形 border-redious:50px
第60集
浮动
通过浮动可以让元素向左侧还有右侧浮动
float：none元素不浮动
float：right元素右边浮动
left元素往左浮动
设置完浮动后，水平布局的等式不需要强制执行。
元素这是浮动后，会丛文档流中脱离出来。不再占用文档流中的位置。所以元素下边的还在文档流中的元素会自动向上移动。
1.浮动元素会完全脱离文档流。不会占据文档流中的位置。
2.设置浮动元素会向父元素左侧或者右侧移动
3 浮动元素不会丛父元素中脱离出来。
4.浮动元素不会盖住其他的浮动元素。
5.如果浮动元素上面是个无法浮动的元素，那么浮动元素无法上移。
6.浮动元素不会超过上面的浮动兄弟元素，最多和他一样高。
让页面中元素可以水平排列，可以制作一些水平方向的布局
第61集
浮动的其他特点
浮动元素不会盖住元素，文字会味道在他附近。浮动元素不会盖住文字。就是为了文字围绕图片的。
元素设置浮动后会从文档流中脱离后，他的特点会发生变化
元素脱离文档流后会发生的特点：
块元素：
1.块元素不再独占页面中一行
2.脱离文档后块元素的高度和宽度被内容撑开

行内元素：
脱离文档流后，行内元素回变成块元素，特点和块元素一样。
脱离文档流后我们就不需要区分块和行内了，特点都一样了。
第62集
导航条练习。
第63集
网页布局，可以把网页分成一块块的。
创建头部

<header></header>

创建主体

<main></main>

网页底部

<footer></footer>

第64集
最重要的问题，高度塌陷问题。
就是如果内容很小会很丑，或者会有内容溢出的问题，父元素一般不写死。
在浮动布局中，父元素是是默认被子元素撑开的。当子元素浮动的时候，其会完全脱离文档流。导致父元素的高度丢失。
父元素丢失后，下面的元素会上衣。导致布局出现问题，所以我们必须处理。
可以把父元素写死。但是东西少会丑，多会塌陷。
BFC采用，BFC是块格式化环境。开启BFC回变成一个独立的布局区域。
开启BFC会变成一个独立的布局区域
开启BFC元素的特点。
1.开启BFC后不会被浮动元素覆盖。
2开启BFC后我们的子元素和父元素外边距不会重叠。
3.开启BFC元素可以包含浮动的子元素。不会出现塌陷问题。
通过一些特殊方式开启BFC
1.设置父元素浮动。（不推荐）
2.将元素设置为行内块元素。（不推荐）
3.将元素的overflow设置为一个非visible的值
overflow:hidden;
将父元素包含住子元素。
第66集

有一种方式比较好的方式解决高度塌陷问题
当我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清楚浮动元素对当前时刻产生的影响。
clear作用清楚浮动元素对当前元素产生的影响
可选值， left清除左侧元素对当前元素的影响
right清除右侧元素对当前元素的影响
这个写在不是浮动元素那里。
both清除两侧中最大影响的那一侧
原理设置清除浮动后，浏览器会自动为元素加上一个上外边距，让其他位置不受其他元素的影响。

第67集
高度塌陷的一个比较完美的解决方式
就是父元素里面有box1和box2，如果box1已经浮动，我们就把box2设置为clear：both，那么父元素就会随着box2变化而变化，但是box1也改变会引起box2的改变。
可以采用css添加
父元素::after{content="";
diaplay:block;
clear:both;}
就是添加一个尾类元素。
第68集
垂直外边距重叠。一个元素。
.box1::before{
content:"";
display:“table”;
}
所以我们常常出现一个方式
.clearfix::before，.clearfix::after{
content:"";
display:table;
clear:both;}
解决外边距重叠和高度塌陷问题。再遇到这些问题后直接使用。
直接再class里面添加添加一个clearfix。