浮动在盒模型的auto值

属性 常规流 浮动
margin-left:auto 尽量撑满包含块 0px
margin-right:auto 尽量撑满包含块 0px
margin-top:auto 0px　　 0px
margin-bottom:auto 0px 0px
width:auto 尽量撑满包含块 适应内容的宽度
height:auto 适应内容高度 适应内容高度

常规流块盒布局

1、常规流块盒在水平方向上，必须撑满包含块；

2、常规流在包含块的垂直方向上依次摆放；

3、常规流块盒若外边距无缝相邻，则进行外边距合并；

4、常规流的自动高度和摆放位置，无视浮动元素。

盒模型的auto值的更多相关文章

  1. CSS盒模型（Box Model）

    阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...

  2. [06] 盒模型 + auto 居中 + 垂直合并

    1.盒模型 盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型. 标准(W3C)模型中:CSS中的宽(width) = 内容 (content)的宽 CSS中的宽(width) = 内容( ...

  3. css_02之盒模型、渐变

    1.框模型:盒模型,①对象实际宽度=左右外边距+左右边框+左右内边距 + width:②对象实际高度=上下外边距+上下边框+上下内边距 + height: 2.外边距:margin:取值:①top(上 ...

  4. css3盒模型

    css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(bord ...

  5. css之盒模型

    盒模型由内容(content).填充(padding).边框(border).边界(margin)组成,一个盒子中主要的属性就5个:width.height.padding.border.margin ...

  6. （转）详解css3弹性盒模型（Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  7. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  8. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

  9. 移动web开发实践-css3（1）盒模型display:-webkit-box;的使用

    提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...

随机推荐

  1. C++拷贝构造函数（深拷贝，浅拷贝）

    http://www.cnblogs.com/BlueTzar/articles/1223313.html C++拷贝构造函数(深拷贝,浅拷贝) 对于普通类型的对象来说,它们之间的复制是很简单的,例如 ...

  2. HDU3294 Girls' research

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  3. NULL 与空字符串

    空字符串 '' 不占内存空间; NULL占一个字节的空间; 空字符串 的判断用 == <> NULL值用 is null ifnull();

  4. POJ 3349 Snowflake Snow Snowflakes （哈希表）

    题意:每片雪花有六瓣,给出n片雪花,六瓣花瓣的长度按顺时针或逆时针给出,判断其中有没有相同的雪花(六瓣花瓣的长度相同) 思路:如果直接遍历会超时,我试过.这里要用哈希表,哈希表的关键码key用六瓣花瓣 ...

  5. wiredtiger存储引擎介绍——本质就是LSM，当然里面也可以包含btree和列存储

    见:http://www.slideshare.net/profyclub_ru/4-understanding-and-tuning-wired-tiger-the-new-high-perform ...

  6. 判断浏览器是否支持css3属性或单位

    1.用CSS.supports()方法 mark-zhq[3] //判断是否支持flex布局 var supportsFlex = CSS.supports("display", ...

  7. JEECG datagrid 列表检索条件 添加下拉级联功能

    $("#communityId").change( function(){ var id = $(this).children('option:selected').val(); ...

  8. JavaScript RegExp 正则表达式基础详谈

    前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果我们不去真正仔细研究.学习.掌握,而是抱着需要的时 ...

  9. Docker容器里的进程为什么要前台运行

    <第一本Docker书>里面,讲到Docker容器启动web服务时,都指定了前台运行的参数,例如apache: ENTRYPOINT [ "/usr/sbin/apache2&q ...

  10. fastjson 使用笔记

    1.string转json String params={'key1':'50001','key2':10007700'}Map<String, String> a = JSON.pars ...