盒模型的auto值
浮动在盒模型的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值的更多相关文章
- CSS盒模型(Box Model)
阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...
- [06] 盒模型 + auto 居中 + 垂直合并
1.盒模型 盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型. 标准(W3C)模型中:CSS中的宽(width) = 内容 (content)的宽 CSS中的宽(width) = 内容( ...
- css_02之盒模型、渐变
1.框模型:盒模型,①对象实际宽度=左右外边距+左右边框+左右内边距 + width:②对象实际高度=上下外边距+上下边框+上下内边距 + height: 2.外边距:margin:取值:①top(上 ...
- css3盒模型
css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(bord ...
- css之盒模型
盒模型由内容(content).填充(padding).边框(border).边界(margin)组成,一个盒子中主要的属性就5个:width.height.padding.border.margin ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- css3弹性盒模型
一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...
- 移动web开发实践-css3(1)盒模型display:-webkit-box;的使用
提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...
随机推荐
- 算法(Algorithms)第4版 练习 2.2.10
关键代码实现: private static void merge(Comparable[] input, int lo, int mid, int hi) { //copy input[lo,mid ...
- SpringCloud-服务的消费者(rest+ribbon)
SpringCloud-服务的消费者(rest+ribbon) 在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的.Spring Cloud有两种服务调用 ...
- GIT使用[git remove untracked working file]
使用GIT进行merge的时候, git merge --no-ff master 如果merge之后出现问题, 想进行回退, 可以使用 git reset --hard HEAD 来回退到最新的版本 ...
- Spark- Spark基本工作原理
Spark特点: 1.分布式 spark读取数据时是把数据分布式存储到各个节点内存中 2.主要基于内存(少数情况基于磁盘,如shuffle阶段) 所有计算操作,都是针对多个节点上内存的数据,进行并行操 ...
- EAV模型
了解EAV设计基本原理的最好方法就是理解行建模(row modelling,其中EAV是广义形式). 以一超市数据库为例,必须管理数以千计的产品和品牌,其中许多产品存在期很短暂.那么,显而易见,产品名 ...
- 分享知识-快乐自己:JS 检查元素是否含有某种css样式
第一种 原生 JS: ************************************************************* 结构部分: <div> <p> ...
- thinkphp微信开发(消息加密解密)
使用thinkphp官方的WeChat包,使用不同模式可以成功,但是安全模式就是不行,现将分析解决结果做下记录. 分析问题: 解密微信服务器消息老是不成功,下载下微信公众平台官方给出的解密文件和Wec ...
- NYOJ--42--dfs水过||并查集+欧拉通路--一笔画问题
dfs水过: /* Name: NYOJ--42--一笔画问题 Author: shen_渊 Date: 18/04/17 15:22 Description: 这个题用并查集做,更好.在练搜索,试试 ...
- c/c++写的比较好的读写配置文件的函数或者类
共用版 .h文件 //---------------------------------------------------------------------------- // 程序名称: ...
- 2017-2018-1 20179203 《Linux内核原理与分析》第五周作业
攥写人:李鹏举 学号:20179203 ( 原创作品转载请注明出处) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/US ...