zoukankan      html  css  js  c++  java
  • Web-9月13日随笔

    通配符(*)选择器的利弊:

          利:方便,省事  弊:会加大浏览器的负荷  (按需求进行选择)

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

    ul跟p标签天生自带内外边距。

    —.p标签中内容分别是汉字和英文是为什么会出现两种不同的结果。

    范例:

      <p>博客园首页(即网站首页)只能发布原创的、高质量的、能让读者从中学到东西的内容。</p>

       <p>sdadasdasdasdasfasjfakfnjdkgfukahffuw</p>

      效果:给p设置宽高后,第一个p中的文字自动换行;   第二个p中的英文超出了所设置的宽。

    原因:因为浏览器在解析第二个p的时候,字母之间没有空格,所以会认为它是一个没写完的英语单词,所以不换行。

    二.列表:

    作用:做二级菜单和导航条

        无序列表(ul)    li(一列)   ol(有序列表)  dl(自定义列表)  dt(自定义列表的小标题)  dd(自定义列表的内容)

    ul跟ol的区别:ol前面可以用type修饰样式;

    三.外边距与内边距

    外边距:margin,共四个属性值:top(上)right(右)bottom(下)left(左)

    margin的属性值(简写):1.margin:20px;(外边距的上,右,下,左四个方向都是20px;)

            2.margin:10px   20px;(外边距的上下是10像素,左右是20像素)

            3.margin:10px   20px   30px;(外边距的上下是10像素和30像素,左右是20像素)

            4.margin:10px  20px  30px  40px ;(外边距的上是10像素,右是20像素,下是30像素,左是40像素)

             5.margin-top:属性值   margin-right:属性值  margin-bottom:属性值  margin-left:属性值

    padding同上;

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

    盒子的真实宽度:width+border*2+padding-left+padding-right

    盒子的真实高度:height+border*2+padding-top+padding-bottom

    四.margin塌陷现象

    范例:

        <!DOCTYPE   html>

        <html>

         <head>

       <meta charset="UFT-8">

        <title>margin塌陷现象</title>

            <style>

          .one{

              "100px" ;   height:"100px" ;

              border:1px   solid   red;  margin:150px;    }

          .two{  "100px" ;   height:"100px" ;

              border:1px   solid   red;  margin:100px;}

         </style>  

       </head>

        <body>

          <div class="one">

             哈哈

          </div>

          <div class="two">

             嘿嘿

          </div>

        </body>

         </html>

    解释:上下两个垂直分布的元素设置外边距时,较小的会塌陷到较大那边。

    五.

    块级元素的特点:1.可以设置宽高  2.margin可以随便用  3.独占一行,无论内容多少,不能与其他元素在一行显示。(div,h1-h6,p,ul,li,ol,dl,dt,dd,form等)

    行内元素的特点:1.不可以设置宽高  2.内容的大小决定空间的大小  3.可以和其他元素在同一行显示  4.margin只能上下用,左右不能用。 (sapn,a,em,lable,strong,b,i,img)

    行内块元素的特点:1.可直接设置宽高  2.margin可以随便用了  3.可以在同一行显示

    六.display-inline(转行内元素,可以在一行显示了,但无法设置宽高,margin只能设置上下)

      display-block(转块状元素,可以设置宽高,但独占一行,marign随便用)

      display-inline-block(转行内块,可以在一行显示,可以设置宽高,margin随便用)

    七.line-height(行高)设置字体的垂直位置。

      一般情况下行高与高相同。

          当是2的时候,line-height的值是2*font-size的大小 =(36px),默认字体大小是18px;

          

  • 相关阅读:
    归并排序
    1、钢条切割问题
    webdriver高级应用- 使用日志模块记录测试过程中的信息
    webdriver高级应用- 测试过程中发生异常或断言失败时进行屏幕截图
    webdriver高级应用- 浏览器中新开标签页(Tab)
    webdriver高级应用- 高亮显示正在操作的页面元素
    webdriver高级应用- 精确比较页面截图图片
    webdriver高级应用- 操作富文本框
    webdriver高级应用- 启动带有用户配置信息的firefox浏览器窗口
    webdriver高级应用- 操作日期控件
  • 原文地址:https://www.cnblogs.com/lovels/p/9642948.html
Copyright © 2011-2022 走看看