2020 July 12 HTML与CSS

CSS第四篇：CSS属性-元素类型

元素类型

  1. 根据元素的显示类型，HTML元素可以主要分为2大类
    1. 块级元素
    2. 行内级元素
  2. 根据元素的内容类型，HTML元素可以主要分为2类
    1. 替换元素
    2. 非替换元素

块级、行内级元素

  1. 块级元素
    1. 独占父元素一行（如果设置了宽度，就算右边距离父元素有很多空间，也不会让其他元素放置）

    2. 比如：

       div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等
  2. 行内级元素
    1. 多个行内级元素可以在父元素的同一行中显示

    2. 比如：

       a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、video、audio等

替换、非替换元素

  1. 替换元素
    1. 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容

    2. 比如：

       img、input、iframe、video、embed、canvas、audio、object等
      1. img不像其他标签一样直接双标签内部写上内容，就显示什么内容。img显示需要根据src属性，加上这个img标签名，浏览器然后渲染出图片显示
  2. 非替换元素
    1. 和替换元素相反，元素本身是有实际的内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容

    2. 比如：

       div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label等

  3. w3C官方文档对img标签的说明：

     <img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were inline-block. You can set properties like border/border-radius, padding/margin, width, height, etc. on an image.
 img是一个替换元素，它有个默认display值是inline，但是它的默认维度是由嵌入图像的内在值定义的，就像它是inline-block一样。你可以设置属性像：border/border-radius, padding/margin, width, height等
    1. 即img是inline不是inline-block，是行内替换元素

元素分类总结

pic

  1. 块级元素特点：
    1. 块级元素都是非替换元素，无替换元素
    2. 独占父元素一行
    3. 可以随意设置宽高（即使设置宽高，还是独占一行）
    4. 高度默认由内容决定
  2. 行内级元素
    1. 即包含替换，也包含非替换元素
    2. 行内、替换特点：
      1. 跟其他行内元素在同一行显示
      2. 可以随意设置宽高
    3. 行内、非替换特点：
      1. 跟其他行内元素在同一行显示
      2. 不可以随意设置宽高
      3. 宽高由内容决定

CSS属性

display

  1. CSS中有个display属性，能修改元素的显示类型，有4个常用属性

     block:让元素显示为块级元素
 inline: 让元素显示为行内级元素
 none: 隐藏元素，让某个元素消失
 inline-block: 让元素同时具备行内级、块级元素的特征

  2. 举例：

     <style>
     .mail li{
         list-style: none;
     }
     .mail li a {
         text-decoration: none;
         font-size: 13px;
         color: #000;
         /* 将a标签转为块级 */
         display: block;
     }
     .mail li a:hover {
         background-color: #0ff;
     }
     .mail ul {
         padding: 0;
         margin: 0;
         /* width: 100px; */
         display: none;
         border: 1px solid #999;
     }
     .mail .title {
         background-color: #999;
         /* 放到父元素更好 */
         /* width: 100px; */
         /* 行内->块级 */
         display: block;
     }
     /* 兄弟选择器：聚焦而且找到ul */
     /* .mail .title:hover+ul {
         display: block;
     } */
     /* 父控件 */
     .mail {
         width: 100px;
         /* 子元素内容全部居中 */
         text-align: center;
     }
     /* 当鼠标移动到mail上时，将它里面的ul元素显示出来 */
     .mail:hover ul{
         display: block ;
     }
 </style>
 <body>
 <div class="mail">
     <span class="title">邮箱</span>
     <ul>
         <li><a href="#">QQ邮箱</a></li>
         <li><a href="#">126邮箱</a></li>
         <li><a href="#">139邮箱</a></li>
     </ul>
 </div>
 </body>
    1. 注意： 多个子元素有同样的属性，可以考虑设置到父元素上，用来继承（前提条件是CSS属性可以继承）

