margin的auto的理解 top,left[,bottom,right] position
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
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
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
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的更多相关文章
- margin的auto的理解
auto 总是试图充满父元素 margin有四个值: All the margin properties can have the following values: auto - the brows ...
- 定位(left 、right 、top 、 bottom)、padding、margin 值设为百分比值时
定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...
- 详解margin: auto
auto是margin的可选值之一.相信大家平时使用auto值时,最多的用法大概是 margin: 0 auto; 和 margin: auto; 不过你可能也发现了不论是 margin: auto; ...
- margin:0 auto是什么意思
一.margin设置对象外边距 二.margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right 因为0 auto
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中(转)
body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...
- position:absolute和margin:auto 连用实现元素水平垂直居中
有时候,要实现一些元素水平垂直都居中,这部分元素呢 可能大小未知,例如一些图片或者是一些未知大小的块元素. 利用绝对定位可以将要居中的元素脱离文档流. position: absolute; left ...
- margin:0 auto为何会居中?
margin: 0 auto;为何会居中呢??? 一开始的学习html的时候,就是只知道块级元素margin:0 auto就能居中 但是后来就很好奇 margin: auto 0;为何不能垂直居中? ...
- CSS中margin:auto什么意思?margin:auto属性的用法详解
我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto ...
- 绝对定位上下左右都为0 margin为auto为什么能居中
老规矩,先来一段废话,我大学刚入门的时候觉得CSS很简单,记一记就会了,不就是盒模型嘛,现在想来觉得自己那时候真的很自以为是哈哈.但是随着工作沉淀,我明白了任何技术都有着它的深度和广度,正是因为不少人 ...
随机推荐
- hdu1466计算直线的交点数 非原创
原文链接 平面上有n条直线,且无三线共点,问这些直线能有多少种不同交点数. 比如,如果n=2,则可能的交点数量为0(平行)或者1(不平行). Input输入数据包含多个测试实例,每个测试实例占一行,每 ...
- Python下使用 redis数据库
初识Rdeis数据库 简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zs ...
- RabbitMQ 很成熟 不是阿里的
简介 官网 http://www.rabbitmq.com RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现 RabbitMQ实现了AMQ ...
- Java_方法的定义以及分类
什么叫方法? 方法也叫做函数,实现某个功能 方法分类: 系统提供的方法: 常用的系统提供的方法:如:nextInt() next() nextDouble() print println()..... ...
- oracle--dump & V$BH
一,什么是BH BH即Buffer Header,每一个数据块在被读入buffer cache时,都会先在buffer cache中构造一个buffer header,buffer header与数据 ...
- Vue vs React: Javascript 框架之战
https://baijiahao.baidu.com/s?id=1608210396818353443&wfr=spider&for=pc 原文档 正如我们之前提到的,Word ...
- Python RawSocket Syn
#!/bin/env python # -*- coding: UTF-8 -*- # 必须以root权限运行 import socket import sys import time import ...
- CSS box-flex属性,然后弹性盒子模型简介
今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...
- Hbuilder编辑App时,ajax跨域访问失败问题
今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错, 显示这样的错误 XMLHttpRequest cannot loadhttp://w ...
- Java Collection.Map
/** * Map集合的特点: * 将键映射到值的对象,一个映射不能包含重复的键,每个键最多只能映射到一个值. * * Map集合的功能和概述: * 1.添加功能 * V put(K key , V ...