zoukankan      html  css  js  c++  java
  • HTML/CSS5

    列表

        一.无序列表ul     

            1. 内部必须要有子标签<li></li>          2. ul天生自带内边距 还有一个 p标签

    并集选择器

            body  ,ul   ,p用逗号隔开

           *选择器有好处也有弊端

          好处就是省事,弊端就是因为省事加大浏览器的负荷        解决办法 按需选择

           list-style样式属性去除列表前的符号

           ul{

               border:1px  solid  red;

               list-style:none;

              }

          list-style的属性值circle(空心圆)disc(实心圆)square(正方形)none(空)

    二.有序列表ol

        1.内部必须要有子标签<li></li>        2.天生自带内外边距

         ol和ul不同之处是就在前面符号的区别        <ol type="A">

    三.自定义列表dl

          <dl>               (自定义内容)

               <dt></dt>       ( 小标题)

               <dd></dd>      ( 内容)

         </dl>

    列表做事么?       做二级菜单做导航

    四.  margin和padding问题的探讨

            margin

                  margin:200px设置一个值说明top:right  bottom   left都是200px

                  margin:200px;设置两个值上下是200px左右是100px

                  margin:200px  50px   100px;设置三个值上是200px左右是50px下是100px

                  margin:200px   50px    100px     50px ;设置四个值上是200px右是50px下是100px左是50px

           padding同上

          实际占用的空间大小

                 通过分析发现一个元素实际占用的空间是width+border*2+padding*2+margin*2

          一个元素的实际高度

                  实际个高度=height+padding-top+bottom+2*border

          margin的塌陷是现象是什么?

                 相邻的两个块级元素同时设定他们的外边距不会叠加会去最大的,这种现象叫margin塌陷

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

         根据以上分析现象有分      标签    块级和内敛        块级标签会独占一行无论多少内容          内敛标签(行级标签)根据内容多少占据空间大小

         块级p  h1-h6   div    ul    li    dl 等

         内敛span   img    i    b    a    em   icon(矢量)

    两者的区别

    块级

                1.块级元素会独占一行

                2.块级可以设置宽高

           内敛

                1.内敛不会独占一行

                 2.内敛不可以设置宽高

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

    转换

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

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

               3.行级、块转元素         给需要的元素添加属性display:inline-block

            (可以设置宽高了  可以在一行了    margin)

    备注:

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

            line-height的值和height的值相同   文本就上下居中

    拓展:

         line-height:px/2;

          当是2的时候line-height的值是2*font-size

  • 相关阅读:
    testd3p
    my open音频的
    1
    one play
    ndk ffmpeg实践2
    ndk ffmpeg实践
    Mac ndk21 交叉ffmpeg目前
    ffmpeg交叉
    and cmake 链接库及播放例子 及读文件
    更正之前《登录小案例》密码错3次15分钟内不准登录
  • 原文地址:https://www.cnblogs.com/LXW2002326/p/9642911.html
Copyright © 2011-2022 走看看