CSS属性以及属性值-新

前言：css在浏览器中生成CSSOM树（即CSS Object Modle）。JavaScript可以操作CSSOM树。CSSOM树和Dom树生成render树。render树然后根据CSS中的值进行布局，最后将render树在浏览器中绘制出来。然后，可以通过JavaScript操作render树，对于改变了元素大小或者元素在树中的结构，都需要回流（即重新布局），然后进行重绘。

前面讲解了CSS的各种规定，具体能应用到哪些方面呢？【不同的元素，属性值有不同之处】

（一）文字排版

      1.字体

      font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

      注释：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

      例如：body{font-family:"宋体";}     选择器{font-family：“字体名称”}

          

      这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）

       现在一般网页喜欢设置“微软雅黑”，如下代码：

       body{font-family:"Microsoft Yahei";}

       或

       body{font-family:"微软雅黑";}

       注意：第一种方法比第二种方法兼容性更好一些。

     font-family:"microsoft yahei",simhei; 这句到底设置为微软雅黑还是黑体，为什么写2个字体？^{字体设置都是设置集合。意思是：优先使用微软雅黑，如果客户端未安装雅黑则使用黑体，如果两者都找不到，则使用系统默认字体。像中文环境，只能指定：雅黑，黑体，宋体，楷体。其中宋体多为默认。雅黑只有VISTA及以上才预装。一般对中文最好不指定字体，非使用艺术字体的话可以使用图片形式。}

      2.字号、颜色

      字号:  选择器{font-size：x px;}            颜色:选择器{color：red;}

     可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：

  body{font-size:12px;color:#666;}

  3.字体样式
  font-style 属性主要用于指定斜体文本。

      此属性可设置三个值：

• normal - 文字正常显示
• italic - 文本以斜体显示
• oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
•  

      我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。

    p span{font-weight:bold;}

  p span{font-weight:normal;}  

       在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。

      3.字符转换

      text-transform 属性处理文本(字母)的大小写。这个属性有 4 个值：

                                                                                         none

                                                                                         upercase

                                                                                         lowercase

                                                                                         capitalize

         默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

         作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：

     h1 {text-transform: uppercase}

          使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。

          

      5. white-space（^{一个元素内容中的空白的处理}）

       属性设置如何处理元素内的空白

    

        通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

        

         可以用以下声明显式地设置这种默认行为：

    p {white-space: normal;}

        上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

        值 pre

        不过，如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。

        如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。

       

       值 nowrap（不能换行，除非遇到<br/>）

        与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。

        值 pre-wrap 和 pre-line

        当 white-space 属性设置为 pre-wrap 时，浏览器不仅会保留空白符并保留换行符，还允许自动换行

         

      7.缩进^{【1.只能用于块状元素的首行缩进；2.值可以是负值也可以是正值】}

      中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：

  p{text-indent:2em;}    2em的意思就是文字的2倍大小

      注意：一般来说，可以为所有块级元素应用text-indent属性，但无法将该元素应用于行内元素，图像之类的替换元素也无法应用text-indent属性。不过，如果一个块级元素（比如段落）的首行中有图片，它会随该行的其余文本移动。

      提示：如果想把行内元素的第一行进行缩进，可以用左内边距或者外边距创造这种效果。

      text-indent的属性值可以是长度，长度甚至可以是负值。

      使用负值

      text-indent可以使用负值.利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边。例如：

      p{text-indent:-5em;}

      不过在text-indent设置负值的时候要小心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。

      为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

   p {text-indent: -5em; padding-left: 5em;}
  

     8.word-spacing（单词间隔）

       word-spacing属性增加或减少单词间的空白（即间隔）；该属性定义元素中字之间插入多少空白符。针对这个属性，“字”定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔。所以，normal就等同于设置为0，允许指定负长度值，这会让字之间挤得更紧。

     

 

      9.letter-spacing^{（单词/文字之间的间隔）}

       letter-spacing用于增加或者减少字符间的空白（字符间距）；

       该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度时，会调整字母之间通常的间隔。因此，normal值相当于0.

       注释：允许使用负值，这会让字母之间挤得更紧。

       

       letter-spacing与word-spacing之间的区别：letter-spacing是设置字母（文字）之间的距离，而word-spacing设置单词之间的间隔,word-sapcing对文字没有效果！

      10. 文本装饰

       text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。text-decoration属性规定添加到文本的修饰。这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中，即具有继承性。

       text-decoration 有 5 个值：

                                            none

                                            underline

                                            overline

                                            line-through

                                            blink

       （1）underline下划线

         有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：

         p a{text-decoration:underline;}

       （2）line-through删除线

          如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到：

          上图中的原价上的删除线使用下面代码就可以实现：

     .oldPrice{text-decoration:line-through;}

       （3）blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

       （4）none       值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

    a {text-decoration: none;}

         注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。

 

  8.行高（行高line-height和vertical-align：每个元素默认都有一个line-height值;每个元素同样都有默认的对齐方式即vertical-align 参考网址：https://www.cnblogs.com/keyi/p/5841222.html）

       【1】行高的概念^{【默认情况下，一行内容是按照基线对齐的。为什么呢？因为vertical-align的默认是baseline。在css的样式属性中，有些属性不需要我们去设置都有默认值，因为浏览器给设置了默认值，比如，text-align的默认值是：left！切记：line-height和vertical-align只要有一个就存在另一个的值！两个相偎相依，不可分割！】}

         line-height行高是指文本行两行文字基线之间的距离。「行高line-height实际上就是两行文字之间的距离，跟元素没有直接的关系，即，不管给什么元素设置了行高，这个    都指的是该元素所包含文本的两行文字基线之间的距离（包含文本的元素有内联元素，内联块状元素，块状元素）。可以为一个块级元素、内联块状元素、内联元素设置line-height，但这个值要么是直接让子元素继承（<div style="line-height:30px"><span>X</span></div>//这里的line-height直接继承给span子元素，line-height应用到了span元素中的文字X。），要么就是直接应用到该元素直接包含的文本中（<div style="line-height:30px"><span>X</span>Y</div>//这里的line-height一是span元素继承，了另一方面应用到了div所包含的”Y“这个文字上）。

          那么，有一个问题，我们修改一下第二个要么中的例子：<div style="line-height:30px"><span style="line-height:50px">X</span>Y</div>即div这个元素包含一个内联元素，这个内联元素的行高是50px,而div元素的Y文字的行高是30px，div元素的这一行怎么显示呢？岂不是层次不齐？【首先span的文本的行高是50，相比要么2中，那么就会在X这个字体的上下再各j加10px。这样X字体就向下偏移了10px,而div元素中的文字Y则保持不变。这样，div元素这一行岂不是层次不齐？这就需要vertical-align来解决这个问题，即让一行中的子元素如何和父元素的这一行对齐。所以这就解释了为什么light-height和vertical-align必须同时都存在，不可分割。一行中的所有行内框都可以有自己的line-height，把这一行整的乱七八糟，这就需要这一样的子元素设置vertical-align来收拾自己的残局，保持父元素这一样的干净整洁。】

        注：对于块状元素和内联块状元素，如果高度固定，设置line-height设置的值过大，则会导致文字溢出，并不会改变块状元素或者内联块状元素的尺寸以及显示的位置。       例一<div style="background-color: #cab5ed;">

    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="100px" width="100px" style="">
    <!--<span style="display: inline-block;width: 100px;height: 100px;border: 1px solid;background-color: aqua">X，查找一个元素的基线</span>X<span></span>-->
</div>

 

　 　 显示如下：

 

        1.我们给父元素div设置line-height：150px.分析：这个行高应用于两个部分：1.继承给子元素；2.自己应用于自己包含的文字。这里，div只有一个子元素，故而只能应用于1即继承。故而，这里的div高度不会改变。（这里div高度没有设置为固定值，如果设置为固定值，div中即使有文字，也无论值设置的多大，div的高度都不会改变）。对于子元素img是一个内联块状元素，由于这个元素里面没有文字，故而继承来的line-height也没有勇武之地。因而，保持现有样式不会改变

                    

 

       这里如果给div里面添加文字，即：     

<div style="background-color: #cab5ed;line-height：150px">
    X<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="100px" width="100px" style="">
    <!--<span style="display: inline-block;width: 100px;height: 100px;border: 1px solid;background-color: aqua">X，查找一个元素的基线</span>X<span></span>-->
</div>

　 　分析由于div的line-height是150px,故而X的行高就是150px，而X的底边缘是div的基线，而行框中的行内框的垂直对齐方式（vertical-align:baseline）默认值是基线对齐，故而图片和X的底边缘对齐。

         

        例二 ：测试行高对行内块状元素的影响（块状元素高度固定的的情况下，没有影响，只是如果设置的行高值太大，文字会溢出。和块状元素一样的）      

<div style="background-color: #cab5ed;">
    <!--X<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="100px" width="100px" style="">-->
    <span style="display: inline-block;width: 100px;height: 100px;border: 1px solid;background-color: aqua"></span>
</div>

        显示如下：

      

 

        1.给父元素div设置line-height：150px；这里的分析和上面的图片分析一样，没有任何改变。

        2.给内联块状元素添加文字。    

<div style="background-color: #cab5ed;line-height:80px;">
    <!--X<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="100px" width="100px" style="">-->
    <span style="display: inline-block;width: 100px;height: 100px;border: 1px solid;background-color: aqua">X，测试line-height对内联块状的影响</span>
</div>

        分析：div设置了line-height：80px;子元素块状元素span内联块状元素继承了该属性，由于div中没有文字，故而不会对div有影响。对于内联块状元素span，由于其里面有文字，故而line-height作用于这些文字中即line-height：80px。对于高度固定的内联块状元素，line-height只是让文字溢出。并不会改变该元素的位置和高度。

       

       3.如果在2的基础上，我们给div元素再添加一个内联块状元素呢？元素的位置应该显示在哪? 

        分析： 新的内联块状元素的行高继承了div的行高，也就是行高为80px；又因为默认的是基线对齐，即新增的内联元素的基线要和父元素的基线对齐。而父元素中之前只有一个子元素，故而父元素的基线为原来子元素的基线。而原来的子元素是一个内联块状元素，由于该内联块状元素中有文本，故而基线为正常流中最后一个内容所确定的基线。通过上图，我们知道最后一行"height对内联”的基线在这个些文字的底边缘，故而新增的内联块状元素的基线和最后一行文字的底边缘对齐；那么新增的内联块状元素的基线在哪呢？由于只有一行文字，故而基线为这行文字的底边缘。显示结果如图所示：

        

        这里为什么div的高度会变化？首先因为div没有设置固定值。其次，受第二个子元素的影响。第二个子元素也没有设置高度，因为行高是80，故而其高度被撑到80.又因为div没有设置告诉，故而这个子元素又把父元素撑大了。

      行高对内联元素的影响：

                                  1.行高会影响内联元素的位置！因为内联元素就是文字，故而文字因行高显示在哪，内联元素就显示在哪。内联元素的高度由字体大小决定。

                                  2. 行高不会应县内联盒子的高度。只改变其显示的位置。注：内联盒子包围着文字，故而内联盒子和文字之间还有一小丢丢距离，这个距离就是我们选中文字的时候，蓝色背景和文字之间的那一丢丢距离。如图所示：                        

<div style="background-color: #cab5ed;line-height: 80px;width: 200px;">
    <!--X<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="100px" width="100px" style="">-->
    <!--<span style="display: inline-block;width: 100px;height: 100px;border: 1px solid;background-color: aqua">X，测试line-height对内联块状的影响</span><span style="display: inline-block;background-color: red">X</span>-->
    <span style="background-color: aqua">X，测试line-height对内联的影响，X，测试line-height对内联的影响</span>X
</div>

           这里注意，X和最后一行之间的对齐。X和span标签里面的文字对齐，而不是和span标签的底部对齐。因为是基线对齐，故而，一定是文字的底边对齐。

     」

 

       这一小节我们来学习一下另一个在段落排版中起重要作用的（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。

 

       *行高与行高有关的一些定义

    行高只是（就是）两行文字之间的基线距离。（一行指的的就是行框，一行的上线是行框的顶端，下线是行框的底端。第一行的行框和该元素的内容区的上边重合。至于最后一行是否和该元素的内容区的下边重合，视情况而定）

              

                  

               这也明说行内框=line-height的高度值；（我们所写的每一行文字或者一行中的一部分内容就是行内框的表现，即文字在行内框的中间，二分之一的行间距就是除了文字之外的空隙部分。）

  行内框：line-height（行高）-内容区域【内容区就是鼠标选中文字的区域，这个区域是由字体大小和字体样式决定的，如果是宋体，则字体大小刚好=内容区的高度；其他字体，则内容区高度一般>字体大小】=行间距；

         内容区+两个半行间距=行内框（我们能够看到的高度就是行内框。）。
           

                  

                

                 

               

  行框：一行中，行内框的最顶端与行内框最低端的距离为行框。
          
          

           

            示例： <p>这是一行普通的文字，这里有个<em>em</em>标签。</p> 

            

            

                

                鼠标选中文字的时候，选中的则为内容区域               

               

               

          

        *line-height的特点：

         行高只是幕后黑手，高度的表现不是行高，而是内容区和行间距。这句话怎么理解呢？就是说，我们给一个元素只有一行内容，我们给该元素设置行高为20px,我们所看的20px的高度就是1/2行间距+内容区域+1/2行间距的高度即行内框。而行高，我们是看不见的，没有表现出来，虽然它决定这行文字的高度。

        

           一定要注意，行高指的是两行文字之间的基线距离。那么这两行文字的基线该如何确定呢？

        *基线^{（这里说的基线和vertical-align基本没有关系，vertical-align是元素和其父元素的对齐方式。每个元素的每一行都有一条基线。至于这一行的基线怎么确定？就是在这一行输入一个X，X的底边缘就是本行的基线。）} 

         总说基线基线，那么基线的位置在哪呢？

         元素一个行的基线就是在这一行输入字母X的底边缘！

         基线分为元素行内基线和内联块状元素基线。元素行内基线就是上述的基线；内联块状元素就是整个元素的基线，该基线具体的确定方式根据元素的情况有所不同。    

          1.内联元素的基线（内联元素比较特殊，内联盒子没有行高，只是其内部的每一行都具有行高）

           即整个内联块状元素盒子的基线的确定方式如下：（内联元素的一个行的基线的确定方式。）

          

 

          2.内联块状元素（把内联块状元素当做一个盒子，该盒子的基线的确定）

 

        

 

           

           即如果内联块状元素为空或者overflow属性不是visible、该内联块状元素设有float或者position:abslute，基线为margin低边缘；否则，受里面图片文字等决定的。

           例如：            

<style>
    .inblock_base_line{
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid;
    }
</style>

<div style="background-color: yellow">
    <div class="inblock_base_line"></div>
    <div class="inblock_base_line">z_x_linejah</div>X加啊啊啊啊啊啊
</div>

          这个的显示结果会是啥呢？我们分析一下，首先 .inblock_base_line这两个元素都是内联块状元素，那么其和父元素的其他元素显示在一行，而且他们都没有设置vertical-align即即和父元素的对齐方式，因此默认这两个内联块状元素和该元素的对齐方式是：该元素的基线和其所在行的基线对齐。

        父元素的基线即所在行的基线："X加啊啊啊啊啊"在页面中的位置的底边缘。

         第一个元素的基线：因为该元素是空，因此 ，该元素的基线是margin的边缘。                  

         第二个元素的基线：因为该元素是包含正常流，因此，该元素的基线是正常流最后一个包含元素的基线，即z_x_linejah的基线

         三条基线都找到了，根据这个内联块状元素的基线都要和其所在行的基线对齐，因此，最后页面的显示结果为：

       

        * 块状元素整个盒子不需要基线，因为其独占一行，根本没有其他元素和其在一行，因此，不需要vertical-align属性

         行高和基线的关系： 一个元素的相邻两条基线之间的距离是由行高决定的。行高越大，基线之间的距离就越大。每一行的基线的位置：在该行输入X,X的底部就是这一行的基线的位置。

        

         *内联元素和内联块状元素的规则——与line-height不可分割的另一个属性Vertical-align.

         每一个内联块状元素和内联元素都有一个属性就是vertical-align，这个属性就是表示整个元素和父元素的所在行的对齐方式，所有的内联元素或者内联块状元素都默认有这个属性，并且这个属性是:vertical-align:baseline,即内联元素或者内联块状元素和其所在行的基线对齐。(当然内联元素或者内联块状元素内部的每一行都有line-height和基线)，vertical-align不针对元素内部，而是元素整个盒子和其父元素的其所在行的对齐方式。

           这里会有一个问题，如果这个内联块状元素所在行没有文字，那么它怎么跟该行的基线对齐呢？这时候，我们就可以默认为父元素的该行有个隐形的X，这个X在哪，这行的基线就在哪。

   

       *line-height的属性值 

          

          normal：行高和浏览器有关，不同的浏览器下，行高不一样。在同一浏览器下，字体大小不同或者不同的字体的行高也不一致，例如同样大小的24号字体的宋体和微软雅黑的行高也不一样。

        

         因此，我们在实际开发中，为了避免这种不确定性，在body及其元素里面进行reset初始化

     

      

       

        

           

             因此，一般推荐使用数值  

 

       *line-height的应用

    【1】行高和图片的表现[*******因为每个内联块状元素或者内联元素的属性vertical-align的默认值是：baseline，即其基线要和父元素的基线对齐，因此，在实际开发中会遇到各种各样的因为基线对齐而产生的问题，根据这个根本原因，所有的问题都可以有解决的办法******幽灵空白节点！]

       替换元素（图片等【只要是display:inline-block水平，都可以将其看成是一个图片。这个元素后面跟图片一样跟着幽灵空白节点。相当于一个看不见的X吧】）

　　 默认地，行内替换元素位于父元素的基线上(也就是假如在父元素中输入X，X的底边缘)【因为图片没有包括内容，因此其基线就是margin的边缘，也就是图片的底边缘是】。替换元素的基线是正常流中最后一个内容的基线。除非，该替换元素内容为空或者本身的overflow属性值不是visible，这种情况下基线是margin底边缘；图片的基线就是底线^{【因为img标签没有内容】}

       行高和图片实际占据高度的关系:行高不会影响图片实际占据的高度,也就是说不管行高怎么变化，图片所占据的高度都不会改变。

      实战中遇到的问题以及解决办法：

      块状元素中只有图片，有空隙

        

       父元素div没有设置高度以及行高^{【前提条件】}，并且只有一个img子元素。如图所示，图片下方有间隙，不是根据img的高度显示。这是为什么？分析如下：

         1.首先图片是一个内联块状元素，因此，A.图片这个盒子是有基线的，这个基线就是图片的底边缘；

                                                             B.这个图片有默认的属性vertical-align:baseline，因此，这个图片的基线要和所在行的父元素的基线对齐。

        2.父元素的基线：这个例子中，父元素只有图片一个子元素，没有其他的文字，该行的基线怎么找呢？那就是我们可以默认在这行有一个隐藏X，这个X的下边缘就是该行的基线。图片的基线也就是和隐藏的文字X的下边缘对齐。

       3.因为浏览器会对所有元素都设有默认的行高，因此，div的每一行都有一个默认的行高，这个行高的表现就是X的上边和下边都各加（行高-X字体的内容区）/2。因此，这里，图片不能和div的底边缘重合，空隙的部分就是1/2的行间距。

        解决办法：

         1.解决X的底部的1/2的行间距。我们修改浏览器给div设置的默认的line-height，修改为line-height：0，这样行间距都成了负值，没有了行间距。【一般不采用这种方式】

         2.修改图片和父元素的对齐方式。即修改浏览器给img图片设置的默认vertical-align，修改为vertical-align:top/middle/bottm

         3.将图片设置为display：block。这样的话，这个图片就没有vertical-align这一属性，即不需要和谁对齐了，独占一行。

         

          

          即                     

        

             

       【2】line-height与居中 ^{[1.看家本领：设置行间距；2.图片、文字居中（行内元素和行内块状元素）记住：vertical-align对块状元素没有作用，因为vertical-align的对齐必须有跟其一行的参考元素！]}

       父容器宽度固定，必须line-height 或者line-height和vertical-align配合使用 ^{【注：父元素的内容区的顶端总是和第一行的行框盒子的顶端重合。如果没有设置高度，那么父元素的底端和最后一行的行框盒子的底端重合。如果设置了高度，那么就会文字内容溢出】} 

         1.单行文本的居中：^{【这里指的是父容器高度固定；如果高度不固定，以下面的为例，父容器的高度是被子元素撑开的。父元素的高度是无知的，怎么垂直居中呀？】}

            例如<p style="height:300px">我是一个段落</p>  

             现在我们要实现P元素中的这句话在P元素中垂直居中。分析如下：

          首先这个P元素有一个默认的行高，这个行高的值是浏览器给定的。这个时候，P元素的内容 ”我是一个段落“文本形成的匿名行内框，这一行只有这一个行内框，故而这个行内框也就是行框。又因为这个行框是第一行的行框，故而这个行框的上边和P元素的内容区的上边重合，而这个行内框的高度是浏览器给定的，这里假设是20。这时候我们给p元素的line-height也设置100px，这时候每基线会下移，即行内框的高度为100px(行高=行内框)，即这时候这个行内框的下边和p元素的下边重合，而又因为文字在行内框中间，故而就实现了单行文本在父元素中的垂直居中。

             即 设置height=line-height。<p style="height:300px;line-height:300px"></p>        

              

 

              演变：（1）<div style='height=100px;line-height=100px'><p>我是一个段落</p></div>//这里其实和上面一个例子的本质是一样的，虽然给父容器设置了line-height,但是line-height具有继承性，故而p元素继承了这个属性。【反正你给了我line-height的值，那么我的行内框的值也就是怎么多，我要在行内框中居中，而p元素没有设置高度，故而p元素的高度就是行内框撑开的高度，我就居中了】

               

             演变：(2)<div style='height=100px;line-height=100px'><span>我是一个段落</span></div>//这里也是一样，因为继承性。但是这里和上面一个例子有不同之处，span元素的内容区的高度不会改变，只是行间距改变了。

               

             再例如：

              

             

           总结：对于单行文本无轮是父容器设置line-height=height还是子元素设置line-height=父容器的height，子元素中的单行文本都会居中显示(这是因为子元素继承了父元素的line-height的值，故而子元素中的文本会在子元素中居中)^{【这里的子元素没有设置line-height值和高度.即子元素和父元素的高度一样的[对于能够设置高度的块状元素或者内联块状元素]】}。当然，只有一个父容器包围的单行文本同样也会居中显示。 

 

         2.多行文字在父容器中的垂直居中：^{【这个父容器当然也是高度固定，高度不固定，怎么垂直居中？}】 

          多行文字的垂直居中可以把整体看成一个图片一样的元素，居中方式和图片一样。

            

           //这里添加一个空元素i,设置为内联块状元素（目的是可以设置高度），高度设置的和父元素一样高（这样，这个元素就是最高的行内框盒子了，故而父元素的顶端和底端刚好可以和行框顶端底端对齐，从而这个元素的中心点就是父元素的中心点）。这个元素设置vertical-align：middle，父元素的基线往上1/2处和这个元素的中点对齐，故而父元素的中心点和这个元素的中心点重合，这时候给多行文本设置vertical-align，故而多行文本的中点和父元素的中点刚好重合。

             

 

             3.图片在父容器中的垂直居中：^{【这个父容器当然也是高度固定，高度不固定，怎么垂直居中？}】  

<!--图片的垂直居中-->
<div style="height: 300px;border: 2px solid">
    <img src="../1.png">
</div>

          

          我们想让img在父元素div中居中，该怎么设置CSS呢？ 我们分析：

                                                                                                           1.图片是一个内联块状元素，可以和其他的元素在一行中显示。因此，我们可以给父元素设置line-height=height，这样，我们父元素的隐藏的X就居中了。而内联元素都必须有vertical-align属性即该元素和父元素中其所在行的隐形元素X对齐方式，这时候我们可以修改图片的vertical-align:middle即图片的中线和父元素的基线往上1/2X的高度处对齐，即图片的中点和父元素的垂直方向的中点对齐，故而实现了图片的近似垂直居中。

          即：

<!--图片的垂直居中-->
<div style="height: 300px;border: 2px solid;line-height: 300px;text-align: center">
    <img src="../1.png" style="vertical-align: middle">
</div>

          

         再例如：

          这时候，我们给父容器设置line-height：300.(同时给图片后面加一个X，便于理解！)  分析：X因为是文字，故而其行高是300px。图片虽然继承了行高300PX，但是图片中没有文字，故而行高对它的没有任何作用。这个父容器中一共有两个子元素，故而行框的顶端为最高的X这个行内框的顶端，行框的最底端为X这个行内款的最底端。又由于父元素的最顶端和第一行行框的顶端对齐，而长度都是300，故而父元素的底端也和这个行框的底端对齐。故而，X在垂直方向上就是这个父元素的中心位置。又由于图片和父元素的基线对齐，故而，显示如下图所示：

            

           X倒是居中了，我们要实现的图片居中啊！这时候就需要用到vertical-align:middle了即改变图片和其所在行基线的对齐方式为中点对齐。【单独将图片摘出来，和其所在行的基线看是怎么对齐。具体的对齐方式在vetical-align中讲解】  

           这里我们给图片设置：vertical-align:middle,即图片的中点和父元素基线往上1/2X处对齐，故而实现了其垂直居中。（近似垂直居中）

                

        总结：图片垂直居中（父元素高度固定，设置父元素高度和行高值一样大；img设置vertical-align：middle）

     

                       

           

 

                

         父容器高度不固定，无法设置line-height=height。只需要vertical-align就可以实现垂直居中（这个例子和上述的例子本质很相似。只不过这里父容器没有设置高度，故而可以实现父容器的顶端和第一行的行框盒子的顶端对齐，父容器的底端和最后一行的行框盒子的底端对齐。只有图片和文字。包含文字的元素设置为内联块状元素，相当于图片。父容器的顶端和底端和这两个中一个的内联盒子的顶端和底端重合。如过左边的高度没有图片的高度大，那么父元素的高度则为图片的高度。<这里的图片就和上面设置的<i></i>元素一样。图片的中点和父容器的中点重合，给图片设置vertical-align:middle,图片的中点和父元素基线往上1/2处对齐，这时候又因为图片高度和父元素的高度一样，故而二者完美重合，因为这时候图片还是和原来现实一样。这时候，我们给左边的元素设置vertical-align:middle,即这个元素的中心点和图片的中心点在一条线上，故而这个元素的中点就和父容器的中心点在一条线上，故而实现了左边的垂直居中，二者都居中了。反之，如果左边大高度大，一样的道理>）

        

 

          

 

      *line-height与内联元素【^{行高的表现，内联元素[一般情况下，一个内联元素应该是只有几个文字，反正就是最多是一行文字的。]不同于内联块状元素和块状元素。内联元素里面的文字的行高除了受自身行高的影响外，还可能受和其在行的其他元素的影响即行框的高度。如果内联元素的行高<行框的告诉，虽然给内联元素设置行高，但是该元素的文字表现的行高是行框的高度。】}

      一行是由不同的行内框盒子组成的行框，因此，父元素的这一行就是行框

      （1）行内元素设置行高，为什么不生效还是表现为父类盒子的行高？

          例如：<p><span>文本内容</span></p>

         请注意暗红色的幽灵空白节点是块状元素貌似特有的一个性质，是看不见的，无形的(块状元素的每一行都有这么一个幽灵空白节点)。本质是因为这个span元素要和父元素中其所在行的基线对齐，而这时候这一行没有父元素的文字，因此只能以隐藏的X的基线作为父元素这一行的基线，从而span元素的基线和该元素的基线对齐。

        例如：

<head>
    <style type=""text/css">
          p{line-height:96px;}
          span{line-height:20px;}
    </style>
</head>
<body>
     <p>
           <span>span标签中的文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
     </p>
</body>

        为了让文字换行体现效果，我把浏览器缩窄一些，span标签中的文字放多一点，上述代码页面表现为：

         

 

       如上图，span的line-height属性确实设置上了，并且覆盖了来自继承父类p元素的line-height值96px,但是从Span的表现来看，行高仍然是96px！行高失效?

       分析：span的行高应该是20px，幽灵空白节点的行高为96px，这个行高撑起了高度，所以父元素的高度为最高的高度即可以认为是该行的高度就是行框。

       但是，这里通过换行我们可以发现span表现的并不是20px,而是96px ！而且通过调试器我们发现，上下调整span的line-height页面根本一点变化都没有，纹丝不动！

这时候小白就要说话了，行内元素的行高设置无效！聪明的你试一下就会发现，行内元素当然是可以设置行高属性的。那这里为什么会设置无效呢？其实当你设置span的行高超过父元素的时候，你就会发现，有意思的现象出现了！

       没错，span的行高生效了！

       

       
         那么问题来了，说不生效吧，比父元素行高大的时候它生效了，说生效吧，小于父元素行高的时候多少都没用，什么情况?问题不急着回答，再看下面一个例子：

         

         高度不用说，按照张大佬得出的大值特性，肯定是160px。那行高呢？各位不妨猜猜最终的表现， 

         结合上述盒子模型图，在这个例子中应该是这样的

         

          幽灵空白节点继承父元素的行高属性 ，各个内联盒子自身有自身的行高属性，但是这些“行高属性”都不是作用在自身而是作用在如图的行框盒子上，

而行框盒子又反过来让其内的所有内联盒子表现出行高的特性。打个通俗点的比方讲就是，爸爸问自己的儿子们今晚吃啥，儿子们提意见，爸爸其中一个的意见后发出命令，今晚大家都吃这个！

儿子们自己决定不了，但可以提意见，切回行高就是，内联盒子决定不了自己所在行的行高，但是可以告诉行框盒子，我想是这么多！(line-height:***)

          最后带来一个小例子，提醒一下各位看官，行框盒子的行高也不是固定，什么意思呢？还是上例的样式（为了方便观看，我为对应元素加上底色，

同时去掉margin和padding的影响），请看：

              

             调整浏览器的宽度，使换行，效果如下：

              

            就不卖关子，直接说了，这里变成了这样：

            一个包含盒子（包含块）p，4个行框盒子，4个行框盒子。

           第一个行框盒子里包含了幽灵空白节点+span标签的前部分，

           第二个行框盒子包含了幽灵空白节点、span标签的后部分和em标签的前部分，

           第三个行框盒子包含了幽灵空白节点、em的后部分和b标签的前部分，

           第四个行框盒子包含了幽灵空白节点、b标签的后部分。

           四行表现的行高分别是 40px 、80px、160px、160px。       

            最后的最后来个总结：

            1. 行内元素的line-height属性是去设置该元素所在行框盒子的行高，行框盒子取其内部所有内联盒子要求的行高的最大值，定为当前行的行高，所有内联盒子遵守这个最终行高来行事！

           2.换行后生成新的行框盒子，新生成的行的行高，重新在当前行包含的内联盒子中选拔最高者定之！

          行高具体到每一行，每一行根据每个内联盒子的行高而确定该行的行高，注意别忘了幽灵空白即隐藏的X文字。如果该行有父元素的文字，那么这个隐藏的X文字就在该行消失了。

          切记，切记，切记：line-height，基线、vertical-align使用的时候只按照定义来，不要自己胡乱给人家加一些东西。

                                   而且，要注意，一行就是行框区域。一个元素的第一行的行框的上边缘和该元素的上边缘重合。最后一行行框的下边缘和该元素的下边缘：如果该元素没有设置高度，则两条线重合；如果如元素设有高度，则极有可能不会重合。当然如果是由padding，则是和padding的边缘重合。

 

        9.vertical-align^{【对齐行内元素是x相对齐。比如该元素对于父类基线的垂直对齐方式。也就是说，vertical-middle能够作用的元素就是那些和其他元素显示在一行的元素。那么这些元素肯定就是内联元素，内联块状元素，以及td。而块状元素独占一行，没有参考对齐的元素，故而失效】。【line-height：只负责元素内的两行文字的基线距离；line-height中的元素包括：块状元素、内联块状元素、内联元素。vertical-align：负责是元素和该元素所在父元素的这一行的对齐方式。即该元素和父元素的对齐方式。vertical-align中的元素包括：内联块状元素、内联元素。vertical-align是以整个元素为一个盒子，这个盒子整体和其父元素中的其所在行的对齐方式。】}

　      *定义： 用来设置内联块状元素的垂直对齐方式；该属性定义了行内元素和父元素的的垂直对齐方式。

                       vertical-align 属性设置元素的垂直对齐方式。

                    

                 应用于: 行内元素、替换元素、表单元格【按照vertical-align的定义，这些元素必须是能够和其他元素显示在一行的元素。块状元素独占一行，它哪有能和它所在行的基线对齐？】

        特点：  所有垂直对齐的元素都会影响父元素的行高^{（这句话的意思是，父元素虽然自己设置了行高，但是父元素的每一行的行高，取决于行框的高度。如果行框>父元素的行高，则父元素的这一行被撑开。）}，vertical-align是用来对齐imline水平以及table-cell元素.其中，inline水平包括：1.img,em,a等内联元素；2.inline-block块状内联元素；table-cell则为td元素.[这里一定要注意，vertiacl-align是元素与父元素的对齐方式。而不是与其他元素的对齐。比如基线对齐，指的是内联元素或者内联块状元素和父元素的其所在行的基线的对齐]

       值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit继承

      【用法：对于vertical-align:top/bottom,设置这两个属性值得元素，都是相对于其他的进行对齐。具体对齐方法就是：将要对齐的行内框盒子从原来的队列中抽离出来，然后和剩余组成的进行各种对齐！如果，这个元素抽离出来之后，没有参考的对齐元素，那么这时候就利用匿名的参考元素进行对齐！而且，记得，要对齐的元素是自己跑下去或者跑上去进行对齐，只是因为dom元素的一些特效，故而表面看着像是其他组成的跟着这个要对齐的盒子进行位置变化！】      

       可分类为：

             

        注：我们知道display也有很多属性值，其中以inline/inline-block/block三个最常见，这代表了页面上三种不同水平的元素。而vertical-align的部分属性值只对inline-block水平元素起作用，例如：一个元素属于inline-block（table-cell也可以理解为inline-block水平）水平，，其身上的vertical-align：middle才会起作用。所以，类似下面的代码就不会起作用：

    span{vertical-align:middle;}//为什么内联元素设置vertiacl会失效？因为，以vertical-align:middle为例，由于内联元素没有高度，故而怎么找到其中点呢？没办法设置
    div{vertical-align:middle;}//对于块状元素为什么设置vertical-align会失效呢？因为块状元素独占一行，哪里还有其他元素组成的基线去参考呢？因而也没办法去弄！
    故而，只有内联块状元素才可以！！！！

        所谓inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以与inline水平元素混排，又能设置高宽属性的元素。哪些元素呢，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align:middle属性起作用。 

        虽然vertical-align:middle属性只会在inline-block水平的元素上起作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align:middle而位置改变等不是因为其对vertical-align:middle属性敏感或起作用，而是受制于整个line box的变化而不得不变化的，这个后面会较为深入的分析。

         总结：块状元素：vertical-align是完全失效的，块状元素就根本没有vertical-align这个属性

                 内联块状元素：vertical-align的所有属性值都可以使用。

                 内联元素：vertical-align：middle对该元素失效。内联元素怎么找中垂线？高度都没有。而且，这里的内联元素指的是只有一个的内联元素。如果一个内联元素包含多行，不好

 

     *vertical-align起作用的前提

          

       

                                                         

            即   为什么是默认状态下呢？因为display属性可以改变元素的显示水平，即块状可以改为内联块状等。

            这样可以引申出，vertical-align不能用于float  position等元素，因为float等已将元素块状化。

           附加：table-cell和inline水平还是有区别的

           table-cell作用于自身，即table-cell的垂直居中只适用于自身元素，其里面的子元素设置不起作用，必须将table-cell和vertical-align同时设置给内容需要垂直居中的元素

      例如

        <style type="text/css">
               p{
                   display:table-cell;  
                   vertical-align:middle;
                 }
       </style>
-----------------------------------------------------------------------------
       <p>
              <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3023806798,280362912&fm=26&gp=0.jpg" width="100px" height="100px"> 
       </p>

              

           

     *vertical-align的值

        【1】初始值: baseline【所有的内联元素、内联块状元素、表单的td元素，都有vertical-align属性，这个属性的默认值是浏览器给设置的，它的默认值是vertical-align：baseline】

          即如果一个元素没有设置vertical-align，那么这个元素的vertical-align的默认值就是baseline，即该元素的基线和父元素的该元素所在行的基线对齐。所在行的基线的位置的确定就是在该行输入一个X，X的底边缘就是父元素的该行的基线的位置。

         在line-height中，有关于基线对齐的例子，这里就不展示了。   

 

       【2】vertical-align的线性对齐(相对于父级的整个内联盒子顶部对齐，不是后面的某个元素；其中，这里的整行内联盒子要把要对齐的元素摘出来，不包括该元素。即该元素对齐于除了该元素外的所有整行内联元素形成的顶部对齐)

           （1）vertical-align：bottom

                  定义：inline/inblock元素：元素的底部和行框盒子的底部对齐；【这里一定要注意这个元素，这个元素是我们平时说的盒子，包括margin、padding、border、content。元素的底部，就是这个元素盒子的底部。即margin的底边缘】

                           table-cell:单元格底部padding边缘和表格行底部对齐；                                 

                     

                      例如：

<!--vertical-align:bottom-->
<div>
    <span style="display: inline-block;border: 1px solid;width: 100px;height: 100px;padding: 20px;vertical-align: bottom;margin: 0px">呵呵呵呵</span>X
</div>

                     

 

                      

          （2）vertical-align：top

                  定义：inline/inblock元素：元素的顶和行框的顶部对齐；【这里一定要注意这个元素，这个元素是我们平时说的盒子，包括margin、padding、border、content。元素的顶部，就是这个元素盒子的顶部。即margin的上边缘】

                           table-cell:单元格顶部padding边缘和表格行顶部对齐；

                          

        （3）vertical-align：middle【只使用于内联块状元素】

               定义：inline/inblock元素：元素的垂直中心点和父元素基线上1/2X高度处对齐；

                        table-cell:单元格顶部padding边缘和表格行顶部对齐；

               例一：关于inline/inblock元素垂直居中

                      给父元素设置line-height=height；

                      给子元素设置vertical-align：middle

                      至于原理和例子，line-height中都有，这里就不再重复了。

                        我们在实际项目中，设置内联元素在父类元素中垂直居中，一般需要垂直居中的元素设置vertical-align：middle，父元素设置line-height=height就可以了，但是，这只是近似垂直居中，还需要给父类元素设置：font-size：0px才算是真正垂直居中。为什么呢？具体分析如下：

                     

                    如上图所示，元素X的底线是基线，图片中心也就是红线所在的地方和基线往上1/2x的地方对齐，即x字符的中点和图片中垂线重合。但是由于字符本来具有下沉的特点，因此这里的X字符的中点并非父容器的垂直中心点，因此具有一点偏差。解决的办法:

                                                                                    (1)设置父容器line-height=height,font-size为0。

                                                                                     例如:

                                                                                             

                                                                                      代码如下：

                                                                                             

 

                                                                                         (2)添加辅助元素【这种方式适应用定高或者不定高的都可以】（这个和多行文字图片垂直对齐一个原理）

                                                                                               <1>主体元素img  inline-block化(需要垂直居中的元素)

                                                                                               <2>添加宽度为0，高度100%的辅助元素（没有这一步也可以）

                                                                                               <3>主体元素和辅助元素均设置vertical-align：middle；   

                                                                                                                                                                                                              

               例二：关于table-cell元素垂直居中

               

 

             例二：           

                

           

                                 

<!--vertical-align的多行文字图片的垂直居中-->
<div>
    <div style="border: 1px solid">
        <span style="display: inline-block;vertical-align: middle">文字文字</span><img src="../1.png" style="vertical-align: middle"><br>
    </div>
    <div style="border: 1px solid">
        <span style="display: inline-block;vertical-align: middle">文字文字<br>文字文字<br>wensdaf</span><img src="../1.png" style="vertical-align: middle"><br>
    </div>
</div>

               分析如下：首先span设置为inline-block，是为了能够使用middle属性值。

                           我们这里先给span设置vertical-align：middle，那么这时候span元素的中垂线和隐藏的X文字的基线往上1/2X（就是X的中心）对齐。这两个盒子现在中垂线对齐了。

                          这里我们又给img设置了vertical-align：middle，那么图片的中垂线就需要和X的中垂线对齐，继2，这时候这三个盒子的中垂线就全部对齐了。这三个行内框形成了一个行框，这个行框的高度取决于图片或者span元素的高度。不管是哪一个决定的，都无所谓。反正这个行框就是父元素的高度（父元素没有设置高度）。而这三个行内框都在该行框中垂直居中。从而实现了，上述的效果。

 

        【3】vertical-align文本类属性值(行内元素整个盒子的顶部或者底部和父元素的该元素所在行的隐藏的X或者父元素的该行的文字的顶部或者底部对齐。还是针对X的对齐）

             定义： vertical-align：text-top   盒子（要对齐的内联元素）的顶部和自身父级content area的顶部对齐即行内盒子和其所在行的隐藏的X（或者父元素该行的文字）顶部对齐。

                      vertical-align:text-bottom  盒子（要对齐的内联元素）的底部和自身父级content area的底部对齐即行内盒子和其所在行的隐藏的X（或者父元素该行的文字）底部对齐。

 

             父级的内容区：注释：content area是看不见的，可以默认为是鼠标选中文字的区域（即鼠标选中X的区域或者该行中直接属于父元素的文字），例如

             左图中鼠标选中的蓝色部分。

             （备注：content area只和字体大小相关，和行高等没有关系即要对齐的行内框盒子当设置text-top的时候，就是和同一行的匿名的X内容区的顶部对齐！设置为text-bottom的时候，就是和这个匿名X的底部对齐！text-bottom到text-top之间切换，就是移动一个父元素font-size大小的距离而已！这个匿名的X怎么找？就是在和要对齐的输入同一行中，输入X字母的时候，X的位置就是参考的元素的位置并且这个X是要对齐元素的同胞！）

             

            当一个元素设置vertical-align为text-top或者text-bottom时，可以想象为父类元素中除了该元素没有任何元素，就只有一个大小继承父级字体大小的字体，该元素和这个字体的content area顶部或者底部对齐就可以了。

         例如：

    <div style="height: 300px">
         <!--<span style="">图文就这么一回事</span>-->
         <span style="display: inline-block;width: 80%;">Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐</span>X<br>X<br>XX<br>XX<br>X</div>
    </div>

           

          1.这里我们设置第一个span（很长内容的那个span）的vertical-align为text-top,结果如下：（注：这里我们以显式的X作为参考，因为这个X和父元素匿名的X各方面都是一样的。）

          

          这里，要对齐的span行内框的顶端X这个content area（鼠标选中X的蓝色区域）的顶端对齐！时刻记得无论哪种对齐，最后父元素的第一个行框的顶端要和父元素的顶端（即content的顶端对齐！）

          这里如果，我们给要对齐的这个元素的宽度设置为100%，对齐应该是失效，因为其没有给参考元素留位置，因为这个参考元素必须和其在同一行！

          2.我们给第一个span元素再设置text-bottom

          分析，元素的vertical-align:text-bottom就是要和其同一行的同胞匿名X（这里用显示的X作为参照）的底部（鼠标选中这个X蓝色区域的底部）对齐，即

              

           这里，向上移动对齐的span行内框，移动到其底部和X的底部对齐的位置！这时候，这一行的行框就是

            

            因为是父元素的第一个行框，故而，这个行框的上边缘和父元素的上边缘重合，故而，显示结果如下（表面上看着是X跑到元素的下面去，这是表象！其实X是不动的。要对齐的元素自己上移或者下移。）：

            

            对于第二行，第三行等等中的元素要text-top或者text-bottom都和上面的移动的规则是一样的。【除了，第一行和最后一行的（高度不固定）的行框顶端/底端要和父元素的顶端或者底端重合，对于中间行的行框的顶端或者底端也要和上一行的底端或者下一行的顶端重合】

            实例：主要用于表情图片（或者原始尺寸背景图标）与文字的对齐效果

               

                 1.使用基线存在图标偏上的问题；

                 2.使用顶线、底线的问题在于受其他内联元素影响，造成巨大定位偏差，例如，在后面插入一张图片

                 和想要的效果差距太大

 

               3.使用text-bottom

                

      【4】vertical-align上标下标（sup、supper）

                  在实际项目中，几乎用不到vertical-align:sub /supper

     【5】数值百分比类

            分为：数值类、百分比类

            数值、百分比类的共性：1.都带数字              20%  20em  20px

                                            2.都支持负值            基本上就是margin  letterspacing  worldspacing  vertical支持负值，其他属性基本没有！

                                            3.行为表现一致         

           数值：就是设置vertical-align的元素在其所在行的baseline的基础上上下偏移对应的数值大小。

           百分比：百分比和数值差不多，只是这个百分比是相对于行高计算的！

          例如：

<!--vertical-align的属性值为数值/百分比-->
<div style="background-color: #f0f3f9">
    <span id="span">某妹子：</span>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.gz2010.cn%2Fallimg%2F1712%2F56-1G20PS346.jpg%3Fx-oss-process%3Dstyle%2Fqr.gz2010&refer=http%3A%2F%2Fpic.gz2010.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635396861&t=cef1bbc56f75ea2f42b64598579eb276" style="width: 100px;height: 100px">X<br><br>
    <label>请选择：</label>
    <select id="sel">
        <option value="baseline">baseline</option>
        <option value="1px">15px</option>
        <option value="1em">1em</option>
        <option value="20%">20%</option>
    </select>
</div>
<script>
    var select=document.getElementById('sel');
    var span=document.getElementById("span");
    select.onchange=function (e) {
        span.style.verticalAlign=e.target.value
    }
</script>

           

             当我们选择15px或者1em的时候即包裹某妹子的span元素的 vertical-align:1em，这时候某妹子就是如下的表现。这是因为当vertical-align为数值的时候，其和父元素的对齐方式是：该元素的基线偏移父元素中其所在行的基线x px或者x em 。                                      

                         

              

         总结：对于vertical-align的属性值的分类：a.和元素所在行的隐藏元素X对齐：1.baseline;2.vertical-align;3.text-top;4.text-button;

                                                                                    b.和元素所在行的行框对齐：1.top;2.bottom 

      【8】vertical-align前后不一的作用机制；   

             前面元素和后面元素（相邻元素）的vertical-align值不一样，该如何表现呢？

          <1>关于vertical-align:top/bottom     

              以图文混合为例:

              

            在上图中一个父容器中有三个内联元素，分别是一个图片，两个<span>标签包含的内联元素。

              我们首先改变图片的vertial-align的属性值为top,表现结果如下：

                

            这里，图标的顶部和”zxx：顶线和底线对齐“ 以及  ”我是酱油“的顶部对齐，切记这里，是图片对比图-跑到下面和文字对齐，不是文字跑上去和图片对齐，之所以是这么显示，因为DOM元素默认的一些特质。具体分析如下： 

                                 图片要和父容器的整一行实现顶部对齐，那么，出来图片这一元素，那么，剩下的”zxx：顶线和底线对齐“ 以及  ”我是酱油“这两内联元素的顶部在哪，图片就和哪对齐。

             再例如：我们将图一中的内联元素“zxx：顶线和底线对齐”设置vertical-align:top.显示结果如下如所示。（分析：除开要对齐的元素“zxx：顶线和底线对齐”，父容器的这一行中，剩余图片和"我是酱油"这两个内联元素，那么，整个行的最高的地方此刻是图片的顶部，因此内联元素“zxx：顶线和底线对齐”和图片的顶部对齐。设置”我是酱油“这个元素也是同样的道理。）

            

        <2>vertical-align:text-top/text-bottom

                要对齐的元素会存在一点下沉，因为要实现元素和父容器的内容区对齐。

          总结：       

 

 

     *vertical-align失效

     例一：   

<style type="text/css">
     img{
              vertical-align:middle;
        }
</style><p style="height:200px">
     <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3023806798,280362912&fm=26&gp=0.jpg" width="100px" height="100px"> 
</p>

           这里，img是inline水平，设置了vertical-align为middle，但是显示结果如下：

           

           所有的条件都符合，为什么vertical-align还是失效呢？

          不是vertical-align：middle没起作用，而是太短，不够居中。分析如下：vertical-align：middle：元素的中垂线和父元素中该元素所在行的基线往上1/2X处对齐。

                                                                                                            首先，这里只有图片这个内联块状元素，其就和隐藏的X文字参照对齐。这一行的基线就是X的下边缘。

                                                                                                            然后，基线往上1/2就是X的中心位置。而X的行高是浏览器默认的，比较小一般。

                                                                                                            最后，因为图片设置了vertical-align：middle,即其中垂线就和隐藏的X的文字的中点对齐。即：             

                                                                                                                     

                                                                                                                     在这一行中，图片的行内框是最高的，因此这一行的行框也就是图片的行内框。这也是父元素的第一行，因此，父元素的内容区的上边和该行行框即图片行内框的上边重合。故而图片以及X的位置整体下移，直到父元素的上边和图片的上边重合.故而就出现了图片没有居中的情况。

            解决的办法：给父元素设置hight=line-height，这样X就居中了，因为图片的重锤点和X的中心对齐，故而就实现了对齐。

                                                

 

      *vertical-align和line-height的关系

            

              只要是内联元素，就一定会受vertical-align和line-height的影响

      vertical-align是相对于父类的某一种，而不包括自身

 

   

         【1】小图标和文字的对齐

                使用vertical-align数值实现；

         【2】不定尺寸图片或多行文字的垂直居

            实现分为三步：

                             

           例如：实现图片垂直居中

           

          实现多行文字垂直居中 

      

         
         

  
  10.段落排版--对齐（inline元素【有标签包围的文字或者裸露的文字】、inline-box元素水平方向在父元素对应行中如何显示。比如：center，也就是让每个行内框组成的行框在父元素对应行中的水平方向上居中显示。即行框的中垂线和父元素的对应的这一行的中垂线对齐，可以将父元素这一行的中垂线看成是一个匿名的X元素。即行框的中垂线和位于父元素对应行的中垂线上匿名元素X对齐）

         text-align是一个基本的属性，它会影响一个元素中的文本行相互之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

         值left  right  center  会导致元素中的文本分别左对齐、右对齐、居中对齐。

         想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的11-1、11-2小节中会讲到。)

          h1{ text-align:center; }

         <h1>了不起的盖茨比</h1>

         同样可以设置居左：

         h1{ text-align:left; }

         <h1>了不起的盖茨比</h1>

         还可以设置居右：

    h1{
       text-align:right;
      }
   <h1>了不起的盖茨比</h1>
   这个属性是设置给父元素的：即父元素里面的内容在水平方向上如何显示。
   例如：

<div style="background-color: #cab5ed;height: 300px;text-align: center">
    <!--<span style="background-color: red;">图文就这么一回事</span>-->
    <span style="display: inline-block;background-color: aqua;width: 80%;vertical-align: baseline">Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐Bottom对齐</span>X<br>X<br>XX<br>XX<br>X</div>
</div>

   提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。text-align仅仅针对内联元素、内联块状元素。ps：为什么块状元素设置了没效果呢？分析如下：首先块状元素，在不设置宽度的情况下，独占一行即
宽度本来就和父元素一样宽，还哪里用空间让其挪动？其二，给块状元素设置的宽度比父元素宽度小，这时候总有空间能挪动了吗？No,除了这个子块状元素的宽度之外的那些宽度即（父元素宽度-子元素宽度）不好意思，分配给了auto这个属性值！没办法，这就是块状元素的特质！

       11.display属性

       显示或隐藏（display:none;）

       我们可以通过使用visibility属性或display属性来显示或隐藏元素。

       要隐藏元素，请将display属性设置为“none”或将visibility属性设置为“hidden”。

       visibility：hidden隐藏元素，但是元素仍然占据空间并影响布局。

         h1.hidden {

        visibility: hidden;
     }

    display：none隐藏元素，并从布局中删除元素。

            h1.hidden {

        display: none;
    }

        block（块）和 inline（内联）元素 

        块元素尝试获取整个宽度，并在布局中开始新行。一些HTML元素是块元素或块级元素。

        <h1>, <p>, <li>, <div> 

        都是块元素的示例。

        内联元素与其他内联元素保持在同一行中，并且不会开始新行。

        <a>, <span> 是内联元素的示例。

        我们可以使用display属性来更改块或内联函数。

        以下代码使li元素显示为内联元素。不是开始一个新行作为正常li元素，它显示li元素在同一行。

   li {
        display: inline;
      }

       以下代码使span元素显示为块元素。现在每个span元素将像div元素，默认情况下它是一个块元素。

   span {
          display: block;
       }

       Inline-Block（内联块）

       inline-block值混合块和内联特性。

       盒子的外部被视为内联元素。因此，不会为元素创建新行。

       框的内部被视为块元素，并应用诸如宽度，高度和边距的属性。

       以下代码显示如何使用inline-block值。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
  display: inline;
}

