浮动在盒模型的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. 初步认识Express框架渲染视图

    给出一个简单的例子,讲述模板渲染的基础功能 在nodejs中使用express框架,默认的是ejs和jade渲染模板,以下是以ejs模板进行解析 1.ejs 模板安装 npm install ejs ...

  2. 目标检测 — one-stage检测（二）

    one-stage检测算法,其不需要region proposal阶段,直接产生物体的类别概率和位置坐标值,经过单次检测即可直接得到最终的检测结果,因此有着更快的检测速度,比较典型的算法如YOLO,S ...

  3. Compilation error 未完待续

    1. code.cpp:1:21: fatal error: iostream : No such file or directory #include< iostream > ^ com ...

  4. Python基础-列表推导式

    python中列表推导式有三种数据类型可用:列表,字典,集合 列表推导式书写形式: [表达式 for 变量 in 列表]    或者  [表达式 for 变量 in 列表 if 条件] 1,列表推导式 ...

  5. Eclipse_常用技巧_02_使用Eclipse进行源码分析

    1.分析java类和接口的继承关系 具体做法: 在代码区中选择需要的类和接口定义,然后右击,选择“Open Type Hiberarchy”,可以在“Hiberarchy View”中看到继承关系 快 ...

  6. C++0X 学习之 auto

    auto并不是一个新关键词,是一个把旧关键词赋予新的作用,新的作用修饰变量声明,指示编译器根据变量的初始化表达式推导变量应有的类型.auto 声明的变量必须“在声明处完成初始化”,编译器才可根据初始化 ...

  7. Web Service 之JAX-WS 与CXF实现

    Web Service的实现方式有很多种,本篇介绍的是基于JAX-WS(纯Java)实现的,然后借由CXF工具生成Javabean. 第一步:创建一个Java工程,编写CalService接口,此接口 ...

  8. FFMPEG实现的转码程序

    本例子是由FFEMPG的doc/example例子transcode.c修改而来,可以根据需求任意转换音视频的编码. 原来的例子的作用更类似于remux,并没有实现转码的功能,只是实现了格式转换,比如 ...

  9. H264视频编码成MP4文件

    firehood的专栏 Wince嵌入式开发       目录视图 摘要视图 订阅 赠书 | AI专栏(AI圣经!<深度学习>中文版)      每周荐书:Kotlin.分布式.Keras ...

  10. bzoj3569 DZY Loves Chinese II & bzoj3237 [AHOI2013] 连通图

    给一个无向连通图,多次询问,每次询问给 k 条边,问删除这 k 条边后图的连通性,对于 bzoj3237 可以离线,对于 bzoj3569 强制在线 $n,m,q \leq 500000,k \leq ...