• 列表


    1.列表

      无序列表 ul

      内部必须有子标签<li></li>

      ul天生子代内外边距 (p标签也有)


    2.并集选择器:标签名之间用逗号隔开

    body,ul,p{
    /*标签之间用英文逗号隔开*/
    }

    3.*(通配符选择器)的好处与弊端:

      好处:省事

      弊端:太省事,加大了浏览器的负荷

      解决方法:按需查找


    4.样式属性 list-style:除去或改变列表前的符号

      list-style属性值:circle (空心圆) disc(实心圆)

      square(正方形) none(空)


    5.有序列表 ol

      内部必须有子标签li

      天生自带内外边距

    6.有序列表改变前面的符号,用标签属性type修改

    <ol type="A">
        <li>123</li>
    </ol>

    自定义列表 dl

    <dl>
        <dt>姓名</dt>
        <dd></dd>
        <dd></dd>
    <!--dt是小标题 dd是内容-->
    
    </dl>

    //列表的用法还有很多

      比如我们在网页中经常碰见额导航栏,菜单都是

    margin 和padding的探讨

    div {
        margin:200px; 
        /*设置一个值,说明上下左右都是200*/
    }
    
    
    div {
        margin:200px 100px;
        /*设置两个值,说明上下是200,左右是100*/
    } 
    
    div {
        margin:200px 100px 200px;
        /*设置三个值,说明上是200,左右是
    100,下是200*/
    } 
    
    div {
        margin:200px 50px 100px 50px;
        /*设置四个值,说明上是200,右
    是50,下是100 ,左是50
    (按顺时针方向)*/
    } 

    padding的用法跟margin一样

    元素的占用空间大小

    元素实际占用空间的大小

      width+border*2+margin*2+padding*2

    一个标签元素的实际高度

      height+border*2+padding-top+padding-bottom

    margin塌陷现象:相邻两个块级元素同时设置margin时,它们的margin不会叠加,会取最大值


    有的标签设置背景时会独占一行,有的随着内容的增减而改变自己的空间大小

    根据以上现象,标签又分为

    块级标签

      独占一行,无论内容多少 p h1-h6 div ul ol dl li

    内敛标签(行级标签)

      根据内容多少占用空间大小 img i b span a em icon(矢量标签)

    二者区别

      1 块级标签会独占一行,内敛标签不会

      2 块级可以设置宽高,内敛标签不可以

      3 内敛元素的margin上下不起作用

    二者转换

      1 块级转行级 给块级元素添加属性 display(显示):inline(行);

      2 行级转块级 给行级元素添加属性 display:block(块);

      3 行级块 给需要的元素添加属性 display:inline-block;
      (可以设置宽高 可以在一行 可以设置margin)

    备注:

    行高 line-height:设置字体的垂直位置

    line-height和height的值相同时,文本居中

    扩展:

    div {
        line-height:50px/2;
    }

    当是2的时候,line-height的值是2*font-size的大小--36px

  • 相关阅读:
    HDU4825/5536 [01 字典树/简单字典树更新]
    HDU 2017 多校联合Contest 3
    51nod 多重背包 [二进制优化]
    UVa 123042D Geometry 110 in 1! [平面几何]
    UVA 11796Dog Distance[平面几何]
    洛谷P1004 方格取数[多维dp]
    HDU 1576 A/B [逆元]
    POJ1006 中国剩余定理
    HDU 1573~3579 X问题&Hello Kiki[同余方程]
    一元线性同余方程组
  • 原文地址:https://www.cnblogs.com/zhoumao/p/9642626.html
Copyright © 2020-2023  润新知