2021-01-20

第47集
padding区域内边距（内容区与边框的距离是内边距）
padding-top
padding-right
padding-bottom
padding–left
内边距的带线啊哦会影响盒子的大小
背景颜色会影响到内边距的颜色。对于设置.box{}的时候。长宽是内容的长宽，颜色是背景颜色。padding没有设置颜色
如果不对内容去专门区分会导致颜色不清晰
可以专门选中内容区，设置颜色。
padding+border+content是可见框的大小。
padding也可以同时指四个方向。盒子可见框的大小。
第48集
外边距不会影响盒子可见框的大小。会影响盒子的其他盒子的位置关系。
margin-top
上外边距，元素会往下移动。
margin-right
margin-bottom
margin-left
元素在页面默认在左上角。如果我们设置左上回移动元素自身。而设置下元素会移动别人。margin也可以设置负值，如果指定负值会往相反的方向走。
默认情况下设置margin-right不会有任何影响。
第49集
水平布局比较麻烦
水平方向的布局由
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
来决定的
一个元素在父元素中，水平布局必须满足以下形式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容去的宽度（必须满足）
以上元素必须成立，那么就称为过度约束，那么浏览器会自动调整。如果这几个值没有auto，那么浏览器会自动调整margin-right的值。
这里面的几个值有几个可以设置成auto的情况，width margin-left margin-right可以设置成auto的情况，如果某个值伪auto救会自动调整auto的值来设置。width默认是auto。
如果将宽度和一个外边距都设置为auto，那么宽度会调整到最大，外边距auto会自己设置为0。
如果三个值都设置为auto。宽度最大。
如果将两个外边距设置为auto，width设置为固定值。两个外边距会为相同。随意我们经常会设置他在父元素中水平居中。
如果width是1000.父元素是800.那么margin-right是-200会让他相等。
第50集
垂直方向布置
默认情况下父元素的高度是被内容撑开的。设置高度的话是多少就是多少。垂直方向不用特意满足布局。
如果子元素超过父元素的大小，就会溢出。子元素会从父元素溢出。
父元素使用overflow来设置父元素如何处理溢出的子元素
overflow:visible(默认值，子元素会从父元素溢出，在外面表现出来)
或者采用hidden值，hidden值就是溢出的内容裁剪不会显示出来。scroll生成两个滚动条。来查看内容。
或者auto根据需要生成滚动条。
overflow-x单独处理水平方向的问题
overflow-y单独处理竖直方向的布局。
第51集
下外边距会影响别的元素。
外边距重叠问题
只有垂直方向相邻的外边距会发成重叠。
兄弟间的垂直相邻的外边距会取两者之间的比较大的值。
如果是负值那么往方向移动。特殊情况下，如果相邻的外边距，那么就取两者的和。
兄弟之间外边距重叠是有益的，一般是不处理的。
父子元素
父子元素之间相邻外边距会传递给父元素，这个效果不好，所以对于父子外边距折叠会影响布局，所以必须处理。
临时处理：
可以设置padding-top但是需要处理盒子大小
可以加一个border-top这样可以解决。
第52集
行内元素的盒模型
行内元素不能设置宽度和高度。
padding可以生效。但是垂直方向的不会影响布局。可能会盖住元素，但是不会影响元素布局。
行内元素可以设置border，不会影响布局。
行内元素可以设置margin，不会影响布局。
display用来设置元素显示可选值
inline将元素设置为行内元素
blank将元素设置为块元素。
inline-block将元素设置为行内块元素
行内块元素，既可以设置宽度和高度又不会独占一行。尽量避免使用。
table将元素设置为一个表格
none元素不在页面中显示。隐藏一个元素，比如说京东点开有个下拉菜单。
visibility用来设置元素显示状态
visible默认值，元素在页面中显示正常
hidden元素在页面中不显示，但是他始终占据页面中位置。
第53集
通常情况下浏览器会元素设置一些默认样式
默认样式的存在会影响页面布局。在编写的时候会去除掉默认样式。（pc端的页面）
一种情况有可能是body的外边距。浏览器会提前设置
ul去掉左边的点
list-style:none;
如果要去掉样式表的话可以这样
开发的时候会用。
*{
margin：0；
padding：0；
}
去掉样式有专门的重置样式表。自己去找找就可以了。
第54集
做练习。
55、56、57、先不看是练习。