首页 > 其他分享 >十步学习css定位知识

十步学习css定位知识

时间:2023-08-04 21:38:28浏览次数:41  
标签:定位 十步 元素 1a width position div css absolute


十步学习css定位知识


    http://www.barelyfitz.com/screencast/html-training/css/positioning/


 


这个教程解释了css布局中的以下问题:


position:static, 

 
 
     position:relative, 

 
 
     position:absolute, 

 
 
     float


 


作为例子的div的代码:


<div id="example"> 

 

    

 
<div id="div-before">
 
<p>id = div-before</p>
 
</div>
 

    

 
<div id="div-1">
 
<div id="div-1-padding">
 

    

 
<p>id = div-1</p>
 

    

 
 
 <div id="div-1a"> 

 
 
 <p>id = div-1a</p> 

 
 
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p> 

 
 
 </div> 

 

    

 
 
 <div id="div-1b"> 

 
 
 <p>id = div-1b</p> 

 
 
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p> 

 
 
 </div> 

 

    

 
 
 <div id="div-1c"><p>id = div-1c</p></div> 

 

    

 
</div>
 
</div>
 

  <!-- /id=div-1-padding /id=div-1 --> 

 

    

 
<div id="div-after">
 
<p>id = div-after</p>
 
</div>
 

    

 

  </div>


 


1 position:static


    这是所有元素的默认position,


    表示:元素没有做特殊定位处理,元素会出现在文档中它应该在的位置。


 


#div-1 { 

 

   position:static; 

 

  }


 



   

十步学习css定位知识_float


2 position:relative


相对元素本应该在位置的top,bottom,left,right。


 


#div-1 { 

 

   position:relative; 

 

   top:20px; 

 

   left:-40px; 

 

  }


 



十步学习css定位知识_div_02


可以看到div-1之后的元素div-after在div-1移动之后,没有跟着移动,而是保持原来的位置,这是因为div-1在被移动之后,它还是占着原来的位置。这个特性将在后面被使用,可以看到它的用处。


 


3:absolute


absolute的元素将被从文档中移出来(参加normal flow的概念),放在指定的位置。如,


#div-1a { 

 

   position:absolute; 

 

   top:0; 

 

   right:0; 

 

   width:200px; 

 

  }


 


因为div-a被移出来了,所以后面的元素也将向上移动,以填补div-a的空缺。可以看到div-a被移到网页右上角了。其实,我们真正想要的是让div-a位于相对div-1的右上角,而不是整个网页。



十步学习css定位知识_integer_03


 


IE有个bug:如果用百分数来表示width,IE会基于元素的父元素来计算这个值,而不是基于被移动的这个元素来计算。


 


4 positive:relative和positive:absolute


为了将上面的例子纠正为div-a在div-1的右上角,这样做:


#div-1 { 

 

   position:relative; 

 

  } 

 

  #div-1a { 

 

   position:absolute; 

 

   top:0; 

 

   right:0; 

 

   width:200px; 

 

  }


十步学习css定位知识_div_04


如果一个被指定为absolute的元素,其父元素是relative的,那么就将相对于其父元素被移动,否则就将基于根元素,即body(?html)来移动。


5 两列的布局


#div-1 { 

 
relative; 

 

  } 

 

  #div-1a { 

 
absolute; 

 

   top:0; 

 

   right:0; 

 

   width:200px; 

 

  } 

 

  #div-1b { 

 
absolute; 

 

   top:0; 

 

   left:0; 

 

   width:200px; 

 

  }



十步学习css定位知识_integer_05


用absolute 的一个好处


    可以按任何顺序布局元素的位置,而不是受到元素在html中的声明位置(前后关系)。如上,div-1b在div-1a左边,但是声明的时候,div-1a在前面。


 


但是上面也有一个问题,其他元素被遮住了,本例中就是div-after。


6 两列的absolute height


为了解决上面的问题,可以显式定义div-1的高度,


#div-1 { 

 

   position:relative; 

 

   height:250px; 

 

  } 

 

  #div-1a { 

 

   position:absolute; 

 

   top:0; 

 

   right:0; 

 

   width:200px; 

 

  } 

 

  #div-1b { 

 

   position:absolute; 

 

   top:0; 

 

   left:0; 

 

   width:200px; 

 

  }



十步学习css定位知识_integer_06


这样,div-after又可以看见了。


但是问题是,要估算一个正确的高度不容易。


7 float


通过浮动的方式来解决上面的问题:


#div-1a { 

 

   float:left; 

 

   width:200px; 

 

  }



十步学习css定位知识_integer_07


可以看到,不用定义div-1的高度,也可以看见div-after。


Float常被用到图像的布局,以及其他复杂的布局。Float是进行复杂布局唯一可用的工具。


