码迷,mamicode.com
首页 > Web开发 > 详细

Web-9月13日随笔

时间:2018-10-16 13:53:35      阅读:961      评论:0      收藏:0      [点我收藏+]

标签:中学   tle   正方形   特点   占用   分布   不能   一个   play   

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

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

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日随笔

标签:中学   tle   正方形   特点   占用   分布   不能   一个   play   

原文地址:https://www.cnblogs.com/lovels/p/9642948.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!