span {
  display: inline-block;
  border: medium double black;
  margin: 2em;
  width: 10em;
  height: 2em;
}
</style>
</head>
<body>
  <p>This is a test.</p>
  <p>This is a test. <span>This is a test.</span>
  </p>
</body>
 </html>

　　 性定义及使用说明

       display 属性规定元素应该生成的框的类型。

默认值：	inline
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.display="inline"

                                                                                                                             属性值：

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
flex	元素被设置为弹性盒子
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

         1. display:no

         让该元素隐藏，不显示。

        2. display:block

        既是让不是块状元素的元素称为块状元素，又表示该元素显示。

        举例：

         我们要实现一个效果：

             点击红色区域，显示一个下拉框，   

 

         当离开红色区域或者离开该下拉框时，该下拉框隐藏

         1.在下拉框的父类中用overflow：hidden。当hover的时候，overflow：visible

<style type="text/css">
        .box{
            width: 100px;
            height: 30px;
            background-color: #6a6666;
            position: relative;
            overflow: hidden;
        }
        .box_1{
            width: 100%;
            height: 100%;
            background-color: red;
            text-align: center;
            line-height: 30px;
        }
        .box_2{
            border: 1px solid;
            width: 30px;
            height: 30px;
        }
        .box:hover {
            overflow: visible;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box_1">我的购物车</div>
    <div class="box_2"></div>
</div>

           2.下拉框中用display：none  父类：hover .下拉框类{  display：block}

 <style type="text/css">
        .box{
            width: 100px;
            height: 30px;
            background-color: #6a6666;
            position: relative;
            /*overflow: hidden;*/
        }
        .box_1{
            width: 100%;
            height: 100%;
            background-color: red;
            text-align: center;
            line-height: 30px;
        }
        .box_2{
            border: 1px solid;
            width: 30px;
            height: 30px;
            display: none;
        }
        .box:hover .box_2{
            /*overflow: visible;*/
            display: block;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box_1">我的购物车</div>
    <div class="box_2"></div>
</div>

       

     display:flex

      display:flex是将容器变为弹性盒子，用来进行页面布局。即对于某个元素只要声明了display: flex，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。

       块状元素申明为flex弹性盒子:display:flex;内联元素声明为弹性盒子:display:inline-flex.

     （一）flex弹性盒模型

       对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。

       

        1.每个弹性容器都有两根轴：主轴和交叉轴，两轴成90度，默认如上图所示的横轴且从左向右的轴为主轴，纵轴且从上到下的轴为交叉轴。可以通过flex-direction来改变主轴和交叉轴。

        2.两条轴都有各自的起点和终点；【1和2结合，决定了容器的主轴和交叉轴；从而决定了容器中的子元素按照什么顺序在容器中排列】【容器中的所有子元素都是顺着主轴，按照次序一次排列布局显示】

        3.容器中的所有子元素【弹性元素】，永远沿着主轴排列；

         4.弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

        弹性容器的两根轴非常重要，所有属性都是作用于轴的。下面从轴入手，将所有flex布局属性串起来理解。

       弹性flex布局的12个属性

         容器属性

        1.flex-direction:row | row-reverse | column | column-reverse

        2.flex-wrap:nowrap | wrap | wrap-reverse

        3.flex-flow:flex-direction flex-wrap

        4.justify-content:flex-start | flex-end | center | space-between | space-around

        5.align-items:stretch | flex-start | flex-end | center

        6.align-content:stretch | felx-start | flex-end | center | space-between | space-around

        子元素属性

         1.flex-grow:数值,默认值为0

        2.flex-shrink:数值，默认值为1

        3.felx-basis:默认值auto

         4.flex:flex-grow  flex-shrink flex-basis

         5.align-self

         6.order

      二、主轴

        flex布局是一种一维布局模型，即子元素在容器的主轴上按照顺序布局。也就是说，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。

        1.主轴方向【flex-direction来改变】

        我们可以在弹性容器上通过flex-direction

1. 交叉轴就会相应地旋转90度。
2. 弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。

 

         

 

         

 

         

 

            

 

        2.沿主轴的排列处理【flex-wrap】

         弹性元素永远沿着主轴方向排列，那么排列不下，该如何处理？

         

       通过设置flex-wrap: nowrap | wrap | wrap-reverse可使得主轴上的元素不折行、折行、反向折行。

         nowrap:子元素不换行，都在容器的一行中布局。那么如上图所示排列不下怎么办？这就涉及到子元素的属性flex-shrink即收缩。

        wrap:子元素显示不下，换行显示。那么折行之后行与行之间的间距（对齐）怎样调整？这里又涉及到交叉轴上的多行对齐。

         wrap-reverse:反向折行，是从容器底部开始的折行，但每行元素之间的排列仍保留正向。

                  

        3. 一个复合属性

     flex-flow = flex-drection + flex-wrap

     flex-flow相当于规定了flex布局的“工作流(flow)”

         flex-flow: row nowrap;

 

      三、元素如何弹性伸缩应对[容器主轴方向上，一行中，容器有剩余空间或者容器空间不足该如何处理？这里涉及到子元素属性：flex-grow和flex-shrink]

         例如:当flex-wrap: nowrap;不折行时，容器宽度有剩余/不够分，弹性元素们该怎么“弹性”地伸缩应对？                 

         这里针对上面两种场景，引入两个属性(需应用在弹性元素上)

1. flex-shrink：缩小比例（容器宽度<主轴方向上的一行元素总宽度（尺寸）时如何收缩）
2. flex-grow：放大比例（容器宽度>主轴方向上的一行元素总宽度（尺寸）时如何伸展）         

      1. flex-shrink: 缩小比例【^{子元素主轴方向的宽（主轴为column时是高）缩小的比例，交叉轴方向的高不变（主轴为column时是宽不变）】}

       来看以下场景，弹性容器#container宽度是200px，一共有三个弹性元素，宽度分别是50px、100px、120px。在不折行的情况下，此时容器宽度是明显不够分配的，如下图的第一行。   

#container{
    display:flex;
    flex-wrap:nowrap;
    width:200px;
}

        

       实际上，flex-shrink默认为1，也就是当不够分配时，元素都将等比例缩小，占满整个宽度。（如上图所示）  

       元素收缩的计算方法

      这里flex-shrink的默认值是1.                       

• 容器剩余宽度：-70px(200px-50px-100px-120px)
• 缩小因子的分母：1*50 + 1*100 + 1*120 = 270 (1为各元素flex-shrink的值)
• 以第一个元素为例：元素1的缩小因子：1*50/270
• 缩小的主轴方向尺寸为：1*50/270*(-70px)
• 第一个元素主轴方向缩小后的尺寸：50px+[1*50/270*(-70px)]=37.03px

       注：一行元素按照各自的尺寸在容器的主轴方向上排列布局，如果排列不下，要么换行要么元素都按照各自设置的flex-shrink进行缩小，如果子元素没有设置flex-shrink，默认值是1;

        总结：flex-shrink只作用于主轴方向，且是针对每一行中的元素，只要显示不下而且不换行，就按照子元素的flex-shrink属性设置的值进行缩小。 

                即：容器主轴尺寸<一行元素主轴方向尺寸之和，子元素就缩小即flex-shrink属性就生效。如果尺寸相等或者主容器主轴尺寸>一行子元素主轴方向尺寸之和，子元素的flex-shrink就失效。

                如果某个子元素不想收缩，则可以设置flex-shrink：0

      2. flex-grow: 扩大比例【^{子元素主轴方向的宽（主轴为column时是高）扩大的比例，交叉轴方向的高不变（主轴为column时是宽不变）】}

        同样，弹性容器#container宽度是200px，但此时只有两个弹性元素，宽度分别是50px、100px。此时容器宽度是有剩余的。    

        那么剩余的宽度该怎样分配？而flex-grow则决定了要不要分配以及各个分配多少。

         （1）在flex布局中，容器剩余宽度默认是不进行分配的，也就是所有弹性元素的flex-grow都为0。

                

 

           (2)如果某个子元素的flex-grow不为0，则按照flex-grow设置的分数进行扩大。

           元素放大的计算方法：放大的计算方法并没有与缩小一样，不会将元素大小纳入考虑。

            如上例中容器宽度：200px, 第一行的子元素主轴方向的尺寸分别为50px、100px,共剩余200-50-100=50px；

          然后，根据这一行的子元素各自设置的flex-grow的总和为总份数，50px/总份数；

          其次，每个子元素扩大的尺寸为:50px/总份数*该元素flex-grow的值

          最后，该元素的尺寸为：原来尺寸+扩大尺寸

           以上图为例：1.假设这里第一个子元素的flex-grow:3,第二个子元素的flex-grow：2，则，第一个子元素扩大的尺寸为:50/(3+2)*3=30,第二个子元素扩大的尺寸为:50/(3+2)*2=20;第一个子元素的最终尺寸为：50+30=80px,第二个子元素的最终尺寸为:100+20=120px

                             2.假设这里第一个子元素的flex-grow:1,第二个子元素的flex-grow:0;则，第一个子元素扩大的尺寸为：50/(1+0)*1=50,第二个子元素不扩大。

           注：子元素的属性flex-grow只作用于在容器的主轴方向的尺寸，并且容器尺寸-子元素主轴方向尺寸之和>0,且子元素设置了flex-grow不为0，然后根据子元素设置的flex-grow将剩余空间按分数分配给每个子元素的主轴方向尺寸

                  无剩余空间时，flex-grow设置无效，例如： 下图中，弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效。

                  

 

                  同理，对于flex-shrink，在容器宽度有剩余时也是不会生效的。因此这两个属性是针对两种不同场景的互斥属性。 

                               

        四、弹性处理与刚性尺寸（flex-basis）

           flex还提供了一个flex-basis属性。flex-basisi的本质就是替代width即等同于width。

      flex-basis设置的是子元素在主轴上的初始尺寸【子元素在主轴上的尺寸，等同于width的属性】，默认值为auto；所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸.即一个子元素中既有flex-basis又有width，则在容器主轴上的尺寸是以flex-basis为尺寸，此时width无效。

            这里有个需要记忆的一个公式:子元素的在容器中的尺寸：

            

          1.在决定 Flex 子元素的尺寸方面，记住很重要的一点，就是最终尺寸（final flex-basis）会受 min-width 和 max-width 属性限制。

          2.如果未指定 flex-basis，flex-basis 将回退到 width 属性。如果未指定 width 属性，flex-basis 将回退到基于 Flex 项目（主轴方向子元素）内容的计算宽度值（computed width）。

           例如：我们使用 1000px 宽、包含一些 子元素的 Flex 容器来说明：

                    

              设置宽度width

                     .item{width:200px}

                     我们将 Flex 项目设置为 200px × 200px 的大小。如下图所示：

                   

                 这个例子里，我们没有为 容器子元素指定 flex-basis（也就是取默认的 flex-basis: auto），因此基础尺寸会回退到 width（200px）。

                 此时，设置的 width 等同于设置 flex-basis。

                   

            设置 flex-basis

               下面我们再为 Flex 子元素指定 flex-basis，看看会产生什么效果。

                 

                

 

               可以看见，指定了 flex-basis 后，width 属性被忽略、不再起作用（相当于没有设置）。

                 我们关心的是最终尺寸。最佳实践是使用 flex-basis 而非 width 或 height。特别是，Safari 浏览器上还有一个古老的 bug：在使用了 height 而非 flex-basis 属性的 Flex 项目上 felx-shrink 属性不会生效。

                 总结：flex-basis就是子元素在容器主轴方向上布局是使用的尺寸，如果flex-basis没有设置，则使用width（column时，height）充当flex-basis,或者width没有设置则，元素的content尺寸作为flex-basis尺寸

                

          flex-basis 受限于 max-width

              Flex 项目的最终尺寸会受到 min-width 和 max-width 属性影响。我们在 Flex 子元素上设置 max-width 看一下： 

                          

 

              如上图所示：虽然 flex-basis 设置了 250px，但是却达到了 100px 的 max-width 限制。因此最终尺寸是 100px，此时，Flex 项目还是能很好的放在 Flex 容器中的。

            现在我们再设置 min-width 看下对最终尺寸的影响：

             

 

              虽然指定了 flex-basis: 100px，但是因为不能比 250px 的 min-wdith 更小。因此，最终尺寸是 250px，Flex 项目能正好装在 Flex 容器中：

                        

          So，flex-basis 到底是什么？

               现在我们知道了在 flex-basis 未指定的情况下，width 是它的回退方案，min-width 和 max-width 是限制了最终尺寸的上限和下限。So，flex-basis 到底是什么？

               在上图里，你也可能注意到了，放入 Flex 容器之前，我们可视化了 Flex 项目的大小。之所以这样做，就是为了说明这就是 flex-basis：即 Flex 项目放入 Flex 容器之前的尺寸（译者注：也就是项目的 max-content 大小）。这是 Flex 项目的理想或者说假想尺寸。但是        为 flex-basis 指定的值不能保证就是 Flex 项目的最终尺寸！一旦我们将 Flex 项目放入 Flex 容器之后，事情就有改变了。上例中，Flex 容器的尺寸是刚刚好的，因此项目放在里面都是 OK 的，因为所有项目的最终尺寸加起来正好是 Flex 容器的宽度（1000px）。这很好，但通常所有 Flex 项目的 felx-basis 相加之后，Flex 容器不是空间不足就是空间过剩，而不是像这样刚刚好。

                当空间不够的时候

                假设我们像容器中放置了更多 flex-basis: 200px 的项目：

             

                在放入容器之前，它们中的每一个都占据 200px 的尺寸，一共是 1600px。但是我们的容器只有 1000px 宽。结果是，我们没有足够的空间装得下这么多 Flex 项目，结果 Flex 项目默认会收缩以便适应不足的容器尺寸：

              

               所有项目的起始宽度是 200px，因为空间不够，所以 Flex 项目开始收缩以适应容器空间（变为每个 125px）。flex-shrink 用于控制收缩比例。可以通过给 flex-shrink 指定一个更大或更小的值来控制收缩的程度，甚至可以设置为 0，表示不许收缩。                            

            当有剩余空间的时候

            有时候，当我们把所有 Flex 项目的最终 flex-basis 加到一起后，容器还有剩余空间。

      我们可以指定我们的 Flex 项目在放入 Flex 容器之后伸展，来占据剩余空间，这是通过 flex-grow 属性控制的，此属性默认为 0，表示不会伸展。下例中，我们为每个 Flex 项目都设置了 flex-grow: 1（以相同比例伸展）来占据剩余空间。

        增长和收缩是 Flexbox 布局的一大亮点，也是 Flexbox 在响应式 UI 设计方面如此出色的原因。

            width vs flex-basis

               现在能够区分 width 和 flex-basis 了吧，min-width和 max-width 会限制最终的尺寸。而当 flex-direction 为 column 或 column-reverse 的时候，那就是 flex-basis 跟 height 的关系了。

              

          五、子元素复合属性flex

              常用的复合属性 flex

                flex = flex-grow + flex-shrink + flex-basis

                复合属性，前面说的三个属性的简写。

                             

             一些简写

•    flex: 1 = flex: 1 1 0%
•    flex: 2 = flex: 2 1 0%
•    flex: auto = flex: 1 1 auto;
•    flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸缩

            flex:1 和 flex:auto 的区别

           其实可以归结于flex-basis:0和flex-basis:auto的区别。

      flex-basis是指定初始尺寸，当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸；相反当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑。

       五、容器内如何对齐【每一行的所有子元素沿着主轴如何对齐：justify-content；每一行所有子元素在交叉轴上如何对齐：align-items；所有行作为一个整体，在交叉轴上如何对齐：align-content】

          前面讲完了元素大小关系之后，下面是另外一个重要议题——如何对齐。可以发现上面的所有属性都是围绕主轴进行设置的，但在对齐方面则不得不加入作用于交叉轴上。需要注意的是这些对齐属性都是作用于容器上。

           1.justify-content每一行在主轴上的对齐方式

             

            如上图所示：主轴有起点和终点。justify-content就是每一行沿着主轴如何对齐。具体对齐的值以及结果如下图所示：

            

             1.justify-content:flex-start，表示每一行在主轴上，靠着主轴的起点进行布局；（相当于按照顺序依次布局好之后，整体向左移动，直到第一个元素与主轴的起点对齐）

           2.justify-content:flex-end,表示每一行在主轴方向上，靠着主轴的终点显示。（相当于按照顺序依次布局好之后，整体向右移动，直到最后一个元素与主轴的终点对齐）

           3.justify-content:flex-center,表示每一行在主轴方向上，在主轴的中点显示。（相当于按照顺序依次布局好之后，元素组成的整体的中垂线与容器中垂线对齐）

           4.justify-content:space-between,表示每一行的所有子元素，在主轴方向上，第一个子元素靠着起点、最后一个子元素靠着终点，其余的子元素间隔相等的布局在主轴方向上。

           5.justify-content:space-around,表示每一行的所有子元素，在主轴方向上，每个元素左右间隔相等的排列布局        

           2. 交叉轴上的对齐方式【每一行在交叉轴方向上如何对齐：因为交叉轴也有起点和终点，】

             

           主轴上比较好理解，重点是交叉轴上。因为交叉轴上存在单行和多行两种情况。

     A.align-items【每一行元素的所有元素即每一行整体在交叉轴上的对齐方式】

                1.默认值：stretch，当子元素在交叉轴方向上没有设置固定的尺寸，则子元素会沿着交叉轴方向将容器在交叉轴方向撑满。

                             

 

                 当align-items不为stretch时，此时除了对齐方式会改变之外，元素在交叉轴方向上的尺寸将由内容或自身尺寸（宽高）决定。              

               2. flex-start【在交叉轴方向上，整行靠着交叉轴的起点布局】

                

               3.flex-end[在交叉轴方向上，整行靠着交叉轴的中点局部]      

               

              4.flex-center

              

             5.flex-baseline

             

            注意，交叉轴不一定是从上往下，这点再次强调也不为过。

                   

          B.align-content:交叉轴上的多行对齐[多行作为整体在交叉轴方向上的对齐：因为交叉轴有起点和终点]

         还记得可以通过flex-wrap: wrap使得元素在一行放不下时进行换行。在这种场景下就会在交叉轴上出现多行，多行情况下，flex布局提供了align-content属性设置对齐。

          首先明确一点：align-content只对多行元素有效，会以多行作为整体进行对齐，容器必须开启换行。【对于只有一行的容器设置该属性无效】

         

        在属性值上，align-content比align-items多了两个值：space-between和space-around。

         对于align-content和align-items的区别：align-items是一行作为整体；align-content是所有行作为整体 。  

         1.align-content:默认值也是stretch。两者同时都为stretch时，毫无悬念所有元素都是撑满交叉轴。【当子元素在交叉轴方向上的尺寸固定时，元素不拉伸】

        所有行的元素（尺寸不固定的元素）都拉伸，所有行整体占满交叉轴。

        a.align-item和align-content的值同时为stretch，结果如下图所示

        

         b.当align-item的值不为stretch，每一行元素不拉伸，但是因为align-content设置为stretch，因此，多行整体依旧撑满交叉轴，每一行都默认有一定的高度，这个高度看不见

          例如

          

         为什么？因为align-content会以整行为单位，此时会将整行进行拉伸占满交叉轴；而align-items设置了高度或者顶对齐，在不能用高度进行拉伸的情况下，选择了用间距。 

          

 

          2.align-content不为stretch

           A.align-item:stretch

           align-items仅仅管一行，因此在一行中某个子元素设置了高度的情况下，这一行的其他元素遵循align-items: stretch也被拉伸到设置了固定尺寸的元素的高度。而其他行则保持高度不变。

           例如：

                 

 

                  

                  B.align-content和align-items都不为stretch

                  例如：

                         

                         以第一个图为例，会发现align-content会将所有行进行顶对齐，然后第一行由于第二个元素设置了较高的高度，因此体现出了底对齐。

    两者差异总结：

• 两者“作用域”不同
• align-content管全局(所有行视为整体)
• align-items管单行

      

       （六）能否更灵活地设置交叉轴对齐（align-self：子元素自身在交叉轴上的对齐方式）

          除了在容器上设置交叉轴对齐，还可以通过align-self单独对某个元素设置交叉轴对齐方式。

1.  值与align-items相同
2.  可覆盖容器的align-items属性
3.  默认值为auto，表示继承父元素的align-items属性

         

 

        （七）order：更优雅地调整元素顺序

          

 

          （八）总结

            

            

           参考阮老师博文中的骰子练习，我做了张图，大家不妨可以各自实现下，理解之后应该能够比较轻松地写出来。codepen

            

            参考文章：https://cloud.tencent.com/developer/article/1354252

                           https://www.ruanyifeng.com/blog/2015/07/flex-examples.html            

 

      12.CSS 列表

       CSS 列表

      从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。

      列表类型

      要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。

      例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

      要修改用于列表项的标志类型，可以使用属性 list-style-type：

  ul {list-style-type : square}

     上面的声明把无序列表中的列表项标志设置为方块。

      list-style-type的可能值

       

       列表项图像

       有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

   ul li {list-style-image : url(xxx.gif)}

       只需要简单地使用一个 url() 值，就可以使用图像作为标志。

      

      

      list-style-position 属性

     

     

   list-style 属性

      list-style 简写属性在一个声明中设置所有的列表属性

     说明

      该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。

       可以按顺序设置如下属性：

• list-style-type
• list-style-position
• list-style-image

      可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

   

 

     CSS 表格

     CSS 表格属性可以帮助您极大地改善表格的外观

    表格边框

    如需在 CSS 中设置表格边框，请使用 border 属性。

    下面的例子为 table、th 以及 td 设置了蓝色边框：

 table, th, td
              {
                border: 1px solid blue;
              }

     

     请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

     如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

   

      

      表格宽度和高度

      通过 width 和 height 属性定义表格的宽度和高度。

      下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：

      表格文本对齐

      text-align 和 vertical-align 属性设置表格中文本的对齐方式。

      表格内边距

      如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：

  td
  {
   padding:15px;
  }

     表格颜色

     下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：

  table, td, th
              {
               border:1px solid green;
              }

  th
    {
      background-color:green;
      color:white;
    }

  水平分隔线
  

  向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线：

     

      可悬停表格

      在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

     

      条状表格

             

      为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

      tr:nth-child(even) {background-color: #f2f2f2;}//偶数行  

      tr:nth-child(odd) {background-color: #f2f2f2;}//奇数行

      

  13.overflow

    注：网页滚动条来自html元素，不是body；html元素overflow属性的默认值是:overflow:auto;如果想去调浏览器的滚动条，则给html元素设置  html{overflow:hidden}等

   属性规定当内容溢出元素框时发生的事情
   这个属性定义溢出元素内容区的内容会被如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
   在实际开发中，overflow的作用：
                            （1）基本特点：实现文字溢出时应该如何使用
                            （2）实现BFC，去解决父容器塌陷的问题
                            （3）某些属性必须依赖于overflow，因而必须设置overflow这个值
   I.overflow的基本属性值：
   

       注：这里不是被剪裁，只是被隐藏

 

    1.默认值visible：里面的内容超出父类元素边框，如实展示
    

   2.hidden：当内容超出父类元素边框，超出的部分会被隐藏，看不到
    

   3.scroll,出现滚动条

   

       4.auto，自动适应，根据需要是否出现滚动条，没有一开始就限制要滚动条还是不要滚动条。

       5.overflow-x,overflow-y

    （1）当overflow-x的值==overflow-y的值，则等同于overflow；

    （2）当overflow-x的值！=overflow-y的值，则如果一个值为visible，另一个值为hidden/scroll/auto,那么这个visible会被重置为auto

          例如：

                 

            这里由于设置了overflow-x的值为hidden，而overflow-y的值没有设置（默认值为visible），因此，当高度溢出时，y方向就出现出现了滚动条（因为这时，overflow-y被设置为auto）

  II.overflow出现滚动的条件：

         

           

           这是重点！浏览器默认的滚动条来自于HTML，不是body标签！因此，如果页面不想要滚动条，可以设置html{overflow:hidden}

          

          计算滚动区域的高度

        

         

        容器滚动条的宽度机制

         一个容器，如果设置了overflow:auto/scroll即有滚动条，那么滚动条会占据容器的可视区域的尺寸，一般滚动条的宽度为17px;滚动条的位置:boder->滚动条->padding->content

y因此，容器可视区的宽度尺寸为:boder+滚动条+padding+content

       由于滚动条的出现 

     

        因此，overflow会给布局带来的影响

                                                                1.尺寸对不上

                                          

 

                                                                             解决问题的方案：A.里面的子元素设置自适应布局；

                                                                                                     B.或者预留滚动条的尺寸

 

                                                                        2.水平居中跳动。由于滚动栏占据了一定的尺寸，所以auto的值发生了变化，所以会水平跳动。

                                                                  

                                                                 问题原因分析：假如html的宽度时1200px，body元素在没有滚动条的情况下和HTML的宽度一样（width：100%）；.container容器定宽为1150，使用margin：0 auto，auto的值=1200-1150px=50px,这50px分别分给左右各25px。这时如果出现了滚动条（滚动条的宽度为17px），由于滚动条占据html的一些宽度，故而body的宽度变为1200-17px即body的右边缩短17px.又因为container的宽度为1150px，故而auto的值=body宽度（1200-17）-1150=33px，这33px分别分给左右各16.5px。即左边auto和右边auto的值均由25px，变为16.5px，故而

                                                                 看着页面向 左偏移。                   

                                                                 两种解决问题的方法：

                                                                                          

    III.overflow与BFC：
    清除浮动、自适应布局
   
    什么是BFC？这个很重要
    BFC（block formatting context），中文为“块级格式化上下文”
    先记住一个原则：如果一个元素具有BFC，那么内部元素再怎么翻江倒海，翻云覆雨，后不会影响到外面的元素。同时，外面的元素也不能影响到该元素。所以，BFC元素是不可能发生margin重叠的，
                 因为margin重叠会影响到外面的元素的。BFC元素可以用来清除浮动带来的影响，因为如果不清除，子元素浮动则会造成父元素高度塌陷，
                 必然会影响后面元素的布局和定位，这显然有违反BFC元素的子元素不会影响外部元素的设定。
                 以下情况会触发BFC：
                 1.HTML元素；
                 2.float不为：none；
                 3.display的值为table-cell，table-caption和inline-block中的任何一个；(inline-block不完全BFC，当其内容超出设置的高度的时候，其还是会影响后面元素的布局。除此之外，margin带来的影响、浮动等，都可以和其他BFC一样，不影响外面的元素。)
                 4.overflow的值为hidden，auto，scroll；
                 5.position的值不为relative或static
    那么显然我们设置overflow的值为hidden时，使.container元素具有BFC，那么子元素child浮动便不会带来父元素的高度塌陷影响。
    设置overflow为hidden使元素具有BFC而不会受子元素的影响，但是当子元素过多需要滚动显示时，我们可以设置overflow的值为auto或acroll，超出父元素
     之外的元素会被隐藏。使用overflo:hidden也具有一定的局限性，所以我们应该根据具体的业务场景来选择合适的方法。
      

               I.清除浮动：

               （1）当设置overflow:visible

                

              （2）当设置overflow：hidden,scroll,auto（清除浮动）

                     

 

                但是使用上述这3个属性值，还是有弊端的。比如hidden，会隐藏父元素中的一些内容。故而修改一些使用overflow及快速又高效。大部分清除浮动的影响最好用:

                

              II.避免margin穿透的问题！

              元素设置了overflow：hidden/auto/scroll将元素BFC，故而元素内部不会影响外面的元素

            III.两栏自适应布局【外面的元素同样不能影响BFC元素】。

               例如：

             

            这里一个父容器包含一个图片（这个图片左浮动）和另一个div（这个div又包含两张图片）。我们要实现图片和这个div形成两栏自适应布局，而且左边的浮动图片不能影响div元素。【注释：如果是环绕，浮动图片一定影响div元素，因为这个浮动图片占据着div元素的一部分。因此如果给这个div设置为BFC，那么这个div元素就会显示为上图中右边的蓝色背景的区域。这里，我们可以通过给这个div元素设置overflow:hidden或者auto或者scroll即BFC化div,让浮动元素不再影响div元素】          

<div> 
      <div style="width: 100px;border:1px solid;">
        <img src="../1.png" style=" border:1px solid;float: left" width="40px">
        <div style="background-color: #33b5e5;overflow: hidden">
            <img src="../1.jpeg" style="width: 50px;height: 50px;">
        </div>
    </div>
</div>

        

 

    IV.overflow与absolute绝对定位：
    父元素的overflow：hidden/auto/scroll在子元素设置position:absolute的时候有时候会失效！
    例如：在一个父容器中包含一个子元素img，这个图片的宽高均大于父元素，这里给父元素设置了overflow:hidden;
   

       当我们给img图片设置position:absolte的时候，因为图片和父容器不在一个层级，相当于两个平行面了，父容器还怎么限制它呀？故而显示如下：

         

    对于overflow：auto，scroll和其一样的道理！

            失效的原因（或者说有些情况下才失效，有些情况下是有效的）：

            

            这句话的意思就是说如果overflow属性设置给具有position:absolute的子元素的某个祖先元素，这个祖先元素和子元素之间的元素没有设置position：relative/absolute/fixed，那么overflow就会失效！

            当然，如果这子元素的某个祖先元素（当然这个祖先元素是设置overflow属性的祖先元素的后代元素或者就是其本身，那么overflow就不会失效！）

            例如：   

    <div style="width: 100px;height: 100px;overflow: auto;border: 1px solid;">
         <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="150px" width="150px" style="">
    </div>

          

          1.给图片设置position:absolute,分析，这里具有overflow的元素和设有position:absolute的元素之间没有设有定位的元素作为一个后代元素，另一个祖先元素，故而定位肯定失效

           

          2. 给这个父元素设置position:relative    

<div style="background-color: aqua;position: relative;overflow: auto">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0"
         height="150px" width="150px" style="position: absolute">
</div>

          

          3.给img的父元素设置position:absolute.将原来的父元素改为父元素的父元素，即：

<div style="width:100px;height:100px;border:1px solid;overflow: auto">
    <div style="position: relative">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0"
             height="150px" width="150px" style="position: absolute">
    </div>
</div>

        显示结果如上图所示

        4.如果这么写，就会失效！因为设置overflow属性的元素和设置position:absolute属性的元素之间没有设置定位属性的元素作为一个（设有overflow属性的元素）后代元素，另一个（设有postion:absolute）的父级元素

<div style="position: relative">
       <div style="width:100px;height:100px;border:1px solid;overflow: auto">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0"
             height="150px" width="150px" style="position: absolute">
    </div>
</div>

       

                  

       

            V.依赖于overflow的样式表现

       

 

          （1）resize属性，想要resize属性起作用，必须设置overflow值，即不是默认值visible；

            

            

 

         （2）ellipsis属性

            

            

            

    背景^{[添加背景的方式有两种：1.背景色(默认是透明的)；2.背景图片；背景的特点：1.不具有继承性；2.任何元素都可以设置背景]}

    1.背景色

      可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

       这条规则把元素的背景设置为灰色：

   p {}

       可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

       background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

     总结：background-color的设置很简单，只需要给定一个颜色值就可以了，默认值是transparent。

     2.背景图像

       要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

      【1】 如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

   body {background-image: url(/i/eg_bg_04.gif);}
   background-image也不能继承

      【2】背景图片background-position 属性

        定义和用法：  background-position属性设置背景图像的起始位置。

        注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）"。

默认值:	0% 0%
继承:	no
版本:	CSS1
JavaScript 语法:	object object.style.backgroundPosition="center"

        语法：background-position: horizontal vertical        //horizontal(水平) vertical（垂直）

        水平是

         percentage（百分比） | length | left | center | right

        垂直是

         percentage（百分比） | length | top | center | bottom



        属性值

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

    （1）background-position的值为长度值;当值为长度值的时候，就是容器的左上角和background-image的左上角的对齐，即这里的background-position就相当于background-image的margin值。即background-position的值不设置的时候，相当于margin：0，背景图片的左上角和容器的左上角对齐；当background-position的值为m,n的时候，背景图片的左上角在距离容器左上角的m,n的地方。如效果如图4所示：

           backround-position （xpos ypos）    容器的左上角为（0,0）。

           当我们设置为（xpos ypos）时，意思为图片左上角距离容器左上角的距离。如下图所示：

       

         当我们设置为两个负数：（-70px，-40px），background-image的左上角的顶点距离容器的左上角顶点的距离为-70px,-40px.相当于background-image的margin值为-70px,-40px.

      

         当为（0px,0px）

        

    （2）background-position的值为left top等关键字的值时，应用的是对齐规则，而不是坐标规则。【这里的对齐规则指的是:四条边的对齐。即：left，表示容器的左边和图片的左边对齐；top表示容器的上边和图片的上边对齐；right表示容器的右边和图片的右边对齐；bottom表示容器的底边和图片的底边对齐。center表示两个的中心点对齐】

         xpos 为 left 表示图像的左边与对象的左边对齐，为 right 表示图像的右边和对象的右边对齐；ypos 为 top 表示图像的顶部和对象的顶部对齐，为 bottom 表示图像的底部和对象的底部对齐；

         xpos、ypos等于 center表示图像在水平和垂直方向的中心，和对象在水平和垂直方向的中心对齐

        比如：left top，图片放置关键字最容易理解，其作用如其名称所表明的

        根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

        如果只出现一个关键字，则认为另一个关键字是 center。

        背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。
        等同于 background-position:0,0;
        也等同于background-position:0%,0%;

        right bottom
        背景图片的右下角和容器(container)的右下角对齐，超出的部分隐藏。
        等同于background-positon:100%,100%;
        也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

       实例：希望每个段落的中部上方出现一个图像，只需声明如下

       （3）.background-position的值为百分比，比较复杂。 

        4.背景重复  

        如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

        属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

         默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

    body
       { 
         background-image: url(/i/eg_bg_03.gif);
         background-repeat: repeat-y;
       }

     

       我们能够以不同的方法为链接设置样式。

  5.background-attachment 

        background-attachment定义背景图像是否固定或者随着页面的其余部分滚动。

        例如：body{

                          background-image:url(bgimage.gif)；

                          background-attachment：fixed；

                       }

         可能值：scroll   默认值  背景图像会随着页面其余部分的滚动而移动；

                     fixed    当页面的其余部分滚动时，背景图像不会移动；

                     inherit   规定应该从父类元素继承background-attachment属性的设置。

       6.css背景属性

         

 

         这里只有background-color和背景图片没关系，其余的属性均为背景图片服务。

          background简写的顺序

        

 

       8.css图标 

      如何添加图标？

      向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。

      将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）。

      下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。

       1.Bootstrap 图标(无需下载或者安装)

      

   

 

    9.CSS链接

     设置链接样式：链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。  

       此外，可以根据链接处于什么状态来设置链接的不同样式。

       四种链接状态分别是：

• a:link - 正常的，未访问的链接
• a:visited - 用户访问过的链接
• a:hover - 用户将鼠标悬停在链接上时
• a:active - 链接被点击时
• 

  文本装饰（text-decoration）

   text-decoration属性主要用于从链接中删除下划线：

          background-color 属性可用于指定链接的背景色：

          

 

          改变光标

          cursor 属性指定要显示的光标类型。本例演示了不同类型的光标（对链接有用）。

         

       9.CSS   width和max-width

       使用width，max-width和margin:auto

       如上一章所述，块级元素始终占用可用的全部宽度（尽可能向左或者向右延伸）

       设置块级元素的width，将防止其延伸到容器的边缘。然后，您可以将外边距设置为 auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：   

       

       注意：当浏览器窗口小于元素的宽度时，上面这个 <div> 会发生问题。浏览器会将水平滚动条添加到页面。

       在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要：

      

       提示：请将浏览器窗口的大小调整为小于 500 像素，以查看两个 div 之间的区别！

     

 

    10.导航栏

     导航栏 = 链接列表

      导航栏需要标准 HTML 作为基础。

      在我们的实例中，将用标准的 HTML 列表构建导航栏。

      导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义

     

 

     以上代码是垂直和水平导航栏中使用的标准代码 

     

      1.CSS 垂直导航栏

     

    I 方法一： 如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 <a> 元素的样式：

    

 

    II 方法二：可以设置 <ul> 的宽度，并删除 <a> 的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。这将导致与我们之前的例子相同的结果：

    

 

    垂直导航栏实例

    场景：创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：

    

    

    活动/当前导航链接(向当前链接添加 "active" 类，以使用户知道他/她在哪个页面上)

    

  

    2.CSS 水平导航栏

   

    有两种创建水平导航栏的方法：使用行内或浮动列表项。

    I 行内列表项

    构建水平导航栏的一种方法是，除了上一章中的“标准”代码外，还要将 <li> 元素指定为 inline：

    

    II 浮动列表项

   

 

   CSS 下拉菜单 

      使用 CSS 创建可悬停的下拉列表。

       i 基础的下拉菜单：创建当用户将鼠标移动到元素上时出现的下拉框

   

 

  .actor:hover .active解释为： hover悬浮在父元素.actor时改变子元素active的样式；

  ii下拉式菜单：当用户鼠标移动到元素上时，出现一个下拉菜单，并允许用户从列表中选择一个选项：

                                                                                                                                         

<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h1>下拉菜单</h1>

<p>请把鼠标移到按钮上，以打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

<p><b>Note:</b>我们的测试链接用了 href="#"。真实的网站会用 URL。</p>

</body>
</html>

　　

     下拉式导航-2

<html>
<head>
<style>
ul{margin:0;padding:0;list-style-type:none;overflow:hidden;}
.nav{background-color:black;}
.nav>li{float:left;}
a{text-decoration:none; color:#fff;display:block;width:100%;height:100%;padding:10px;}
.dropdown-content{width:300px;background-color:#f1f1f1;position:absolute;
                  display:none;}
.dropdown-content li{padding:10px 2px;}
.dropdown-content a{color:black;}
.nav>li:hover{background-color:red;}
.dropDown:hover .dropdown-content{display:block}
.dropdown-content li:hover{background-color:#ddd;}
</style>
</head>
<body>
<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li class="dropDown">
      <a href="#">Dropdown</a>
      <ul class="dropdown-content">
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
     </ul>
  </li>
</ul>
<h1>导航栏内的下拉菜单</h1>
<p>请悬停到 "Dropdown" 链接上，以查看下拉菜单。</p>
</body>
</html>

　   　      

   CSS 图像精灵()

      图像精灵是单个图像中包含的图像集合。

      包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

      使用图像精灵将减少服务器请求的数量并节约宽带。  

     图像精灵 - 简单的例子

      我们使用以下单幅图像（"navsprites.gif"）而不是使用三幅单独的图像：

       

      通过使用 CSS，我们可以仅显示所需图像的某个部分。(background-position)     

      在下面的例子中，CSS 指定了显示 "navsprites.gif" 图像的哪部分：

          

    例子解释：

• <img id="home" src="trans.gif"> - 仅定义小的透明图像，因为 src 属性不能为空。而实际显示的图像将是我们在 CSS 中指定的背景图像。
• width: 46px; height: 44px; - 定义我们要使用的图像部分
• background: url(navsprites.gif) 0 0; - 定义背景图片及其位置（left 0px, top 0px）

   

   图像精灵 - 创建导航列表

    我们希望使用精灵图片（"navsprites.gif"）来创建一个导航列表。

    我们将使用 HTML 列表，因为它可以是链接，同时还支持背景图片：

   

<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 43px;
  background: url('/i/css/navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 42px;
  background: url('/i/css/navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 42px;
  background: url('/i/css/navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="/css/index.asp"></a></li>
  <li id="prev"><a href="/css/css_jianjie.asp"></a></li>
  <li id="next"><a href="/css/css_syntax.asp"></a></li>
</ul>

</body>
</html>

　  　

 

         

 

    图像精灵 - 悬停效果     

        现在，我们要向导航列表中添加悬停效果。        

        提示: hover 选择器可用于所有元素，而不仅限于链接。

        我们的新图像（"navsprites_hover.gif"）包含三幅导航图像和三幅用于悬停效果的图像：

           

      因为这是一幅图像，而不是六个单独的文件，所以当用户将鼠标悬停在图像上时，不会有加载延迟。

      我们仅添加三行代码来实现悬停效果：

      

      

     例子解释：

      #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 我们为所有三个悬停图像指定相同的背景位置，仅向下 44 像素

   

   CSS 表单

     通过使用 CSS，可以极大地改善 HTML 表单的外观：

        

 

     带有图标/图像的输入框

      如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：

      

    

 

    当窗口大小小于600px时，页面变为：

 

   具体看 媒体查询 

 

  CSS 计数器

   CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。

   计数器使您可以根据内容在文档中的位置来调整其外观。

   带计数器的自动编号

    CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。

    如需使用 CSS 计数器，我们将使用以下属性：

• counter-reset - 创建或重置计数器
• counter-increment - 递增计数器值
• content - 插入生成的内容
• counter() 或 counters() 函数 - 将计数器的值添加到元素

   如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。

  下面的例子为页面（在 body 选择器中）创建一个计数器，然后为每个 <h2> 元素增加计数器值，并在每个 <h2> 元素的开头添加 "Section <value of the counter>:"：

  

 

嵌套计数器

下面的例子为页面（section）创建一个计数器，为每个 <h1> 元素（subsection）创建一个计数器。

"section" 计数器为每个 <h1> 元素计数，同时写入 "Section" 以及 section 计数器的值，"subsection" 计数器为每个 <h2> 元素计数，同时写入 section 计数器的值以及 subsection 计数器的值：

 

 

 计数器对于创建概述列表也很有用，因为在子元素中会自动创建一个计数器的新实例。在这里，我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串：

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>

</body>
</html>

 

　　

 

   CSS 网站布局

      网站布局

      网站通常分为页眉、菜单、内容和页脚：

     

    有很多不同的布局设计可供选择。但是，以上结构是最常见的结构之一，我们将在本教程中对其进行仔细研究。

    

   页眉

    页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称：

   

  

    导航栏

     导航栏包含链接列表，以帮助访问者浏览您的网站：

     

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* 设置页眉的样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* 设置顶部导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

</body>
</html>

　　

   内容

    使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）：

• 1-列布局（通常用于移动浏览器）
• 2-列布局（通常用于平板电脑和笔记本电脑）
• 3-列布局 （仅用于台式机）
• 

 

     我们将创建 3 列布局，并在较小的屏幕上将其更改为 1 列布局：

 

<head>
    <title>CSS 网站布局</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        /* 设置页眉的样式 */
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }

        /* 设置顶部导航栏的样式 */
        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        /* 设置 topnav 链接的样式 */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 改变鼠标悬停时的颜色 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 创建并排的三个非等列 */
        .column {
            float: left;
            width: 33.33%;
            padding: 15px;
        }

        /* 清除列之后的浮动 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 响应式布局 - 创建堆叠而非并排的三列 */
        @media screen and (max-width:600px) {
            .column {
                width: 100%;
            }
        }
    </style>
</head>
<body>

<div class="header">
    <h1>Header</h1>
    <p>请调整浏览器窗口的大小以查看响应效果。</p>
</div>

<div class="topnav">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</div>

<div class="row">
    <div class="column">
        <h2>Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>

    <div class="column">
        <h2>Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>

    <div class="column">
        <h2>Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>
</div>
</body>

      当屏幕宽度大于600的时候，3列显示；                                                                                                                当屏幕宽度小于600px的时候，一列显示。

                                      

 

     不相等的栏

       主要内容（main content）是您网站上最大、最重要的部分。

列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：

    

       

    CSS 2D 转换

         CSS 2D 转换方法 

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

   

   CSS 多列

    CSS 多列布局:CSS 多列布局允许我们轻松定义多列文本 - 就像报纸那样：

       

       

      CSS 创建多列

          column-count 属性规定元素应被划分的列数。

         下面的例子将 <div> 元素中的文本分为 3 列：

         

 

          

      CSS 指定列之间的间隙

          column-gap 属性规定列之间的间隔。

          下面的例子指定列之间的间距为 40 像素：

         

 

         

      CSS 列规则

         column-rule-style 属性规定列之间的规则样式：

        

        column-rule-width 属性规定列之间的规则宽度：

        

        column-rule-color 属性规定列之间的规则的颜色：

             

       column-rule 属性是用于设置上面所有 column-rule-* 属性的简写属性。

       下例设置了列之间的规则的宽度、样式和颜色：

      实例

        

 

      指定元素应该横跨多少列

         column-span 属性规定元素应跨越多少列。

         下例规定了<h2> 元素应跨所有列：

         

 

      指定列宽度

        column-width 属性为列指定建议的最佳宽度。

        下例规定了列的建议最佳宽度应为 100px：

        

 

        

   CSS 媒体查询

       CSS2 引入了媒体类型

       CSS2 中引入了 @media 规则，它让不同媒体类型定义不同样式规则成为可能。

       例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备，甚至还有一组用于电视，等等。不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

      CSS3 引入了媒体查询

      CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

      媒体查询可用于检查许多事情，例如：

• 视口的宽度和高度
• 设备的宽度和高度
• 方向（平板电脑/手机处于横向还是纵向模式）
• 分辨率

    使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

    媒体查询语法

    媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

 @media not|only mediatype and (expressions) {

  CSS-Code;
}

　　如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

      除非您使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。

      您还可以针对不同的媒体使用不同的样式表:

      <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

　　

    媒体查询的简单实例

      使用媒体查询的一种方法是在样式表内有一个备用的 CSS 部分。

      下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：

      

 

      

 

        

       下例显示了一个菜单，如果视口的宽度为 480 像素或更宽，则该菜单会浮动到页面的左侧（如果视口小于 480 像素，则该菜单将位于内容的顶部）：

        

       屏幕宽度<480px时，页面布局如下：

        

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{box-sizing:border-box;}
ul{list-style-type:none;float:left;margin:0;padding:0;width:150px;margin-right:20px;}
.clearfix:after{content:'';display:table;clear:both;}
li{background-color:#CDF0F6;width:100%;margin-bottom:5px;border-radius:3px;padding:2px 5px;}
.auto{display:table-cell;width:2000px;}
@media screen and (max-width:480px){
  ul{list-style-type:none;display:block;margin:0;padding:0;width:100%;}
</style>
</head>
<body>
<div class="clearfix">
   <ul>
      <li>Menu-item 1</li>
      <li>Menu-item 2</li>
      <li>Menu-item 3</li>
      <li>Menu-item 4</li>
      <li>Menu-item 5</li>
   </ul>
   <div class="auto">
      <h1>请调整浏览器窗口大小来查看效果！</h1>
      <p>本例显示了一个菜单，如果视口为 480 像素或更宽，它将向页面左侧浮动。如果视口小于 480 像素，则菜单将位于内容的顶部。</p>
   </div>
</div>
</body>
</html>

　　

    CSS Flexbox

        flex布局见本博客《flex》网址如下：https://www.cnblogs.com/yyn120804/p/10159158.html 

         

    响应式网页设计 - 简介

       响应式web设计会让您的页面在所有设备上都看来很不错        

       响应式 web 设计仅使用 HTML 和 CSS。

       响应式 web 设计并不是程序或 JavaScript。

     

     为所有用户获得最佳体验的设计

     可以使用许多不同的设备来查看网页：台式机、平板电脑和手机。无论使用哪种设备，您的网页都应该看起来美观且易用。

    网页不应舍弃信息来适合较小的设备，而应使其内容适合任何设备：

    

 

     如果您使用 CSS 和 HTML 调整大小、隐藏、缩小、放大或移动内容，以使其在任何屏幕上看起来都很好，则称为响应式 Web 设计。

　  如果您不理解下面的例子，请不要担心，我们将在下一章中一步一步地分解代码：

     

 

   响应式网页设计 - 视口

      什么是视口？

      视口（viewport）是用户在网页上的可见区域。

     视口随设备而异，在移动电话上会比在计算机屏幕上更小。

     在平板电脑和手机之前，网页仅设计为用于计算机屏幕，并且网页拥有静态设计和固定大小是很常见的。

     然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大了，无法适应视口。为了解决这个问题，这些设备上的浏览器会按比例缩小整个网页以适合屏幕大小。

     这并不是完美的！勉强是一种快速的修正。

   设置视口

     HTML5 引入了一种方法，使 Web 设计者可以通过 <meta> 标签来控制视口。

     您应该在所有页面中包含以下media视口元素：

     <media name="viewport" content="width=device-width，initial-scale=1.0">

    它为浏览器提供了关于如何控制页面尺寸和缩放比例的指令。

     width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

    当浏览器首次加载页面时，initial-scale=1.0 部分设置初始缩放级别。 

   

   把内容调整到视口的大小

    用户习惯在台式机和移动设备上垂直滚动网站，而不是水平滚动！

    因此，如果迫使用户水平滚动或缩小以查看整个网页，则会导致不佳的用户体验。

    还需要遵循的一些附加规则

          1. 请勿使用较大的固定宽度元素 - 例如，如果图像的宽度大于视口的宽度，则可能导致视口水平滚动。请务必调整此内容以适合视口的宽度。

          2. 不要让内容依赖于特定的视口宽度来呈现好的效果 - 由于以 CSS 像素计的屏幕尺寸和宽度在设备之间变化很大，因此内容不应依赖于特定的视口宽度来呈现良好的效果。

          3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置较大的 CSS 绝对宽度将导致该元素对于较小设备上的视口太宽。而是应该考虑使用相对宽度值，例如 width: 100%。另外，要小心使用较大的绝对定位值，这可能会导致元素滑落到小型设备的视口之外

    

  响应式网页设计 - 网格视图

       许多网页都基于网络视图（grid-view),这意味着页面被分为      

       在设计网页时，使用网格视图非常有帮助。这样可以更轻松地在页面上放置元素。

     

 

      响应式网格视图通常有12列，总宽度为100%，并且在调整浏览器窗口大小时会收缩和伸展。

      构建响应式网格视图

     让我们开始构建响应式网格视图。

     首先，确保所有 HTML 元素的 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和边框。

     I  请在 CSS 中添加如下代码：

  * {
     box-sizing: border-box;
    }

    下面的例子展示了一张简单的响应式网页，其中包含两列：

       

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid red;
  padding: 15px;
}

.menu {
  width: 25%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.main {
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}
</style>
</head>
<body>

<div class="header">
  <h1>Shanghai</h1>
</div>

<div class="menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="main">
  <h1>The City</h1>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
  <p>请调整浏览器窗口的大小，来查看内容如何响应调整大小。</p>
</div>

</body>
</html>

　  

        

      若网页只包含两列，则上面的例子还不错。

      但是，我们希望使用拥有 12 列的响应式网格视图，来更好地控制网页。

      首先，我们必须计算一列的百分比：100% / 12 列 = 8.33%。 

     II，我们为 12 列中的每一列创建一个类，即 class="col-" 和一个数字，该数字定义此节应跨越的列数：

    

    III,让每一个元素左浮动

      

   Iv,每行都应被包围在 <div> 中。行内的列数总应总计为 12：

    

 

   V,行内的所有列全部都向左浮动，因此会从页面流中移出，并将放置其他元素，就好像这些列不存在一样。为了防止这种情况，我们会添加清除流的样式：

            

 

     例如：要实现如下页面布局

     在电脑屏幕上，显示如下：

     

 

     在 平板中显示如下：

     这里是因为截屏有空隙

 

 

   在手机中，显示如下：

  这里是因为截屏有空隙

 

 

   代码如下：

   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1.0">
    <title>响应页面设计</title>
    <style type="text/css">
        *{box-sizing: border-box;}
        html {
            font-family: "Lucida Sans", sans-serif;
        }
        * {
            box-sizing: border-box;
        }

        .row::after {
            content: "";
            clear: both;
            display: table;
        }

        [class*="col-"] {
            float: left;
            padding: 15px;
        }

        html {
            font-family: "Lucida Sans", sans-serif;
        }

        .header {
            background-color: #9933cc;
            color: #ffffff;
            padding: 15px;
        }

        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .menu li {
            padding: 8px;
            margin-bottom: 7px;
            background-color: #33b5e5;
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }

        .menu li:hover {
            background-color: #0099cc;
        }

        .aside {
            background-color: #33b5e5;
            padding: 15px;
            color: #ffffff;
            text-align: center;
            font-size: 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }
        .footer {
            background-color: #0099cc;
            color: #ffffff;
            text-align: center;
            font-size: 12px;
            padding: 15px;
        }
        .col-1{width: 8.33%;}
        .col-2{width: 16.66%;}
        .col-3{width: 25%;}
        .col-4{width: 33.33%;}
        .col-5{width: 41.66%;}
        .col-6{width: 50%;}
        .col-7{width: 58.33%;}
        .col-8{width: 66.66%;}
        .col-9{width: 75%;}
        .col-10{width: 83.33%;}
        .col-11{width: 91.66%;}
        .col-12{width: 100%;}
        /*移动屏幕中*/
        [class*='col-']{
            width: 100%;
        }
        /*平板*/
        @media screen and (min-width: 900px){

            .col-s-1 {width: 8.33%;}
            .col-s-2 {width: 16.66%;}
            .col-s-3 {width: 25%;}
            .col-s-4 {width: 33.33%;}
            .col-s-5 {width: 41.66%;}
            .col-s-6 {width: 50%;}
            .col-s-7 {width: 58.33%;}
            .col-s-8 {width: 66.66%;}
            .col-s-9 {width: 75%;}
            .col-s-10 {width: 83.33%;}
            .col-s-11 {width: 91.66%;}
            .col-s-12 {width: 100%;}
        }
        /*电脑屏幕下*/
        @media screen and (min-width: 1200px){
            .col-1{width: 8.33%;}
            .col-2{width: 16.66%;}
            .col-3{width: 25%;}
            .col-4{width: 33.33%;}
            .col-5{width: 41.66%;}
            .col-6{width: 50%;}
            .col-7{width: 58.33%;}
            .col-8{width: 66.66%;}
            .col-9{width: 75%;}
            .col-10{width: 83.33%;}
            .col-11{width: 91.66%;}
            .col-12{width: 100%;}
        }
    </style>
</head>
<body>
<div class="header">
    <h1>shanghai</h1>
</div>
<div class="row">
    <div class="col-3 col-s-3 menu">
        <ul>
            <li>航班</li>
            <li>景点</li>
            <li>美食</li>
            <li>购物</li>
        </ul>
    </div>
    <div class="col-6 col-s-9">
        <h1>城市</h1>
        <p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p>
        <p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接，北端的崇明岛处于长江入海口中，与周围的江苏、浙江、安徽三省多个城市共同构成世界级城市群长江三角洲城市群，是其重要的组成部分。</p>
    </div>
    <div class="col-3 col-s-12" >
        <div class="aside">
            <h1>简介</h1>
            <p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p>
            <h1>位置</h1>
            <p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p>
            <h1>交通</h1>
            <p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p>
        </div>
    </div>
</div>
<div class="footer">
    <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>

      15.border、padding、margin属性见另一个篇随笔“块级元素-盒子模型1”