2022.09.23

记录自学笔记，今天已经是第六天啦，家人们冲冲冲！！！

1.外边距问题：

（1）结构问题：

嵌套的块级元素的垂直外边距塌陷

问题描述：

当父元素没有padding、margin、border时，他的子元素与父元素直接相邻、子元素的margin值发生合并，最终显示的结果去两者之间的最大值。负值取绝对值的最大值。

解决方法：

1.给父元素设置边框和内填充（慎用

溢出隐藏：2.给父元素添加：overflow：hiddien；（作用:改变渲染规则）

(2)结构关系：相邻元素的垂直外边距会合并

问题描述当两个块级兄弟元素的垂直外间距直接相遇时会发生合并，最终结果取两者之间的最大值，负值取绝对值的较大值

解决方法：

1.尽量只定义其中一个盒子的margin值。

2.给其中一个盒子加父元素，给它再来个overflow：hidden 改变渲染规则

css的显示模式

        块级元素有哪些？

                div  h  p  ul  li  ol  dl  dt  dd

       行级元素有哪些？

                span  a   b  i  em  strong  

        行内块元素有哪些？

                img  input（表单元素）

（1）块级元素的特性总结：

        1.独占一行，并且可以设置宽高

        2.在不设置宽度的情况下：块级盒子的宽度是他父级元素内容的宽度

        3.在不设置高度的情况下：块级盒子的高度是他本身的内容的高度

        4.可以设置上下左右的内填充和外边距

（2）行级元素的特性总结：

        1.默认并排显示、不能设置宽高。宽高取决于内容

        2.行级元素里面只能容纳文本或者行级元素，（不能往行级元素里嵌套块级元素）

        3.行级标签之间有间隙，不可以设置上下外边距，（上下内填充不能把文本挤下来）

（3行内块元素的特性总结：

        1.默认并排显示，可以设置宽高，宽度和高度取决于内容

        2.并排显示时，中间有间隙

        3.可以设置任一方向内填充和外边距

元素类型的转换：

        本身属性display：block； 的元素都是块级元素

        本身属性display：inline； 的元素都是行级元素

        本身属性display：inline-block； 的元素都是行内块元素

好啦，今天的知识就是这么多，欢迎小伙伴们前来参考学习！