热门关键字:
jquery > jquery教程 > jquery教程 > 从零开始学html5css3,HTML5+CSS3前端入门教程

从零开始学html5css3,HTML5+CSS3前端入门教程

346
作者:管理员
发布时间:2021/8/20 18:25:14
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5297
  定位


  position属性


  static:默认值,没有定位


  relative:相对定位


  absolute:绝对定位


  fixed:固定定位


  标准文档流


  标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。


  一般在HTML元素分为两种:块级元素和行内元素。像div,p这些的元素属于块级元素,块级元素是从上到下一行一行的排列;默认一个块级元素会占用一行,而跟在后面的元素会另起一行排列;


  行内元素是在一行中水平布置,从左到右的排列;span,strong等属于行内元素。


  TitleDocument


  我是块级元素,我单独占一行 我单独占一行 我单独占一行


  我是块级元素,我一行一行的排列,我一行一行的排列,我一行一行的排列


  我的行内元素,我水平的排列,我水平的排,我水平的排,我水平的排列,我水平的排列


  我是行内元素,没有那么霸道,没有那么霸道,没有那么霸道,没有那么霸道,没有那么霸道


  static定位


  position:static


  元素没有定位,以标准流方式显示


  position属性


  第一个盒子


  第二个盒子


  第三个盒子


  @charset "gb2312";


  div {


  width: 300px;


  margin:10px;


  padding:5px;


  font-size:12px;


  line-height:25px;


  }


  #father {


  width: 500px;


  margin: 50px auto;


  border:1px #666 solid;


  padding:10px;


  }


  #first {


  background-color:#FC9;


  border:1px #B55A00 dashed;


  }


  #second {


  background-color:#CCF;


  border:1px #0000A8 dashed;


  }


  #third {


  background-color:#C5DECC;


  border:1px #395E4F dashed;


  }


  相对定位


  relative属性值


  相对自身原来位置进行偏移


  偏移设置:top、left、right、bottom可以用left来描述盒子向右移动;


  可以用right来描述盒子向左的移动;


  可以用top来描述盒子向下的移动;


  可以用bottom来描述盒子的向上的移动;


  如果是负数就是相反的方向。


  相对定位的盒子,不脱离标准流,老家保留位置,其后的元素不能占用其原有位置。


  相对定位的主要用途是作为其内部元素绝对定位时的参照标准,有相对于我之义。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