关于html中元素和布局的笔记

一、元素类型
  css标准文档流:默认的网页从左到右,从上到下的排列方式显示出网页效果

类型:
  1.块级元素:(div,p,table……)
    a.独占一行
    b.可以设置宽度和高度
    c.可以设置左右居中(整个块的位置),根据左右外边距进行设置(margin:auto/align:center)
  2.行内元素:(a,span,label……)
    a.默认排在一行,除非被挤下去
    b.不能设置宽高(大小只由内容决定)
    c.如果想实现左右居中,必须在其父类的块元素中设置text-align:center.
    d.内边距有效果,但上下的paddding不会撑开外面的元素,不被父类div认可
    e.margin左右有效果,上下无效果
  3. 行内块元素:
    a.默认排在一行(img……)
    b.可以设置宽度和高度(可以设置标签,也可以只由内容决定)
    c.居中参考行内元素的操作
    d.padding和margin遵循盒子模型
  4.他们之间的相互转换,通过属性display来实现
    display:none(隐藏)block(设置为块元素)inline(设置为行内元素)inline-block(行内块元素)
二、布局:
  1.浮动:float
    代码>float:left(right);
    a.元素浮动后,会脱离(丢失)标准文档流,后面的元素会抢占他的位置
    b.设置浮动的元素,不能覆盖前面也设置了浮动属性元素的上面,他们按照类似行内元素的形式排列在一行(不等同于行内元素的排列,例如br不能让他们换行)
    c.浮动元素不会覆盖住非浮动元素的内容,但是当非浮动元素占据浮动元素原有位置后,为了内容不被遮盖,非浮动元素自身的行距会自动扩大,有可能出现设定的宽高所形成的盒子抢占了浮动元素的位        置,也因此被浮动元素所覆盖了,而内容为了不被遮挡而留在浮动元素的外面
    d.如果对当前元素设置clear:both;会导致其承认其他任意元素的非浮动性(但是在其他任意元素的视角中,浮动元素仍然为浮动元素),无论其本身是否浮动,都没有影响
  2.定位:position
  (偏移量:相对目标位置的移动距离,类似于坐标,可以通过:top,bottom,left,right进行偏移,进而移动元素的位置)
    (1)相对定位(relative)
      a.top:让原位置在移动后的位置上方,距离x的偏移量(其他也类似)
      b.移动后,原位置不会被其他元素抢占,即不会丢失文档流
      c.即使移动元素是浮动元素,仍然能够根据原位置进行移动(原位置即是该元素未移动前所在位子,原位置改变,移动后的元素位置也会改变)
      d.目标是原位置(元素本身)
    (2)绝对定位(absolute)
      a.元素会脱离文档流
      b.目标是设置了定位属性的父标签,如果父类没有,则继续向上找,直到body(body就算没有设置position,也可以成为定位目标)
      c.top等移动属性,同样是相对距离(同相对定位中的a)
      d.元素的层级升高,若与其他元素重叠,则会覆盖被重叠元素
    (3)固定定位(fixed)
      a.脱离文档流
      b.目标是整个可视的网页窗口
      c.top等移动属性,同样是相对距离(同相对定位中的a)
      d.元素的层级升高,若与其他元素重叠,则会覆盖被重叠元素

posted @ 2021-08-13 20:14  酌酒不喝酒  阅读(69)  评论(0编辑  收藏  举报