内联元素的盒子模型与文档流定位padding属性

Posted 2020-11-10 牛译伟

        内联元素的盒子模型

• 1、内联元素不能设置width宽度和高度height

    span{width:200px ; height:200px}   与     span{width:100px ; height:100px}   表现效果相同，由此可见内联元素不可以设置高度和宽度

• 2、内联元素可以设置水平方向的内边距padding-left或padding-right

     span{padding-left:20px ; padding-right:200px} 

• 3、内联元素可以设置垂直方向的内边距padding-top 或 padding-bottom，但是这个样式不会影响页面的布局，会覆盖住下面的区域。

<span style=\'padding-top:50px;padding-bpttom:50px\'>
    内联元素一
</span> 
<div id="box2"></div>

• 4、内联元素可以设置边框，垂直方向依旧会覆盖下面区域，水平方向的边框会影响页面布局，会把其他的元素推向旁边。
• 5、内联元素支持水平方向的外边距(margin:left / margin:right)
• 6、垂直方向的外边距会重叠（margin:top /margin:bottom）

示例：设置多个span，设置前面的内联元素的水平方向的外边距    margin-right:100px  后面的内联元素的margin-left:100px;  那么二者之间的距离就变成了左右外边距相加，就是200px。

内联元素与块元素的盒子模型相比较，总结：

• 内联元素水平方向（左右）上的外边距不会重叠，计算两内联元素之间距离求边距之和；
  
• 内联元素支持水平方向（左右）上的外边距；
• 内联元素span不能设置宽度和高度，块元素div可以设置宽高；

---

 

     文档流定位 和 display属性

      通过上文对内联元素盒子模型的了解，那么 ，如果内联元素想为其设置宽高，使其具有块元素的特征该怎么做呢？又能不能把内联元素转换为块元素呢？

      css的定位机制所要表达的效果可以理解为 元素可以放在哪？

一、了解文档流

文档流flow 是元素定位一种默认的情况

定位特点：从上到下，从左到右，只是有部分元素会独占一行。

应用情况：默认的方式，如果要改变这种默认的样式可以选择浮动定位和层定位。

 二、文档流的定位方式

从上到下，从左到右依次排列，有的元素会自己独占一行，有的元素会和其他元素一起排列。

三、文档流的三种元素

（一）block元素

每个block类型的元素都独占一行，这种元素的width，height，padding，margin属性都是可以设置的；

常见的block类型元素有<div>，<p>，<h1>~<h6>，<table>，<form>，<ol>，<ul>

这是将a元素以block元素的样式显示（display）。从而使a元素有块状元素的特点。并且可以设置其高度宽度等属性。

还可以将其他元素设置为具有block属性，例如：a{display:block} 

注意：block 默认有自动换行的效果

 

（二）inline元素

在宽度够用的情况下，不单独占一行，都会在一行上显示。width，height，padding，margin属性不可设置。宽度由里面文字或者是图片的宽度所决定的。这是不可改变的。

常见的inline类型元素有<span>，<a>

默认情况下，如果使用inline类型元素排列，就会出现间隙问题。为了改变这种情况可以

<span><a href="#">内容</a></span>  inline元素外面放置一个block元素

还可以将其他元素设置为具有inline属性，例如：

display：inline

 

（三）inline-block元素

 inline-block元素有着inline元素和block元素共同的特点：

不单独占用一行

可以设置width，height，padding，margin属性

常见的inline-block类型元素：<img>

 将其他类型元素转换为inline-block类型的元素

display：inline-block

 

（四）display属性  （display规定生成框的类型）

• 内联元素的特征，所占区域仅仅为内容所占的区域。
• 块元素的特征，无论是否有内容都可以独占一行。

我们可以通过display属性改变元素样式，使内联元素变为块元素。

display属性可以有四个取值，规定元素生成的类型

display：none   表示这个元素不会被显示，并且元素不会再页面中占有位置

display：block  元素都显示为block元素，元素作为块元素显示(当元素的宽高属性起作用的时候就变表示成了块元素)

display：inline  元素都显示为inline元素，元素作为行内元素或是内联元素显示；

display：inline-block   显示为inline-block元素，把一个元素作为行内块元素显示；

 

---

        元素可见性的比较：display：none   与 visibility

1、display：none元素不被显示 （在上面有进行介绍过）。

• display：none 隐藏元素，并将其从文档流中完全移除，不保留元素原有的位置，其他的元素会取而代之。

2、visibility属性，控制元素是否可见。

与display：none不同的是 visibility隐藏元素时，元素的内容应该出现的位置会留下一片空白，隐藏元素的空白区域仍然会留在文档中占据位置。

visibility有两个属性：

• visibility：hidden      元素不可见，但在文档中仍然保留位置不会被其他元素占据
• visibility：visible       让隐藏的元素显示出来