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

web第七天,标签分类

时间:2020-02-20 20:16:14      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:整理   布局   定义   dde   middle   根据   最小   bsp   需要   

一,标签分类

  1,按类型分

    1,block(块):

      div,ul,ol,li,dl,dd,dt,p,h1......h6,

      特点 :

      ①,块是上下排列的,块是独占一行的

      ②,块支持所有CSS样式

      ③,当块不写宽度的时候,默认的宽是父容器的宽

      ④,块永远是一个矩形区域

 

    2,inline(内联) :

      span,img,a,strong,em

      特点 :

      ①,内联是左右排列的,内联必须在一起

      ②,内联有些样式是不支持的,width,height,padding-top,margin-top

      ③,内联元素的宽度是由内容决定的

      ④,不一定是矩形区域

      ⑤,两个内联元素之间有一个间隙(折行带来的间隙)

        一般情况下是不需要解决这个问题的,因为我们一般用块做布局,用内联元素做文本修饰

        解决 : 1,然内联元素写到一行上

            2,给父容器设置font-size=0,再给当前元素设置正常的文字大小

 

    3,inline-block(内联的块)

      input,select

      同时具有内联样式与块样式的特性

 

  2,按显示分

 

    1,替换元素 : 浏览器根据元素的标签和属性,决定元素的具体显示内容。

      img,input

 

    2,非替换元素 : 将内容直接告诉浏览器,将其显示出来

      <div>aaaaaaa</div>

    注 : 图片<img>是一个内联标签,但是它可以调节宽高(因为它还是一个替换元素)

 

  3,display

 

    查看每一个标签的类型(显示框类型)

    值 :

    block , inline , inline-block , none

    none : 不显示标签(不占位),类似于border-right:none    text-decoration:none

    

    display : none 与 visibility:hidden(不显示标签,原标签位置留白)的区别 : 后者是占位的

 

  4,标签嵌套规范

 

    可以通过右键,对选中代码进行格式化(整理杂乱无章的代码)

 

    标签本身就有许多嵌套规范

      table(tr(td,th))

      ul,li

      dl,dd,dt

 

    块标签可以嵌套内联标签

    <div>   √

      <span></span>

    </div>

 

    块标签不一定能嵌套块标签

    <div>   √

      <div></div>

    </div>

    特殊

    <p>   ×

      <div></div>

    </p>

  

    内联标签不可以嵌套块标签

    <span>   ×

      <div></div>

    </span>

    特殊

    <a href="">  √

      <div></div>

    </a>

 

    不能自己嵌套自己的操作:

     <a href="">   错

        <a href=""></a>

     </a>

    <h2>   错

      <h2></h2>

    </h2>

 

  5,透明度

 

    opacity : 0(完全透明) ~ 1(不透明),跟display:none 也是有区别的。

    

    rgb(),rgba()a的取值也是0-1,

    使用rgba()设置透明度会使背景透明,容器的内容不会透明,而使用opacity可以使容器完全透明。

 

  6,手势

 

    cursor : default  pointer

    总结手型:https://www.w3school.com.cn/cssref/pr_class_cursor.asp

    自定义鼠标样式 :要求图片是有格式的  .cur   .ico

 

  7,最大最小宽高

 

    height=100px;   ==100

    min-height=100px;  >=100

    max-height=100px;   <=100

 

    对100%单位做一个扩展学习

    100%单位永远只与父容器有关

  

  8,CSS默认样式

 

   有默认样式的:
        body : margin 8px
        p : 上下margin 1em;-> 16px;
        h1 h2 h3 : font-size不一样,有上下margin
        ul : 默认的小点(disc) 左padding  上下margin
        a : color: -webkit-link; cursor: pointer; text-decoration: underline;

 

  无默认样式的:

    div    span...........

 

  在开发一个网页之前:

    1,先写一个结构HTML

    2,去掉标签的默认样式

    3,在PS工具中进行CSS样式的测量

 

    去掉默认样式,css  reset方案

    body,p,h1,h2,h3,ul,ol{margin:0; padding:0 }

    *{margin:0;  padding:0}

 

    ul,ol{list-style:none}

  

    a{text-decoration:none}

 

    img{display:block}  img{vertical-align:bottom;}

  

    vertical-align属性 可以对inline进行一个对齐方式的改变

    默认:baseline(基线)bottom  top  middle

 

    常见的CSS  reset:https://blog.csdn.net/brain_bo/article/details/815604444

 

web第七天,标签分类

标签:整理   布局   定义   dde   middle   根据   最小   bsp   需要   

原文地址:https://www.cnblogs.com/lykpy/p/12332751.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!