inline-block

  1. 让元素同时具备行内级、块级元素的特征
    1. 跟其他行内级元素在同一行显示
    2. 可以随意设置宽高
    3. 宽高默认由内容决定
  2. 可以理解为：
    1. 对外来说，它是一个行内级元素
    2. 对内来说，它是一个块级元素
  3. 常见用途：
    1. 让行内级非替换元素（比如a、span）能够随时设置宽高
    2. 让块级元素（比如div、p等）能够跟其他元素在同一行显示

  4. 代码举例：

     <style>
     .page {
         list-style: none;
         padding: 0;
         margin: 0;
     }
       
     .page li {
         display: inline-block;
         width: 30px;
         height: 30px;
         line-height: 30px;
         margin-right: 10px;
         font-size: 12px;
         text-align: center;
     }
     .page .pre,.page .next {
         width: 70px;
     }
     .page li a {
         background-color: #fff;
         display: block;
         height: 30px;
         text-decoration: none;
         border: 1px solid #ddd;
     }
     .page li a:hover {
         background-color: #f2f8ff;
         border: 1px solid #38f;
     }
     .page li strong {
         background-color: #fff;
         display: block;
         height: 30px;
     }
 </style>
    
 <ul class="page">
     <li class="pre"><a href="#">&lt; 上一页</a></li>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><strong>3</strong></li>
     <li><a href="#">4</a></li>
     <li><a href="#">5</a></li>
     <li><a href="#">6</a></li>
     <li class="next"><a href="#">下一页 &gt;</a></li>
 </ul>

display的其他属性值

  1. display的以下取值，等同于某些HTML元素

     table： <table>,一个block-level表格
 inline-table：一个line-level表格
 table-row： <tr>
 table-row-group: <tbody>
 table-header-group: <thead>
 table-footer-group: <tfoot>
 table-cell: <td>、<th>,一个单元格
 table-caption: <caption>,表格的标题
 list-item: <li>

visibility

  1. visibility，能控制元素的可见性，有2个常用值
    1. visible：显示元素
    2. hidden：隐藏元素
  2. visibility:hidden与display:none的区别
    1. visibility:hidden
      1. 虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
    2. display:none
      1. 不仅元素看不见了，而且元素的框也会呗移除，不会占着任何位置

overflow

  1. overflow用于控制内容溢出时的行为
    1. visible：溢出的内容照样可见(默认值)
    2. hidden：溢出的内容直接裁剪
    3. scroll:溢出的内容不裁剪，但是可以通过滚动机制查看
      1. 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
    4. auto：自动根据内容是否溢出来决定是否提供滚动机制
  2. overflow-x、overflow-y两个属性，可以分别设置水平、垂直滚动方向

  3. 举例：

     <style>
     div {
         /* 限定范围 */
         width: 100px;
         height: 100px;
         background-color: yellow;
         /*超出内容滚动  */
         /* overflow: auto; */
         overflow-x: auto;
     }
 </style>

细节

  1. 行内级元素之间的空格
    1. 行内级元素（包括inline-block元素）的代码之间如果有空格，会被解析显示为空格
    2. 目前建议的解决方法：
      1. 元素代码之间不要留空格
      2. 注释掉空格
      3. 设置父元素的font-size为0，然后在元素中重新设置自己需要的font-size
        1. 此方法在safari不适用
      4. 给元素添加float

    3. 举例

       <style>
     span:nth-of-type(odd) {
         background-color: #f00;
     }
     span:nth-of-type(even) {
         background-color: #0f0;
     }
    
     /* 父元素的font-size设置为0 */
     div {
         font-size: 0;
     }
     /* 子元素设置自己的font-size */
     div span {
          font-size: 12px;
      }
 </style>
        
 <body>
     <!-- 默认情况下每个内容之间都会有一个空格 -->
     <span>span1</span>
     <span>span2</span>
     <span>span3</span>
     <span>span4</span>
     <br>
     <!-- 解决办法：1. 元素之间不留空格 -->
     <span>span5</span><span>span6</span>
     <br>
     <!-- 办法：2. 空格注释掉 -->
     <span>span7</span><!-- --><span>span8</span>
     <!-- 办法：3. a.父元素的font-size设置为0  b.子元素设置自己的font-size -->
     <div>
         <span>span9</span>      <span>span10</span>
     </div>
        
 </body>

      pic

  2. 元素嵌套包含的注意点
    1. 不要使用行内级元素去包含块级元素
    2. 块级元素、inline-block元素，一般可以包含其他任何元素

    3. 行内级元素（比如：a、span、strong），一般只能包含行内级元素

       <!--错误示范-->
 <span>
     <div></div>
 </span>

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents