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.
最新文章
- Asp.net 面向接口可扩展框架之数据处理模块及EntityFramework扩展和Dapper扩展(含干货)
- AutoCAD学习笔记
- 如何用Jquery判断在键盘上敲的哪个按键
- CE5 中断
- WPF 创建桌面快捷方式
- TRUNC函数,ORA-01898 精度说明符过多
- Unity3d截图保存到Android相册的实现
- Asp.Net Web API VS Asp.Net MVC
- 练习生产者与消费者-PYTHON多线程中的条件变量同步-Queue
- Cts框架解析(8)-IBuildProvider
- 201521123083《Java程序设计》第8周学习总结
- 201521123075 《Java程序设计》第3周学习总结
- nc简单应用
- Spark2.1.0——Spark初体验
- ABB机器人设置安全区(案例版)
- 统计各个数据库的各个数据表的总数,然后写入到excel中
- TypeScript作业
- JS性能优化 之 文档片段 createDocumentFragment
- 【POJ 3176】Cow Bowling(DP)
- Maven的配置与下载
热门文章
- Q791 自定义字符串排序
- my.工坊_ZZ
- 基于JQuery easyui,gson的批量新增/修改和删除-servlet版
- 更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签
- 3dsmax2019卸载/安装失败/如何彻底卸载清除干净3dsmax2019注册表和文件的方法
- JAVA学习7:在Maven仓库中添加Oracle JDBC驱动
- 使用discover批量执行用例
- c++ 常用的遍历,删除,分割等等文件处理函数代码实现
- JavaScript技巧45招(转)
- PHP多维数据排序(不区分大小字母)