css中auto属性值的使用

理解前须知：

width/ height的默认值为auto
margin的默认为0
padding的默认为0
left right top bottom 默认值为auto
border 不写属性的情况下默认为0
如果border: solid 不指定大小单边默认为2.4px，最小可设为为0.8px

元素的水平方向的布局：

元素在其父元素中水平方向的位置由以下几个属性共同决定
一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left+border-left+padding-left+width+
padding-right+border-right+margin-right = 其父元素内容区的宽度（必须满足）
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800

- 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
- 调整的情况：如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足

#box {width: 400px;height: 300px;background-color: greenyellow;}.child {width: 100px;height: 100px;margin-left: auto;background: red;}/* 等式为：auto + 0 + 0 + 100 + 0 + 0 + 0  = 400*/  /* margin-left: auto; 相当于给margin-left: 300px; */

- 这七个值中有三个值和设置为auto
width
margin-left
maring-right
- 如果某个值为auto，则会自动调整为auto的那个值以使等式成立
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800
0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600
200 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300

    - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0- 如果将三个值都设置为auto，则外边距都是0，宽度最大- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值所以我们经常利用这个特点来使一个元素在其父元素中水平居中示例：width: xxxpx;margin:0 auto;

居中定位案例：

 .child {width: 100px;height: 100px;background: red;position: absolute;/* left right top bottom 默认为auto 重置为0 */left: 0;right: 0;margin: auto;bottom: 0;top: 0;}

css中auto属性值的使用相关推荐

CSS中position属性值有哪些？
CSS中position属性值有哪些? 1.position:relative;相对定位 1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性) 2> 不会使元素脱离文档流( ...
css中margin属性值百分比的使用
margin使我们使用得很频繁的一个属性,用来设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度,可以有 1 到 4 个值.例子:margin:10px 5px 15px 20px; 说明: 属 ...
CSS中font-family属性值中文和英文的问题
近日,公司要求更改系统使用字体,我想,这还不简单吗,ctrl+H(全局搜索)font-family属性,看哪些是不符合要求的字体,但是在这过程中发现其属性值是英文和中文多种情况,这不禁产生疑惑,这中英 ...
html中zoom方法,CSS中zoom属性或overflow:auto的使用方法
这次给大家带来CSS中zoom属性或overflow:auto的使用方法,使用CSS中zoom属性或overflow:auto的注意事项有哪些,下面就是实战案例,一起来看一下. 前言其实在CSS中的 ...
CSS中定位属性的常见属性值
CSS中定位属性的常见属性值在使用CSS对页面布局时,我们常会使用到定位属性,定位主要应用于一个元素在另外一个元素之上,或者我们需要在网页中精准地确定某一个元素的位置,并且这个元素有明确的参照物.其 ...
html中display有哪些属性值,css中display属性是什么及其各个值的作用和用法
当你查看别人写的css代码的时候,经常会看到display:block.none.inline.table等,那么在css中display属性到底是什么呢,都可以取什么值,每个值又有什么样的作用,到底 ...
【转】刨根究底CSS（2）：CSS中的各种值——初始值，就是默认值吗？
先问个非常简单的问题,这个问题的答案,相信大部分Web开发人员都自认为显而易见,但却又多半会答错:CSS属性中的初始值(initial value),就是默认值(default value)吗? 难道 ...
html auto自动,css中auto什么意思？
auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算.块级元素中margin.border.padding以及content宽度之和构成父元素width.使用auto属性后,父 ...
html页边距为负值,css中的padding属性可以为负值吗？css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧首先我们介绍的是第一个问题 ...

css中auto属性值的使用

css中auto属性值的使用相关推荐

最新文章

热门文章