zoukankan      html  css  js  c++  java
  • 68. 设置元素浮动后,该元素的display值是多少?

    1.为什么关注此问题?

    行内元素设置为浮动后,可以设置宽高了,为什么?


    我们知道Html元素分三种

    块级元素(display:block)--> 可以设置元素的宽高

    行内元素(display:inline)-->  默认不换行,设置width/height无效(可以设置line-height),margin/padding上下无效

    行内块级元素(display:inline-block )-->  可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性

    实践出真知,动手吧!

    1.  
      <!DOCTYPE html>
    2.  
      <html lang="en">
    3.  
      <head>
    4.  
      <meta charset="UTF-8">
    5.  
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.  
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.  
      <title>Document</title>
    8.  
       
    9.  
      </head>
    10.  
       
    11.  
      <style>
    12.  
      .spn{
    13.  
      border: 2px solid #000000;
    14.  
      }
    15.  
      .mydiv{
    16.  
      border: 2px solid #000000;
    17.  
      }
    18.  
      #in{
    19.  
      display: inline-block;
    20.  
      border: 2px solid #005599;
    21.  
      }
    22.  
      </style>
    23.  
      <body>
    24.  
      <div class="page">
    25.  
      <span class="spn">行内元素1</span>
    26.  
      <span class="spn">行内元素2</span>
    27.  
       
    28.  
      <p id="in">行内块状元素1</p>
    29.  
      <p id="in">行内块状元素2</p>
    30.  
       
    31.  
      <div class="mydiv" id="a">
    32.  
      块状元素1
    33.  
      </div>
    34.  
       
    35.  
      <div class="mydiv" id="b">
    36.  
      块状元素2
    37.  
      </div>
    38.  
      </div>
    39.  
      </html>

    效果图:

     操作一:

    设置行内元素浮动,查看display的值

    设置前

    设置后

    操作二:

    设置块级元素浮动,查看display的值

    设置前

    设置后

    操作三:

    设置块级行内元素浮动,查看display的值

    设置前

    设置后

    结论: 设置元素为浮动后,display的值是block

    2.有什么意义?

    以后在项目中如果需要设置行内元素的宽高,则设置为浮动后,就可以设置了

  • 相关阅读:
    底图与蒙版的过渡效果transition
    消除blur属性的边框
    jquery ajax实例教程和一些高级用法
    常用js正则表达式大全
    HTML5 + JS 调取摄像头拍照下载
    JS运动框架
    JS 实现AJAX封装(只限于异步)
    事件委托详解
    JS 实现随机验证码功能
    利用JS调取电脑摄像头,实现拍照功能
  • 原文地址:https://www.cnblogs.com/dream111/p/13461088.html
Copyright © 2011-2022 走看看