内联元素与块元素

目录

内联元素的盒模型

内边距

外边距

display和visibility

overflow

文档流

       一、块元素

       二、内联元素

---

内联元素的盒模型

内边距

1.               内联元素不能设置width和height，只能由元素内容撑起来。
2.               内联元素可以设置水平方向的内边距
3.               内联样式可以设置垂直方向的内边距，但是不会影响页面的布局。
4.               为元素设置边框，内联元素可以设置边框，但是垂直的边框不会影响页面的布局。

外边距

1.               内联元素支持水平方向的外边距，水平方向的外边距不会重叠而是求和。
2.               内联元素不支持垂直方向的外边距。

display和visibility

将一个内联元素变成块元素，通过display样式可以修改元素的类型可选值：

•         inline：可以将一个元素作为内联元素显示
•         block：可以将一个元素设置成块元素显示
•         inline-block：将一个元素转换为行内块元素，可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
•         none：隐藏元素，不显示元素，并且元素不会在页面中继续占有位置

Visibility可以设置元素的隐藏和显示的状态可选值：

•         visible：默认值，元素默认会在页面显示
•         hidden：元素会隐藏不显示，虽然元素不会在页面中显示，但是它的位置不会消失。

overflow

        子元素默认存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容去大小，如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容，父元素默认将溢出内容在父元素外边显示，通过overflow可以设置父元素如何处理溢出内容，可选值：

•        visible：默认值，不会对溢出内容做任何处理，元素会在父元素以外的位置显示
•        hidden：溢出的内容会被修剪，不会显示
•        scroll：内容会被修建，但是会给父元素添加滚动条，通过滚动条查看完整内容，
• 该属性无论内容会不会溢出都会添加滚动条，
•        auto：会根据需求自动添加滚动条，需要水平添加水平，需要垂直添加垂直，都不需              要就都不会添加

文档流

        文档流处在网页的最底层，它表示的是一个页面中的位置，我们创建的元素默认都处在文档流中，元素在文档流中的特点：

       一、块元素

1.               块元素在文档流中会独占一行，块元素会自上向下排列
2.               块元素在文档流中默认宽度，是父元素宽度的100%
3.               块元素在文档流中的高度默认被内容撑开，

       二、内联元素

              内联元素在文档流中，只占自身的大小，会默认从左向右排列，如果一行中不足 以容纳所有元素，则会换到下一行，继续自左向右，

              在文档流中，内联元素的宽度和高度都会被内容撑开，

             当元素宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会 自动修改高度，以适应内边距