浮动在盒模型的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. JSP<jsp:forward>与<%@ include%>

    JSP<jsp:forward>与<%@ include%><jsp:include> <jsp:forward file="forwardTo_p ...

  2. 大话设计模式--中介者模式 Mediator --C++实现实例

    1. 中介者模式: 用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立改变他们之间的交互. Mediator的出现减少了各个Colleague的耦 ...

  3. 大话设计模式--代理模式 proxy

    1. 代理模式: 为其他对象提供一种代理以控制这个对象的访问. 代理模式使用场合: a. 远程代理, 为一个对象在不同的地址空间提供局部代理,隐藏一个对象存在于不同地址空间的事实.如.net中WebS ...

  4. centos5.5源更新方法（网易163源 很快的源）

    http://blog.chinaunix.net/uid-24993824-id-189965.html 1.首先,打开终端,获取root权限 2.关闭fastestmirror插件         ...

  5. Oracle的PL_SQL的结构

    --PL/SQL的结构 declare --声明变量和常量关键字 v_name nvarchar2(); v_age integer;--常规变量声明 v_product table_name.col ...

  6. 查询速度优化用not EXISTS 代替 not in

    1,not in 速度奇慢,要用 not EXISTS ,速度奇快! 大表效果尤其明显 sql中exists,not exists的用法 exists()后面的子查询被称做相关子查询,他是不返回列表的 ...

  7. WEB安全之Token浅谈

    Token一般用在两个地方——防止表单重复提交.anti csrf攻击(跨站点请求伪造). 两者在原理上都是通过session token来实现的.当客户端请求页面时,服务器会生成一个随机数Token ...

  8. Python-单元测试unittest

    Python中有一个自带的单元测试框架是unittest模块,用它来做单元测试,它里面封装好了一些校验返回的结果方法和一些用例执行前的初始化操作,概念见下: TestCase 也就是测试用例 Test ...

  9. [原]NYOJ-括号匹配-2（java）

    大学生程序代写 //http://acm.nyist.net/JudgeOnline/problem.php?pid=2 括号配对问题 时间限制:3000 ms  |  内存限制:65535 KB  ...

  10. Asp.Net页面生命周期【转载,地址：http://www.cnblogs.com/xhwy/archive/2012/05/20/2510178.html】

    一．什么是Asp.Net页面生命周期 当我们在浏览器地址栏中输入网址,回车查看页面时,这时会向服务器端(IIS)发送一个request请求,服务器就会判断发送过来的请求页面,  完全识别 HTTP 页 ...