zoukankan      html  css  js  c++  java
  • block、inline、inline-block区别以及标签嵌套

    1、block

       将元素转为块元素,块元素占一行,可以设置宽和高。

    2、inline

      将元素转为行内元素,占一行,不可以设置宽和高。

    3、inline-block

      将元素设置为行内块元素,这时元素既可以设置宽和高,又占一行。但这时的元素之间会出现缝隙,解决办法:1)设置浮动 2)将父元素的font-size设置为0,子元素设置为实际大小

    4、常见的几种元素

      块级元素 :div、h系列、li、dt、dd、p

          行内元素  :span、u、a、、em、b、i、u、em

          行内块元素:input 、img 、button 、texterea 、label。

    5、p标签不能包含div标签

      块级元素和行内元素之间的嵌套,是块级可以嵌套行内元素和某些块级元素,而行内元素不能嵌套块级元素,可以嵌套文本和其他行内元素。但有几个特殊的块级元素只能包含行内元素, h1~h6、p、dt,因此p标签不能包含div元素,因为浏览器渲染的缘故,p包含div元素时会被渲染成:<p>xxx</p><div>xxxx</div><p></p>。

      li 内可包含 div 标签

         <li><div></div></li>

      块级元素与块级元素并列、行内元素与行内元素并列

        <div><h2></h2><p></p></div>  正确

        <div><a href="#"></a><span></span></div>  正确

        <div><h2></h2><span></span></div>  错误,行内元素与块级元素并列了

  • 相关阅读:
    Will Go eventually replace C++ as Google hoped when Go came out?
    5G到底什么时候来,它究竟能给我们带来什么?
    eog——Eye of GNOME Image Viewer
    Appweb——Embedded Web Server
    【2017】数字重排
    【9203】众数
    【2034】四人投票
    【9204】第k小整数
    【2031】求一元三次方程的解
    iOS 7: 如何为iPhone 5s编译64位应用
  • 原文地址:https://www.cnblogs.com/zhaoyihao/p/6677297.html
Copyright © 2011-2022 走看看