2020-11-30

学习内容：

学习时间：
晚上8点到十一点

学习产出：

1、浏览器默认样式：
*{margin:0;padding:0；}

2、内联元素的盒模型：
内联元素的内容区不能设置width和Height；
内边距：可以设置水平方向的内边距，可以设着垂直方向的内边距，但是不会影响页面的布局。
边框：可以设置边框，但是垂直方向不会影响布局，水平的会影响布局。
外边距：可以设置水平方向的外边距，不会重叠，而是求和；不支持垂直方向的外边距。

3、display和visibility：
display规定元素生成的框的类型。

inline-block：即可以设置宽高又不会独占一行
none：不显示，不占用位置

visibility:元素是否可见的状态

hidden：隐藏的元素不显示，但是会占位置

4、overflow：子元素内容超过父元素内容区，在父元素外边显示

scroll:无论是否有内容，都会添加水平和垂直方向的滚动条
auto：只在溢出的方向增加滚动条

5、文档流：网页最底层，元素默认处于文档流里面
【文档流里面】
块元素：独占一行，自上向下排列；默认宽度是父元素的100%，当元素的高度和宽度为auto时，指定内边距不会影响可见框的大小，会自动修改宽度，以适应内边距；默认高度是内容自身高度
内联元素：只占自身的大小，默认从左向右排列，如果一行放不下会自动换行；默认宽度和高度是内容自身的。

6、浮动一：float让元素脱离文档流

当为一个元素设置浮动以后（即float值不为none），元素会立即脱离文档流之后，下边的元素会立即向上移动，元素会向左上或者右上移动，直到遇到父元素的边框或者其他浮动元素。
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过该块元素
【可以通过改变顺序来实现】
浮动的元素不会超过他的兄弟元素，有可能挤在一块儿

7、浮动二：
浮动的元素不会盖住文字，文字会自动环绕在浮动的元素周围，可以设置文字环绕图片的效果。
块元素脱离文档流之后，高度和宽度都被内容撑开。
内联元素脱离文档流之后，会变成块元素。

8、简单布局：
注意宽度和高度的计算

9、高度塌陷问题：
在文档流中，父元素的高度默认被子元素撑开，但是给子元素设置浮动之后，父元素会高度塌陷，那么父元素下面的所有元素都会向上移动，布局会被改变。

完成情况：完成
基本没有问题