css的auto值是什么意思
auto值的介绍
auto表表示自适应,由浏览器去自动计算auto值,auto在不同的环境下表示不同的意思。
在文档流模型中的auto值:
块级元素的auto:
可以设置auto值的属性: width、height、margin。
当以上这些水平方向的属性设置为auto时,表示计算包含块的剩余可用空间。
当以上这些垂直方向上属性设置为auto时,height会自适应内容,margin上下会计算为0,原因是块级元素在垂直方向上并不要求占满一行,原理可以看我这篇博客: https://blog.csdn.net/androidioskl/article/details/122857240?spm=1001.2014.3001.5501
案例
.parent{width: 300px;height: 300px;background: green;}<div class="parent"><div style="width: 100px; height: auto; margin: auto; background: red;">我是块级元素</div></div>
我们可以看到块级元素是居中,高度是由内容撑起的,首先子元素占据width占据包含块100px,因此父元素的可用空间还有200px,根据上面水平方向上的margin表示计算包含块的可用空间,因此margin左右会均分父元素的剩余空间被计算为100px,所以就导致元素居中了。而height是自适应内容的因此有内容撑起,垂直方向上的margin被计算为0,所以没有垂直居中。
行内元素的auto:
可用设置auto值的属性: margin,因为行内元素不能设置宽高而且垂直方向上的margin都失效,所以我们不考虑宽高和垂直方向上的属性。
当以上这些属性设置水平方向上的值为auto时,计算为0,原因和块级元素的height的一样元素在垂直方向上不要求占满一行。
案例
<span style="margin: auto; background:red">我是行内元素</span>
可以看到水平方向上的margin没有居中,所以被计算为0;
行内块元素:
可以设置auto值的属性: width、height、margin。
这不用多说了,结合了块级元素和行内元素的特性。
当以上这些水平方向的上属性设置值为auto时,width会自适应内容,margin计算为0。
当以上这些垂直方向上的属性设置值为auto时,height会自适应内容,margin计算为0,
在浮动模型中的auto值:
可以设置auto值的属性: width、height、margin。
由于浮动脱离文档流因此并不要求占满一行,所以margin:auto计算为0,width和height为auto时是自适应内容。
案例
.parent{width: 300px;height: 300px;background: lightblue;}.child{float: leftwidth: auto;height: auto;margin: auto;background: red;}
在定位模型中的auto值:
这里首先理解一下什么叫静态位置,表示计算为文档流的位置,比如元素的left为静态位置,表示的就是元素原来在文档流中的位置到包含块左边缘的位置。
相对定位:
可以设置auto值的属性: width、height、margin、left、right、bottom、top。
width、height、margin和上面文档流的情况一样。
当left和right都为auto时,left和right计算为0px;
当left(right)为固定值时,right计算为负left(left为负right)
以上bottom和top的情况一样。
案例
.parent{width: 300px;height: 300px;background: lightblue;}.child{position: relative;left: 10px;right: auto;width: 200px;background: red;}</style><div class="parent"><div class="child">我是相对定位</div></div>
我们可以看到,当left为10px时,right为auto时,right被计算为负left,所以right计算为-10px;
为什么这么做?是为了解决left、top、bottom、top同时设置时的冲突。
你想想啊,为什么left=10px和right=-10px,可以同时设置不会冲突,当然不会冲突了,向自身位置的左边偏移10px和向自身位置的右边偏移负10px,表示的不都是同一个位置,所以当然不会冲突了。
绝对定位
待更新
css的auto值是什么意思相关推荐
- CSS属性和值--备份
CSS 属性和值 属性 / 值 描述和注释 background 任 何 background-attachment.background- color.background-image.backgr ...
- html标签默认值,HTML标签CSS属性默认值汇总
HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...
- html auto自动,css中auto什么意思?
auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算.块级元素中margin.border.padding以及content宽度之和构成父元素width.使用auto属性后,父 ...
- js删除css某个属性值
先上结论: 属性值不能删, 可以设置成默认值 问题描述: 做小项目的时候需要js触发条件时把一个有固定高度的div的height属性删掉 也就是变成高度由子元素决定(height属性写在CSS) 想到 ...
- css中auto啥意思,css中auto什么意思?
auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算.块级元素中margin.border.padding以及content宽度之和构成父元素width.使用auto属性后,父 ...
- 一个CSS的px值转rem值的Sublime Text 3自动完成插件
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 下载本项目,比如:git clone https://github.com/flashlizi/cssr ...
- js获取html样式属性,js怎么获取指定css属性的值?
js怎么获取指定css属性的值?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. js怎么获取指定css属性的值? 1.通过dom.style.属性 来获取 ...
- css样式属性值无效问题
我出现的问题是单位写错导致css样式属性值无效,如图所示,倾斜度单位是deg而不是dep,原因:对此单位不熟悉: 经过看其他人文章发现还有可能出现以下问题: 1.css写属性值,一个标签的中括号后面加 ...
- css中默认值的灰色rgb_rgb()函数以及CSS中的示例
css中默认值的灰色rgb Introduction: 介绍: Functions and properties go hand in hand while developing a website ...
最新文章
- 讽刺笑话_完全不讽刺的2019年网络设计指南
- Survey | 生物医学文本挖掘最新进展
- ​清华来了第二位菲尔兹奖得主,是丘成桐力荐的老朋友Caucher Birkar
- 平均 15189 元!2021 年 3 月程序员工资统计出炉
- Spring @Autowired和@Resource
- 计算机硬盘怎么增加e盘和f盘,如何在我的电脑里新建一个磁盘区
- B题 锅炉水冷壁温度曲线 2021年第一届长三角高校数学建模竞赛
- eclipse文本框输出mysql全部数据_小巧轻便的数据库管理软件HeidiSQL
- 基于UML的面向对象分析与设计
- 分组查询 group by 子句及order by子句
- python choice添加下拉框_自定义Django Form中choicefield下拉菜单选取数据库内容实例...
- Android Studio 使用教程(4)---gradle项目构建
- 前端学成什么样就能找工作了?
- 拿什么来拯救你,电视!
- BGP Flow Specification原理
- 为RecyclerView打造通用Adapter
- W3school笔记——HTML
- 孩子沉迷游戏,家长该怎么办?
- 抖音小程序开发教程之初识抖音小程序 (教程含源码)
- sql查询时添加一列为固定值