浏览器默认样式

常规的默认样式（麻烦的）

body{
                        margin: 0;
                }
                p{
                        margin: 0;
                }
                ul{
                        margin: 0;
                        padding: 0;
                }

清除浏览器的默认样式（简便的）

*{
                                margin: 0;
                                padding: 0;
                        }

内联元素的盒模型

1.不能设置宽高
2.内边距：支持水平上的内边距和边框
        垂直方向上也支持，但是不影响布局
3.外边距：只支持水平方向，不支持垂直方向上
4.总之，水平方向上的都好使，水平方向上的都不太好使

display和visibility

display：规定元素应该生成的框的类型。
我们不能为行内元素设置width,height,margin-top和margin-bottom
我们可以通过修改display来修改元素的性质

可选值：
display:none：此元素不会被显示（隐藏元素）。
display: block：显示为块级元素，此元素前后会带有换行符。
display:inline：被显示为内联元素，元素前后没有换行符。
display:inline-block：行内块元素

display和visibility的区别？

1.  visibility隐藏的对象还保留对象显示时所占的物理空间，display则不保留。
2. vilibility：hidden(隐藏)、visible(显示) style="vislbility:hidden"
3. display：none(隐藏)、block(显示) style="display:none"

行内元素和块元素怎么转换？

用display

overflow

overflow   规定当内容溢出元素框时发生的事情。

当相关标签里面的内容超出了样式的宽度和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子

overflow：visible   默认值。内容不会被修剪，会呈现在元素框之外。
overflow： hidden   内容会被修剪，并且其余内容是不可见的。（最常见的）
overflow： scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow：auto  如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。  
overflow：inherit  规定应该从父元素继承 overflow 属性的值。

文档流

块：
1.独占一行，自上而下排列
2.宽度默认占父的100%（auto）
3.高度默认被内容撑开

内联：
1.只占自身大小，从左向右排列,自动换行，继续从左向右
2.宽高默认被内容撑开

浮动

浮动：使元素脱离原来的文本流，在父元素中浮动起来

float:none:不浮动
float:left:向左浮动
float:right:向右浮动

块元素和行元素都可以浮动，当一个行内元素浮动以后将会自动变成一个块元素
当一个块元素浮动以后，宽度会默认被内容撑开，
所以当漂浮一个块级元素时，我们都会为其指定一个高度
---------------------
【转载，仅作分享，侵删】
作者：YRyr.*
原文：https://blog.csdn.net/weixin_43152725/article/details/85245474

奈斯，感谢分享