Rumah > hujung hadapan web > html tutorial > 前端新人学习笔记-------html/css/js基础知识点(三) - 不穿裤子的衣服

前端新人学习笔记-------html/css/js基础知识点(三) - 不穿裤子的衣服

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-20 16:51:04
asal
1204 orang telah melayarinya

这断时间家里有点事,上班也有点任务,所以几天没看视频没来更新了。今天来更新一下了。

一:默认样式重置

      但凡是浏览默认的样式,都不要使用。

      body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
      ol,ul{list-style:none;padding:0;margin:0;}
      a{text-decoration:none;}
      img{border:none;}

二:块元素和内嵌元素

      块元素的特征:

          1.默认独占一行;

          2.没有宽度时,默认撑满一排;

          3.支持所有css命令;

       内联元素的特征:

           1.同类的标签可以在同排显示;

           2.不支持宽高;

           3.内容撑开宽度;

           4.不支持上下的margin和padding;

           5.代码换行被解析;

三:块元素和内嵌元素的转换

         display:block   使内联元素具备块属性标签的特性;

         display:inline   使块元素具备内嵌元素的特性。

         display:inline-block

             特性:1.块在一行显示;

                      2.行内属性标签支持宽高;

                      3.没有宽度的时候内容撑开;

             问题:1.代码换行被解析;

                      2.ie6,7不支持块属性标签的inline-block;

四:浮动

     1.块在一排显示;

     2.内联元素也支持宽高了;

     3.默认内容撑开宽度;

     4.脱离文档流;

     5.提升层级半层

        

wo shi div

         这个时候div标签就和里面的内容位于同一层级了。




box1

box2

这个时候会出现这样的现象,这就和提升了半个层级有关。

 

 

    

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan