本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(12)

2021-06(103)

2021-07(6)

2021-08(78)

2021-09(50)

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

发布于2021-09-15 22:19     阅读(98)     评论(0)     点赞(2)     收藏(2)


一、元素类型
  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.元素的层级升高,若与其他元素重叠,则会覆盖被重叠元素




所属网站分类: 技术文章 > 博客

作者:小猪佩奇身上纹

链接:http://www.qianduanheidong.com/blog/article/192689/17ffc6111afd434ea9ac/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

2 0
收藏该文
已收藏

评论内容:(最多支持255个字符)