Web-9月13日随笔

Posted lovels

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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{

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

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

      .two{  width:"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;

      

以上是关于Web-9月13日随笔的主要内容,如果未能解决你的问题,请参考以下文章

Web--9月11日随笔

Web-9月26日随笔

Web-9月27日随笔

Web-9月14日随笔

Web--9月28日随笔

Web--9月29日随笔