定位属性left,right,top,bottom

1.官方解释

left: 设置定位元素左外边距边界与其包含块左边界之间的偏移。(该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移,下面也差不多。。)

right: 设置定位元素右外边距边界与其包含块右边界之间的偏移。

top: 设置定位元素的上外边距边界与其包含块上边界之间的偏移。

bottom: 设置定位元素下外边距边界与其包含块下边界之间的偏移。

2.个人理解

  • left等定位属性,要使用时,它得(dei)是已定位的元素。(absolute,relative,fixed)

  eg:img{position:absolute;left:100px}  如果去掉position:absolute,则left失效。对float:left这种浮动元素也是失效,反正就是定位了才让用哈。

  • 拓展一种居中用法,先定位,再设置  left:0;right:0;margin:auto  可以使元素垂直居中。 设置 top:0;bottom:0;margin:0  可以使元素水平居中。当然,设置四个值都是0;margin:0;后,这个元素就在正中间了。如果不设置元素大小,就平铺了。

  (这个是因为把上下左右都设为0,就扯大了?)

  • 其他的没了,还没想到那么深,哈哈哈哈
时间: 2024-08-25 11:06:59

定位属性left,right,top,bottom的相关文章

Swift学习之UIView延展添加新属性left,right,top,bottom,width,height,centerx,centery

import Foundation import UIKit import CoreGraphics extension UIView{ var left:CGFloat{ set{ var frame = self.frame frame.origin.x = newValue self.frame = frame } get{ return self.frame.origin.x } } var top:CGFloat{ set{ var frame = self.frame frame.o

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

CSS定位属性position

CSS定位元素有3种方式 :普通流.相对位置.绝对位置.通过设置position属性来实现. position属性取值的含义 inherit 继承父元素position 属性的值. static 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). relative 生成相对定位的元素,相对于元素本身正常位置进行定位.因此,"left:20" 会向元素的 LEFT 位置添加 20 像素. absolute 生成绝

CSS定位属性之间的相互作用

0. 目录 目录 引言 正文 1 DISPLAY NONE 2 POSITION ABSOLUTE OR FIXED Float DISPLAY 3 FLOAT LEFT OR RIGHT DISPLAY 4 POSITION STATIC 偏移值 声明 1. 引言 原文:bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT 译者:爱前端,乐分享的FedFun,前端痴王海庆的博客. 译言:来看下CSS标布局情况下,定位相关属性之间的相互作用,意译为

position定位属性

值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom"

css中的定位属性position

同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来实现的一些特效经常会用到定位属性,比如鼠标滑过显示被隐藏的盒子, banner的切换,还有之前写的jquery实现京东商品分类导航的类似这样的布局也是要结合定位属性来实现,但是上一次着重只写了jquery. 那么这次我想将定位属性的运用拿来说一下. 定位属性position常用的取值:relative/absolute/fixed;一般配

CSS定位属性(position)

static relative absolute 声明:本文为作者的学习笔记,是参考了别的作者的文章,并非原创,参考的原文地址由于时间久远也不清楚了,如有冒犯,可以联系我删除,谢谢. position static 元素都有position属性,默认值为static,默认情况下,元素不接受位置属性设置(top.right.bottom.left).另外如果元素设置了position属性,将会覆盖其默认值"static". 下面的演示中,所有盒子都是静态的(即static),每个盒子在相

CSS(八):定位属性

一.position属性 1.relative(相对定位) 相对它原来的位置,通过指定偏移,到达新的位置. 扔在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 看下面的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

CSS定位属性-position

一.可能的属性值 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.absolute:绝对定位.对象脱离常规流,是基于整个屏幕,生成绝对定位的元素,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素.它的父级元素如果设置 relative ,那就就是基于它的父元素的左上角计算. 3.fixed:固定定位.与absolute一致,生成绝对定位的元素,但偏移