auto

auto 总是试图充满父元素

margin有四个值:

All the margin properties can have the following values:

auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of
inherit - specifies that the margin should be inherited from the parent element

absolute: 会脱离标准文档流,但若不指定top,right,bottom,left 则还在原位置上

margin-left,margin-top是影响自身

margin-right,margin-bottom是影响它后面的元素

top left

top

MDN top

The top CSS property specifies part of the position of positioned elements. It has no effect(只对于定位了的元素有效,包括相对定位,绝对定位) on non-positioned elements.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

For relatively positioned elements(相对定位的元素:top是相对于自身) (those with position: relative), it specifies the amount the element is moved below its normal position.

When both top and bottom are specified, as long as height is unspecified, auto or 100%(高度值未声明,auto或是100%), both top and bottom distances will be respected. Otherwise, if height is constrained(如果top和bottom同时声明,并且height被限制,则bottom就会无效) in any way, the top property takes precedence and the bottom property is ignored.

/* <length> values */
top: 3px;
top: 2.4em;

/* <percentages> of the height of the containing block(containing block的高度的百分) */
top: 10%;

/* Keyword value */
top: auto;

/* Global values */
top: inherit;
top: initial;
top: unset;

left

mdn left

The left CSS property specifies part of the position of positioned elements(适用于被定位了的元素). For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the left margin edge of the element and the left edge of its containing block.

/* <length> values */
left: 3px;
left: 2.4em;

/* <percentage>s of the width of the containing block(containing block的百分比) */
left: 10%;

/* Keyword values */
left: auto;

/* Global values */
left: inherit;
left: initial;
left: unset;

right:

The right property has no effect on non-positioned elements.

When both the right CSS property and the left CSS property are defined, the position of the element is overspecified(同时对元素采用left和right属性时,对于从左向右的dom,left优先级更高). In that case, the left value has precedence when the container is left-to-right (that is that the right computed value is set to -left), and the right value has precedence when the container is right-to-left (that is that the left computed value is set to -right).

position

mdn position

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.

  • A relatively positioned element is an element whose computed position property is relative.
  • An absolutely positioned element is an element whose computed position property is absolute or fixed.
  • A stickily positioned element is an element whose computed position property is sticky.

margin的auto的理解 top,left[,bottom,right] position的更多相关文章

  1. margin的auto的理解

    auto 总是试图充满父元素 margin有四个值: All the margin properties can have the following values: auto - the brows ...

  2. 定位(left 、right 、top 、 bottom)、padding、margin 值设为百分比值时

    定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...

  3. 详解margin: auto

    auto是margin的可选值之一.相信大家平时使用auto值时,最多的用法大概是 margin: 0 auto; 和 margin: auto; 不过你可能也发现了不论是 margin: auto; ...

  4. margin:0 auto是什么意思

    一.margin设置对象外边距 二.margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right 因为0 auto

  5. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中(转)

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

  6. position:absolute和margin:auto 连用实现元素水平垂直居中

    有时候,要实现一些元素水平垂直都居中,这部分元素呢 可能大小未知,例如一些图片或者是一些未知大小的块元素. 利用绝对定位可以将要居中的元素脱离文档流. position: absolute; left ...

  7. margin:0 auto为何会居中?

    margin: 0 auto;为何会居中呢??? 一开始的学习html的时候,就是只知道块级元素margin:0 auto就能居中 但是后来就很好奇 margin: auto 0;为何不能垂直居中? ...

  8. CSS中margin:auto什么意思?margin:auto属性的用法详解

    我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto ...

  9. 绝对定位上下左右都为0 margin为auto为什么能居中

    老规矩,先来一段废话,我大学刚入门的时候觉得CSS很简单,记一记就会了,不就是盒模型嘛,现在想来觉得自己那时候真的很自以为是哈哈.但是随着工作沉淀,我明白了任何技术都有着它的深度和广度,正是因为不少人 ...

随机推荐

  1. 创建djangoapp

    1.python3 manage.py startapp goods 2.startapp users 3.启动django服务器 # make new migrationspython3 manag ...

  2. Angular  CLI

    简介 ng  官方命令行 Angular  CLI 自己的官方文档 https://github.com/angular/angular-cli/wiki/new 常用代码   临时代码 ng new ...

  3. 同步FIFO学习

    在网上找的一个经典同步FIFO例子. 一.前言 FIFO (First-In-First-Out) 是一种先进先出的数据交互方式,在数字ASIC设计中常常被使用.FIFO按工作时钟域的不同又可以分为: ...

  4. FileUpload.PostedFile 为null异常 NullReferenceException

    FileUpload控件PostedFile属性总是为null,提示有异常NullReferenceException.我的程序中加了UpdatePannel控件.把UpdatePannel去掉之后就 ...

  5. (转)正则表达式与Python(RE)模块

    Python正则表达式指南  原文:http://blog.csdn.net/qdx411324962/article/details/46799831 Python3(2):正则表达式与Python ...

  6. Objective-C中.h、.m、.mm的区别

    .h :头文件.头文件包含类,类型,函数和常数的声明.  .m :源代码文件.这是典型的源代码文件扩展名,可以包含Objective-C和C代码.  .mm :源代码文件.带有这种扩展名的源代码文件, ...

  7. Node.js静态文件服务器

    首先还是先感谢github,感谢github上提供此段源码的作者.跟昨晚看的静态文件服务器来比今天的静态文件服务器稍微复杂些,可以学到很多新的东西.仔细会发现这次的代码多了一个fs.stat函数和Re ...

  8. Python基础(3) - 数据类型:3列表类型

    Python 列表是序列对象,可包含任意的Python数据信息,如字符串.数字.列表.元组等.列表的数据是可变的,我们可通过对象方法对列表中的数据进行增加.修改.删除等操作.列表用[]包括起来的. 列 ...

  9. WPF Window对象的生命周期

    WPF中所有窗口的基类型都是System.Windows.Window.Window通常用于SDI(SingleDocumentInterface).MDI(MultipleDocumentInter ...

  10. html5的meta标签

    meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签;meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言等等;感兴趣的朋友可以了解下     ...