8 多个浮动的列


将相邻元素都浮动,它们会一个接一个地排列。


#div-1a { 

 

   float:left; 

 

   width:150px; 

 

  } 

 

  #div-1b { 

 

   float:left; 

 

   width:150px; 

 

  }


 



十步学习css定位知识_integer_08


9 用clear来float


在7中使用了float之后div-1a被浮动,同时div-1b将div-1a包围了。为了除去包围,使用clear。


#div-1a { 

 

   float:left; 

 

   width:190px; 

 

  } 

 

  #div-1b { 

 

   float:left; 

 

   width:190px; 

 

  } 

 

  #div-1c { 

 

   clear:both; 

 

  }



十步学习css定位知识_div_09


关于float和clear的使用,请参加更多的资料。如,


http://www.complexspiral.com/publications/containing-floats/


 


10 上面的例子很简单,并且没有浏览器兼容问题。 


这个资源很好:
Relatively Absolute


另外,


 

标签:定位,十步,元素,1a,width,position,div,css,absolute
From: https://blog.51cto.com/u_11326739/6968401

相关文章

  • 基于antd-input & tsx封装一个按固定位数、固定符号分隔内容的输入框
    /** *可在每四位字符间插入一个空格的输入框 */import{Input}from'antd';import{useEffect}from'react';constInputGap=(props:any)=>{ const{useGap,value,onChange}=props; //非onChange事件变更value useEffect(()=>{  value......
  • CSSRelated
    CSS几种常用的清除浮动方法❤️❤️❤️父级div定义伪类:after和zoom;/*这个class名指的是需要清除浮动的父级*/.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;line-height:0;}.clearfloat{zoom:1;}......
  • 个人笔记,关于css样式
    /*引入样式<linkhref="https://fonts.font.im/css?family=Open+Sans"rel="stylesheet"type="text/css">*/html{/*px表示“像素(pixels)”:基础字号为10像素*/font-size:20px;/*Googlefonts输出的CSS*/font-family:'Op......
  • CSS样式的优先级高的如何覆盖
    使用样式规则的优先级来解决问题 !important 可以覆盖无素比较高的优先级CSS样式的优先级:1.行内样式:通过元素的style属性设置的样式,具有最高的优先级。2.ID选择器:通过元素的id选择器设置的样式会覆盖元素的类选择器和标签选择器。3.类选择器/属性选择器/伪类选择器:这......
  • TSINGSEE青犀视频安防监控EasyCVR视频汇聚平台电子地图定位偏移的排查与解决
    安防监控EasyCVR视频汇聚综合管理平台具有强大的数据接入、处理及分发能力,平台可提供视频监控直播、云端录像、云存储、录像检索与回看、告警上报与查询、平台级联、云台控制、语音对讲、电子地图、轨迹跟踪、H.265自动转码等视频能力。在视频监控管理平台TSINGSEE青犀视频EasyCVR......
  • web前端技能方法总结(css、js、jquery、html)(2)
    创建链接块display:block;列表样式在一个无序列表中,列表项的标志(marker)是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。要修改用于列表项的标志类型,可以使用属性list-style-type:ul{list-style-type:square;}1上面的声明把......
  • Pycharm配置less编译生成的css文件到指定目录
    一、当前演示项目目录二、标记less文件夹为资源目录不标记其实也不影响三、打开FileWatchers(文件监视器)在主菜单中选择"File"(文件)>"Settings"(设置)(Windows/Linux)或"PyCharm"(Windows)/"Preferences"(Mac)或者使用快捷键"Ctrl+Alt+S"(Windows/Linux)或&qu......
  • 应用案例|基于高精度3D视觉引导压缩机抓取定位应用
    Part.1 行业现状3D机器视觉是一种新兴的人工智能技术,它在机器视觉和机器学习领域中发挥着重要的作用。在工业领域,3D视觉技术被广泛应用于引导工业机器人进行抓取和定位操作。使用显扬科技的技术可以实现识别和定位压缩机。Part.2 如何识别和定位压缩机?首先,通过使用3D相机采集压缩......
  • CSS 布局面试题目
    盒子模型盒子模型包含margin,padding,border,content四个内容盒子模型可分为标准盒模型和怪异盒模型盒子模型可通过box-sizing设置margin和padding的区别margin用来设置元素之间的距离padding用来设置元素与内容之间的距离,padding的背景色与content一致纵向边距重叠......
  • odoo15引入和使用css
    1、增加一个css文件base.css,如下图:.bxbase{color:red;}2、在__manifest__中添加引用'assets':{'web.assets_backend':['testaddons/static/src/css/base.css',],'web.assets_qweb':[......