水平方向margin:auto
先上图

由图可看到,块级元素的水平方向上又“7大属性”:margin-left、border-left、padding-left、margin-left、width、padding-right、border-right和margin-right。这些属性中,只有3个属性可以设置为auto,分别为:margin-left、width和margin-right。
在讨论之前,首先记住两条原则:
1)这7大属性的值总和=父元素的width;
2)属性间冲突时,优先级:width>margin-left>margin-right。
元素的属性width和margin的不同组合情况分如下4种情况:
| (1) | (2) | (3) | (4) | |
|---|---|---|---|---|
| width | 定值 | 定值 | auto | auto |
| margin | 定值 | auto | 定值 | auto |
(1)width= 定值,margin=定值
此种情况即为width、margin-left、margin-right均为定值,为过分受限,根据原则2,此时总会把margin-right强制为auto。
也就是说,为了达到原则1,margin-right会根据情况调整,使元素的总宽度等于其包含快的width。
(2)width= 定值,margin=auto
* width= 定值,margin-left = mergin-right = auto,此时margin-left与margin-right会设置为相等的长度,因此元素会在父元素中居中
* width= 定值,margin-left和mergin-right中一个为定值、一个为auto,则为auto的属性根据原则1,自动调整。
(3)width= auto,margin=定值
* marin-left + margin-right < 父元素宽度,则width根据原则1设置为某个值
* marin-left + margin-right >= 父元素宽度,则width为0
(4)width= auto,margin=auto
* width、margin-left、mergin-right均为auto,这就是默认的情况,此时两个外边距会设置为0,width会尽可能宽以达到原则1。
* width = auto,margin-left和mergin-right中一个为定值、一个为auto,此时,根据原则2,width为占用剩下的所有宽度,为auto的margin的值为0。
以上是针对块级元素,对于非块级元素(内联元素和替换元素):
* 只要设置为display:block,除了元素的宽度为内容的固有宽度这一点,其他表现与块级元素表现一致。
* 如果不设置display:block, 则width为内容的固有宽度,水平方向margin可以设定为固定值,但设置为auto会表现为0;
水平方向margin:auto的更多相关文章
- 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)
前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...
- 小tip: margin:auto实现绝对定位元素的水平垂直居中
转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容 ...
- 2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展
1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向 ...
- margin:auto你真的理解么?
含义 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值,一侧auto,则auto为剩余空间大小 (2) 如果两侧均是auto ...
- margin auto 实现居中,与text-align:center的区别
本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定.这些值中,只有width和margin-left,margin-right可以设为auto,text- ...
- CSS居中问题:块级元素和行级元素在水平方向以及垂直方向的居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...
- [CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?
最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子 日常业务迭代过程中,flex已经是前 ...
- margin:auto你真的理解么
含义 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值,一侧auto,则auto为剩余空间大小 (2) 如果两侧均是auto ...
- html5水平方向重力感应
html5图片随手机重力感应而移动 <!DOCTYPE html> <html lang="zh-cn"><head><meta http ...
随机推荐
- CSS3盒子模型(上)
CSS的盒子模型分为三个大模块: 盒子模型 . 浮动 . 定位,其余的都是细节.要求这三部分,只要是学前端的无论如何也要学的非常精通. 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就 ...
- CSS中text-shadow的几个好看的文字demo及其代码
最近有看到一些镂空的或者立体的文字设计图非常好看,然后想了想,应该是使用text-shadow来实现的,这里我贴出我仿的八个demo,分享给大家 首先是HTML代码 <div class=&qu ...
- [Umbraco] document type里的父节点与子节点的设置
虽然我们不能像做数据库设计那样建立主外键关系.但我们建立xml里父子关系,父子关系其实是指是否允许在一个页面(如频道,分类,栏目等)下创建子页面,这就相当于建立站点的树状结构,对于筛选数据会有很大的作 ...
- Java实现Socket通信
一对一通信: 服务器端: public class ServerDemo { public static void main(String[] args) { ServerSocket serverS ...
- 解决IDEA中进行maven install报:系统资源不足的问题
一.背景 最近在idea中使用maven对公司的项目进行install的时候老是出现系统资源不足的问题导致install失败,在网上搜索也没找到很好的答案,自己不断摸索,最终在idea的配置里面找到了 ...
- 安装flutter和dart总结
1 manjaro从软件仓库安装就行,但是也可以下载安装包.然后添加到Path目录 我是安装dart从软件仓库, flutter下载压缩包添加到path 1.1 需要将android sdk , ex ...
- Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例
导入项目 打开 Visual Studio Code,File --> add Folder to Workspace,导入我们的项目. 安装 Element 安装依赖 Element 是国内饿 ...
- struts和hibernate整合
程序示例: 1.引入jar包 2.实体对象 Dept.java package com.gqx.entity; import java.util.HashSet; import java.util.S ...
- Linux-(type,vim)
type命令 1.命令格式: type [参数][命令] 2.命令功能: 使用 type 命令轻松找出给定的命令是否是别名.shell 内置命令.文件.函数或关键字.也可以找到命令的实际路径. 3.命 ...
- DDA, Bresenham line's algorithm and Voxel Traversal used in the Grid-Accelerator in PBRT
- DDA(Digital Differential Analyzer, 数值微分法) - 计算机图形学中,经常会遇到一些计算机中”经典“的问题.例如,如何利用计算机”离散“的特质,模拟 ...