浮动在盒模型的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. form 中Enctype=multipart/form-data 的作用

    form 中Enctype=multipart/form-data 的作用 ENCTYPE="multipart/form-data"用于表单里有图片上传. <form na ...

  2. 分享知识-快乐自己：初中级 java 面试题宝典

    1):Jsp的重定向和转发的流程有什么区别 重定向是客户端行为,转发是服务器端行为 重定向时服务器产生两次请求,转发产生一次请求,重定向时可以转发到项目以外的任何网址,转发只能在当前项目里转发 重定向 ...

  3. 分享知识-快乐自己：虚拟机 NET 网络配置

    第一步: 第二步: 第三步:   第四步:   第五步: 第六步: 第七步: 第九步: 第十步: 第十一步: 第十二步:   第十三步: 成功. 第十四步:开启开机自启动网路连接 cd /etc/sy ...

  4. 九 Django框架，Form表单验证

    表单提交 html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. php和mysql连接方式(短 长 池)

    一个php work进程只能处理一个请求,当完成一个请求了,才能处理下一次的请求 2.短连接: 执行到php关闭mysql连接的代码时,就断开,否则在处理本次请求结束的时候,释放mysql连接 实验: ...

  6. hdu-5867 Water problem(水题)

    题目链接: Water problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  7. 【遍历二叉树】04二叉树的层次遍历【Binary Tree Level Order Traversal】

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,返回他的层次遍历的 ...

  8. 基于Ubuntu交叉编译FFmpeg Windows SDK

    写在前面 FFmpeg是一个开源且跨平台的音视频解决方案,集采集.转码.流式化为一身,项目的libavcodec编解码模块和libavformat媒体格式模块,支持非常非常丰富的编解码格式和容器封装格 ...

  9. Linux下几种RTP协议实现的比较和JRTPLIB编程讲解

    流媒体指的是在网络中使用流技术传输的连续时基媒体,其特点是在播放前不需要下载整个文件,而是采用边下载边播放的方式,它是视频会议. IP电话等应用场合的技术基础.RTP是进行实时流媒体传输的标准协议和关 ...

  10. Python 爬虫闯关（第一关）

    在学习爬虫时,遇到了一个有意思的网站,这个网站设置了几个关卡,需要经过爬虫进行闯关,随着关卡的网后,难度不断增加,在闯关的过程中需要学习不同的知识,你的爬虫水平也自然随之提高. 今天我们先来第一关,访 ...