zoukankan      html  css  js  c++  java
  • 9.13笔记

    一、无序列表(ul)

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

    2.ul自带内外边距,还有一个<p>标签、

    并集选择器body,ul,p{

                                      margin:0;

                                      padding:0;

                                    }

    *选择器的好处:省事,全都选中。

                   坏处:太省事,一至于加大浏览器的负荷

    解决方法:按需选择

    list-style...这是样式属性(除去列表前的符号)

    ul{

         border:1px solid red;

        list-style:none(空)/circle(空心圆)/disc(实心圆)/square(正方形)

       }

    二、Ol有序列表

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

    2.天生自带内外边距

    Ol与ul不停之处在于前面的符号

    有序列表改变前面的符号用tyle属性修改,在标签内。

    <li  tyle="A/a/1/I>

    三、自定义列表

    <dl>自定义列表 <dd>内容 <dt>小标题

    列表能做什么?

    做二级菜单,做导航。

    备注:margin与padding的问题探讨:

    margin:200px;设置一个值,说明上下左右都是200px。

    margin:200px(上下) 100px(左右);

     margin:100px(上)50px(左右)100px(下)

    margin:100px(上)200px(右)100px(下) 200px(左)

    padding同上

    实际占用空间大小

    一个元素实际占用的空间为width+border*2+padding*2+margin*2

    一个表情的实际高度为height+padding-top+padding-bottom+2*border

    两个相邻的块级同时margin时,他们之间的外边距不会叠加,会取最大的,这种现象叫margin塌陷

    有的标签会设置背景是会独占一行

    有的标签会随内容的增减来改变自己的空间大小

    标签据此可分为两类:块级标签(会独占一行,无论内容多少){p/h1~h6/div/ul/ol/dl/等}

                                      内敛标签(行级标签,根据内容多少占据空间大小){span/img/i/b/a/em}

    二者区别

    块级                                           内敛

    1.块级元素会独占一行               1.内敛不会独占一行----不可以设置行高

    2.块级可以设置行高                   2.内敛元素的margin上下不起作用

    二者转换

    块级转行级(display:inline;)

    行级转块级(display:block;)

    行级块元素(display:inline-block;){可以设置行高、可以在一行、margin可以随意使用}

    备注:

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

  • 相关阅读:
    [转] 公共DNS,114.114.114.114和8.8.8.8
    [转] linux nc命令
    [转] Gitlab 8.x runner安装与配置
    HDFS 删除大量文件
    [转] java获取hostIp和hostName
    [转] scala中:: , +:, :+, :::, +++的区别
    Linux shell 中提取zip或jar文件中的某个文件
    [转] watch 命令使用(linux监控状态)
    [转] Citrix XenDesktop桌面登录VM提示Citrix Web插件错误
    Git sparse-checkout 检出指定目录或文件
  • 原文地址:https://www.cnblogs.com/mo123/p/9641470.html
Copyright © 2011-2022 走看看